convert content to md

1 files changed, 58 insertions, 80 deletions

diff --git a/files/fr/web/css/resolution/index.md b/files/fr/web/css/resolution/index.md
index 46e7ea706a..f386c2c3c2 100644
--- a/files/fr/web/css/resolution/index.md
+++ b/files/fr/web/css/resolution/index.md
@@ -7,57 +7,56 @@ tags:
   - Type
 translation_of: Web/CSS/resolution
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée CSS <strong><code>&lt;resolution&gt;</code></strong>, utilisé dans les <em><a href="/fr/docs/Web/CSS/Media_Queries">media queries</a></em>, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.</p>
+Le type de donnée CSS **`<resolution>`**, utilisé dans les _[media queries](/fr/docs/Web/CSS/Media_Queries)_, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.
 
-<p>Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.</p>
+Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une valeur de ce type sera composée d'un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de résolution (<code>dpi</code>, <code>dpcm</code>, …). Comme pour les autres dimensions CSS, il n'y a aucun espace entre la valeur numérique et l'unité.</p>
+Une valeur de ce type sera composée d'un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de résolution (`dpi`, `dpcm`, …). Comme pour les autres dimensions CSS, il n'y a aucun espace entre la valeur numérique et l'unité.
 
-<p>Bien que toutes les unités représentent la même chose pour la valeur <code>0</code>, l'unité ne peut être omise dans ce cas puisque ce n'est pas une donnée de type {{cssxref("&lt;length&gt;")}} : <code>0</code> est invalide et ne représente pas <code>0dpi</code>, <code>0dpcm</code>, ni <code>0dppx</code>.</p>
+Bien que toutes les unités représentent la même chose pour la valeur `0`, l'unité ne peut être omise dans ce cas puisque ce n'est pas une donnée de type {{cssxref("&lt;length&gt;")}} : `0` est invalide et ne représente pas `0dpi`, `0dpcm`, ni `0dppx`.
 
-<h3 id="Unités">Unités</h3>
+### Unités
 
-<dl>
- <dt><code>dpi</code></dt>
- <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce">points par pouce</a>. Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, <code>1 dpi ≈ 0,39 dpcm</code>.</dd>
- <dt><code>dpcm</code></dt>
- <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce#Tableau_de_conversion">points par centimètre</a>. Puisque 1 pouce équivaut à 2.54 cm, <code>1dpcm ≈ 2,54 dpi</code>.</dd>
- <dt><code>dppx</code></dt>
- <dd>Cette unité représente le nombre de points par unité CSS <code>px</code>. Puisque le ratio entre les unités CSS <code>in</code> et CSS <code>px</code> vaut 1:96, <code>1 dppx</code> est équivalent à <code>96 dpi</code>, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.</dd>
- <dt><code>x</code></dt>
- <dd>Un alias pour <code>dppx</code>.</dd>
-</dl>
+- `dpi`
+  - : Cette unité représente le nombre de [points par pouce](https://fr.wikipedia.org/wiki/Point_par_pouce). Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, `1 dpi ≈ 0,39 dpcm`.
+- `dpcm`
+  - : Cette unité représente le nombre de [points par centimètre](https://fr.wikipedia.org/wiki/Point_par_pouce#Tableau_de_conversion). Puisque 1 pouce équivaut à 2.54 cm, `1dpcm ≈ 2,54 dpi`.
+- `dppx`
+  - : Cette unité représente le nombre de points par unité CSS `px`. Puisque le ratio entre les unités CSS `in` et CSS `px` vaut 1:96, `1 dppx` est équivalent à `96 dpi`, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.
+- `x`
+  - : Un alias pour `dppx`.
 
-<div class="note">
-<p><strong>Note :</strong> Bien que le nombre <code>0</code> représente la même mesure pour ces différentes unités. Si la valeur est écrite sans unité, elle sera considérée comme invalide. Autrement dit, <code>0</code> est invalide et ne représente pas <code>0dpi</code>, <code>0dpcm</code> ou <code>0dppx</code>.</p>
-</div>
+> **Note :** Bien que le nombre `0` représente la même mesure pour ces différentes unités. Si la valeur est écrite sans unité, elle sera considérée comme invalide. Autrement dit, `0` est invalide et ne représente pas `0dpi`, `0dpcm` ou `0dppx`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Usage_correct">Usage correct</h3>
+### Usage correct
 
-<p>Voici quelques exemples d'utilisation correcte de données de type <code>&lt;resolution&gt;</code> :</p>
+Voici quelques exemples d'utilisation correcte de données de type `<resolution>` :
 
-<pre class="brush: css">96dpi                                              Usage correct : un {{cssxref("&lt;number&gt;")}} (ici un {{cssxref("&lt;integer&gt;")}}) suivi d'une unité.
-@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">media query</a>.
-</pre>
+```css
+96dpi                                              Usage correct : un {{cssxref("&lt;number&gt;")}} (ici un {{cssxref("&lt;integer&gt;")}}) suivi d'une unité.
+@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une media query.
+```
 
-<h3 id="Usages_incorrects">Usages incorrects</h3>
+### Usages incorrects
 
-<pre class="brush: css">72 dpi    Incorrect : les espaces ne sont pas acceptés entre le {{cssxref("&lt;number&gt;")}} et l'unité.
+```css
+72 dpi    Incorrect : les espaces ne sont pas acceptés entre le {{cssxref("&lt;number&gt;")}} et l'unité.
 ten dpi   Incorrect : seules des expressions numériques sont acceptées.
 0         Incorrect : l'unité ne peut être omise que pour l'expression de la valeur 0 de type {{cssxref("&lt;length&gt;")}}.
-</pre>
+```
 
-<h3 id="Exemple_appliqué">Exemple appliqué</h3>
+### Exemple appliqué
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">/* Saurez-vous trouver votre résolution en dpi */
+```css
+/* Saurez-vous trouver votre résolution en dpi */
 /* via l'exemple live ?                        */
 @media screen and (min-resolution: 100dpi) {
   .exemple {
@@ -70,56 +69,35 @@ ten dpi   Incorrect : seules des expressions numériques sont acceptées.
     background-color: orange;
   }
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   À ces mots le Chapelier ouvrit de grands yeux ; mais
   il se contenta de dire : « Pourquoi une pie
   ressemble-t-elle à un pupitre ? »
-&lt;/p&gt;</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Exemple_appliqué","200","200")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#resolution', '&lt;resolution&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td>Ajout de l'unité <code>x</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Ajout de l'unité <code>dppx</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.resolution")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/@media/resolution">La caractéristique média <code>resolution</code></a></li>
-</ul>
+</p>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Exemple_appliqué","200","200")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires             |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------ |
+| {{SpecName('CSS4 Values', '#resolution', '&lt;resolution&gt;')}}             | {{Spec2('CSS4 Values')}}         | Ajout de l'unité `x`.    |
+| {{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}             | {{Spec2('CSS3 Values')}}         | Ajout de l'unité `dppx`. |
+| {{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale.     |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.resolution")}}
+
+## Voir aussi
+
+- [Les _media queries_ CSS](/fr/docs/Web/CSS/Media_Queries)
+- [La caractéristique média `resolution`](/fr/docs/Web/CSS/@media/resolution)