convert content to md

1 files changed, 30 insertions, 58 deletions

diff --git a/files/fr/web/css/css_logical_properties/sizing/index.md b/files/fr/web/css/css_logical_properties/sizing/index.md
index 2ede7d1bca..e3ded8e4ea 100644
--- a/files/fr/web/css/css_logical_properties/sizing/index.md
+++ b/files/fr/web/css/css_logical_properties/sizing/index.md
@@ -8,83 +8,55 @@ tags:
 translation_of: Web/CSS/CSS_Logical_Properties/Sizing
 original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p>
+Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.
 
-<p>Lorsqu'on définit la taille d'un objet, <a href="https://drafts.csswg.org/css-logical/">la spécification sur les propriétés et les valeurs logiques</a> permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs <em>logiques</em>, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs <em>physiques</em> en combinaison avec ces propriétés et ces valeurs logiques.</p>
+Lorsqu'on définit la taille d'un objet, [la spécification sur les propriétés et les valeurs logiques](https://drafts.csswg.org/css-logical/) permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs _logiques_, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs _physiques_ en combinaison avec ces propriétés et ces valeurs logiques.
 
-<h2 id="Correspondances_pour_les_dimensions">Correspondances pour les dimensions</h2>
+## Correspondances pour les dimensions
 
-<p>Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (<code>horizontal-tb</code>) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.</p>
+Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (`horizontal-tb`) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.
 
-<p>Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.</p>
+Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété logique</th>
-   <th scope="col">Propriété physique</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{CSSxRef("inline-size")}}</td>
-   <td>{{CSSxRef("width")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("block-size")}}</td>
-   <td>{{CSSxRef("height")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("min-inline-size")}}</td>
-   <td>{{CSSxRef("min-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("min-block-size")}}</td>
-   <td>{{CSSxRef("min-height")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("max-inline-size")}}</td>
-   <td>{{CSSxRef("max-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("max-block-size")}}</td>
-   <td>{{CSSxRef("max-height")}}</td>
-  </tr>
- </tbody>
-</table>
+| Propriété logique                        | Propriété physique               |
+| ---------------------------------------- | -------------------------------- |
+| {{CSSxRef("inline-size")}}     | {{CSSxRef("width")}}     |
+| {{CSSxRef("block-size")}}         | {{CSSxRef("height")}}     |
+| {{CSSxRef("min-inline-size")}} | {{CSSxRef("min-width")}} |
+| {{CSSxRef("min-block-size")}} | {{CSSxRef("min-height")}} |
+| {{CSSxRef("max-inline-size")}} | {{CSSxRef("max-width")}} |
+| {{CSSxRef("max-block-size")}} | {{CSSxRef("max-height")}} |
 
-<h2 id="Exemple_pour_width_et_height">Exemple pour <code>width</code> et <code>height</code></h2>
+## Exemple pour `width` et `height`
 
-<p>Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer <code>width</code> par <code>inline-size</code> et <code>height</code> par <code>block-size</code> et on obtiendra le même résultat.</p>
+Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer `width` par `inline-size` et `height` par `block-size` et on obtiendra le même résultat.
 
-<p>Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec <code>horizontal-tb</code>. En modifiant cette valeur pour la passer à <code>vertical-rl</code>, on verra que le premier exemple, qui utilise <code>width</code> et <code>height</code>, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise <code>inline-size</code> et <code>block-size</code>, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.</p>
+Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec `horizontal-tb`. En modifiant cette valeur pour la passer à `vertical-rl`, on verra que le premier exemple, qui utilise `width` et `height`, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise `inline-size` et `block-size`, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}
 
-<h2 id="Exemple_pour_min-width_et_min-height">Exemple pour <code>min-width</code> et <code>min-height</code></h2>
+## Exemple pour `min-width` et `min-height`
 
-<p>Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que <code>inline-size</code> et <code>block-size</code> mais paramètrent une taille minimale plutôt qu'une taille fixe.</p>
+Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que `inline-size` et `block-size` mais paramètrent une taille minimale plutôt qu'une taille fixe.
 
-<p>Dans l'exemple suivant, vous pouvez passer le mode d'écriture en <code>vertical-rl</code> et observer l'effet obtenu. Là encore, on utilise la propriété physique (<code>min-height</code>) sur le premier exemple et la propriété logique (<code>min-block-size</code>) sur le second.</p>
+Dans l'exemple suivant, vous pouvez passer le mode d'écriture en `vertical-rl` et observer l'effet obtenu. Là encore, on utilise la propriété physique (`min-height`) sur le premier exemple et la propriété logique (`min-block-size`) sur le second.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}
 
-<h2 id="Exemple_pour_max-width_et_max-height">Exemple pour <code>max-width</code> et <code>max-height</code></h2>
+## Exemple pour `max-width` et `max-height`
 
-<p>Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.</p>
+Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}
 
-<h2 id="Mots-clés_logiques_pour_resize">Mots-clés logiques pour <code>resize</code></h2>
+## Mots-clés logiques pour `resize`
 
-<p>La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques <code>horizontal</code> et <code>vertical</code>. La propriété <code>resize</code> peut désormais s'utiliser également avec des valeurs logiques : <code>resize: inline</code> permettra de redimensionner un objet sur l'axe en ligne et <code>resize: block</code> permettra de le redimensionner sur l'axe en bloc.</p>
+La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques `horizontal` et `vertical`. La propriété `resize` peut désormais s'utiliser également avec des valeurs logiques : `resize: inline` permettra de redimensionner un objet sur l'axe en ligne et `resize: block` permettra de le redimensionner sur l'axe en bloc.
 
-<p>La valeur <code>both</code> peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.</p>
+La valeur `both` peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}
 
-<div class="warning">
-<p><strong>Attention :</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p>
-</div>
+> **Attention :** À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour `resize`.