convert content to md

1 files changed, 66 insertions, 89 deletions

diff --git a/files/fr/web/css/_colon_active/index.md b/files/fr/web/css/_colon_active/index.md
index 0ac630a4c3..8317472411 100644
--- a/files/fr/web/css/_colon_active/index.md
+++ b/files/fr/web/css/_colon_active/index.md
@@ -1,129 +1,106 @@
 ---
 title: ':active'
-slug: 'Web/CSS/:active'
+slug: Web/CSS/:active
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:active'
+translation_of: Web/CSS/:active
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:active</code></strong> permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un <em>feedback</em> indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:active`** permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un _feedback_ indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.
 
-<pre class="brush: css no-line-numbers">/* ne cible &lt;a&gt; que lorsqu'il est activé */
+```css
+/* ne cible <a> que lorsqu'il est activé */
 /* par exemple quand on clique dessus */
 a:active {
   color: red;
-}</pre>
+}
+```
 
-<p>La pseudo-classe <code>:active</code> est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML {{HTMLElement("a")}} et {{HTMLElement("button")}} mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément {{HTMLElement("label")}} associé.</p>
+La pseudo-classe `:active` est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML {{HTMLElement("a")}} et {{HTMLElement("button")}} mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément {{HTMLElement("label")}} associé.
 
-<p>La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec <code>:active</code> doit être écrite après les autres : <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec `:active` doit être écrite après les autres : `:link` — `:visited` — `:hover` — `:active`.
 
-<div class="note">
-  <p><strong>Note :</strong> Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe <code>:active</code> ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.</p>
-</div>
+> **Note :** Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe `:active` ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Liens_actifs">Liens actifs</h3>
+### Liens actifs
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">a:link { color: blue; }          /* Liens non visités */
+```css
+a:link { color: blue; }          /* Liens non visités */
 a:visited { color: purple; }     /* Liens visités */
 a:hover { background: yellow; }  /* Liens survolés */
 a:active { color: red; }         /* Liens actifs */
 
-p:active { background: #eee; }   /* Paragraphes actifs */</pre>
+p:active { background: #eee; }   /* Paragraphes actifs */
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Ce paragraphe contient un lien :
-  &lt;a href="#"&gt;Ce lien devient rouge quand vous cliquez dessus.&lt;/a&gt;
+```html
+<p>Ce paragraphe contient un lien :
+  <a href="#">Ce lien devient rouge quand vous cliquez dessus.</a>
   Le paragraphe sera sur un fond gris quand vous cliquerez dessus
   ou sur le lien.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Liens_actifs')}}</p>
+{{EmbedLiveSample('Liens_actifs')}}
 
-<h3 id="Éléments_de_formulaire_actifs">Éléments de formulaire actifs</h3>
+### Éléments de formulaire actifs
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">form :active {
+```css
+form :active {
   color: red;
 }
 
 form button {
   background: white;
-}</pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="mon-button"&gt;Un bouton :&lt;/label&gt;
-  &lt;button id="mon-button" type="button"&gt;Cliquez sur moi ou sur mon libellé !&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Éléments_de_formulaire_actifs')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.active")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":link")}}</li>
- <li>{{cssxref(":visited")}}</li>
- <li>{{cssxref(":hover")}}</li>
-</ul>
+}
+```
+
+#### HTML
+
+```html
+<form>
+  <label for="mon-button">Un bouton :</label>
+  <button id="mon-button" type="button">Cliquez sur moi ou sur mon libellé !</button>
+</form>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Éléments_de_formulaire_actifs')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}}     |                      |
+| {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}                 | {{Spec2('CSS4 Selectors')}} | Aucune modification. |
+| {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}             | {{Spec2('CSS3 Selectors')}} | Aucune modification. |
+| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}}             | Aucune modification. |
+| {{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}                     | {{Spec2('CSS1')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.active")}}
+
+## Voir aussi
+
+- {{cssxref(":link")}}
+- {{cssxref(":visited")}}
+- {{cssxref(":hover")}}