convert content to md

1 files changed, 65 insertions, 96 deletions

diff --git a/files/fr/web/css/opacity/index.md b/files/fr/web/css/opacity/index.md
index 4f33f117e4..1f6f054b5f 100644
--- a/files/fr/web/css/opacity/index.md
+++ b/files/fr/web/css/opacity/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/opacity
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>opacity</code></strong> définit la transparence d'un élément. Autrement dit, elle permet de définir le degré de visibilité de l'arrière-plan sur lequel est placé l'élément.</p>
+La propriété **`opacity`** définit la transparence d'un élément. Autrement dit, elle permet de définir le degré de visibilité de l'arrière-plan sur lequel est placé l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
+{{EmbedInteractiveExample("pages/css/opacity.html")}}
 
-<p>La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser <code>opacity</code>, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : <code>background: rgba(0, 0, 0, 0.4);</code>).</p>
+La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser `opacity`, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : `background: rgba(0, 0, 0, 0.4);`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs numériques */
+```css
+/* Valeurs numériques */
 /* Totalement opaque  */
 opacity: 1;
 opacity: 1.0;
@@ -33,47 +34,32 @@ opacity: 0;
 opacity: inherit;
 opacity: initial;
 opacity: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} dans l'intervalle [<code>0.0</code>, <code>1.0]</code> qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi <code>6</code> sera équivalent à <code>1</code> et -2 sera équivalent à <code>0</code>).
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <th>Valeur</th>
-    <th>Signification</th>
-   </tr>
-   <tr>
-    <td><code>0</code></td>
-    <td>L'élément est complètement transparent (invisible).</td>
-   </tr>
-   <tr>
-    <td>Toute valeur de type {{cssxref("&lt;number&gt;")}} strictement comprise entre <code>0</code> et <code>1</code></td>
-    <td>L'élément est partiellement transparent, on peut voir l'arrière-plan.</td>
-   </tr>
-   <tr>
-    <td><code>1</code> (la valeur par défaut)</td>
-    <td>L'élément est complètement opaque.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<number>`
+
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} dans l'intervalle \[`0.0`, `1.0]` qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi `6` sera équivalent à `1` et -2 sera équivalent à `0`).
+
+    | Valeur                                                                                              | Signification                                                         |
+    | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+    | `0`                                                                                                 | L'élément est complètement transparent (invisible).                   |
+    | Toute valeur de type {{cssxref("&lt;number&gt;")}} strictement comprise entre `0` et `1` | L'élément est partiellement transparent, on peut voir l'arrière-plan. |
+    | `1` (la valeur par défaut)                                                                          | L'élément est complètement opaque.                                    |
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
 }
 
@@ -89,24 +75,26 @@ opacity: unset;
   /* Le texte est clairement visible */
   opacity: 0.9;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="leger"&gt;On arrive à peine à lire.&lt;/div&gt;
-&lt;div class="moyen"&gt;On voit mieux.&lt;/div&gt;
-&lt;div class="lourd"&gt;Ceci est plus simple à lire.&lt;/div&gt;
-</pre>
+```html
+<div class="leger">On arrive à peine à lire.</div>
+<div class="moyen">On voit mieux.</div>
+<div class="lourd">Ceci est plus simple à lire.</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_simple', '640', '64')}}</p>
+{{EmbedLiveSample('Exemple_simple', '640', '64')}}
 
-<h3 id="Jouer_sur_l’opacité_avec_hover">Jouer sur l’opacité avec <code>:hover</code></h3>
+### Jouer sur l’opacité avec `:hover`
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">img.opacity {
+```css
+img.opacity {
   opacity: 1;
   /* IE8 et antérieurs */
   filter: alpha(opacity=100);
@@ -118,63 +106,44 @@ img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=50);
   zoom: 1;
-}</pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png"
+```html
+<img src="//developer.mozilla.org/media/img/mdn-logo.png"
      alt="MDN logo" width="128" height="146"
-     class="opacity"&gt;
-</pre>
+     class="opacity">
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}</p>
+{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision.</p>
+Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision.
 
-<p>Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du <a href="https://www.w3.org/WAI/intro/wcag">WCAG</a>  conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus).</p>
+Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du [WCAG](https://www.w3.org/WAI/intro/wcag)  conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus).
 
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"><em>Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [Vérificateur de contraste WebAIM](https://webaim.org/resources/contrastchecker/)
+- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [_Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>opacity</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
-   <td>{{Spec2('CSS3 Colors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                                   | Commentaires                          |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}} | {{Spec2('CSS3 Transitions')}} | `opacity` peut désormais être animée. |
+| {{SpecName('CSS3 Colors', '#opacity', 'opacity')}}                 | {{Spec2('CSS3 Colors')}}         | Définition initiale.                  |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.opacity")}}</p>
+{{Compat("css.properties.opacity")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">La documentation MSDN de Microsoft sur <code>filter:alpha(opacity=xx)</code></a></li>
-</ul>
+- [La documentation MSDN de Microsoft sur `filter:alpha(opacity=xx)`](https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx)