convert content to md

37 files changed, 1072 insertions, 1567 deletions

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")}}