use class="hidden" not style="display:none"

54 files changed, 88 insertions, 91 deletions

diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
index d8fd3424a7..3e49f7571d 100644
--- a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
+++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
@@ -62,7 +62,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web
 <p>Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :</p>
 
 <dl>
- <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200 : OK</strong></dt>
+ <dt><strong><span id="cke_bm_110S" class="hidden"> </span>200 : OK</strong></dt>
  <dd>La ressource demandée a bien été transmise.</dd>
  <dt><strong>301 : Déplacée de façon permanente (<em>Moved permanently</em>)</strong></dt>
  <dd>La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.</dd>
diff --git a/files/fr/learn/forms/form_validation/index.html b/files/fr/learn/forms/form_validation/index.html
index 7180169353..4e9b4d5a92 100644
--- a/files/fr/learn/forms/form_validation/index.html
+++ b/files/fr/learn/forms/form_validation/index.html
@@ -830,7 +830,7 @@ addEvent(form, "submit", function () {
  </li>
  <li>Greffons jQuery :
   <ul>
-   <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external" title="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">Validation</a><span style="display: none;"> </span></li>
+   <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external" title="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">Validation</a><span class="hidden"> </span></li>
   </ul>
  </li>
 </ul>
diff --git a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/create/index.html b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/create/index.html
index de4913c645..5489314ebb 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/create/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/create/index.html
@@ -50,7 +50,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/create
    <li>"red"</li>
    <li>"pink"</li>
    <li>"purple"</li>
-   <li>"toolbar"<span style="display: none;"> </span></li>
+   <li>"toolbar"<span class="hidden"> </span></li>
   </ul>
   </dd>
   <dt><code>icon</code></dt>
diff --git a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/update/index.html b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/update/index.html
index 226780b24a..da3c0bfd5b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/update/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/update/index.html
@@ -55,7 +55,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/update
    <li>"red"</li>
    <li>"pink"</li>
    <li>"purple"</li>
-   <li>"toolbar"<span style="display: none;"> </span></li>
+   <li>"toolbar"<span class="hidden"> </span></li>
   </ul>
   </dd>
   <dt><code>icon</code> {{optional_inline}}</dt>
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.html b/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.html
index 227ff38917..4158719c06 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.html
@@ -59,7 +59,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/create
    <li>javascript: URLs</li>
    <li>data: URLs</li>
    <li>file: URLs (c'est-à-dire, fichiers sur le système de fichiers, cependant, pour utiliser un fichier empaqueté à l'intérieur de l'extension, voir ci-dessous)</li>
-   <li>privileged about: URLs (par exemple, <code>about:config</code>, <code>about:addons</code>, <code>about:debugging</code>)<span style="display: none;"> </span>. Les URL non privilégiées (e.g., <code>about:blank</code>) sont autorisés.</li>
+   <li>privileged about: URLs (par exemple, <code>about:config</code>, <code>about:addons</code>, <code>about:debugging</code>)<span class="hidden"> </span>. Les URL non privilégiées (e.g., <code>about:blank</code>) sont autorisés.</li>
    <li>La page Nouvel onglet (<code>about:newtab</code>) peut être ouverte si aucune valeur n'est fournie pour l'URL.</li>
   </ul>
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.html b/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.html
index 8fe8ee06ab..43b73a7929 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.html
@@ -74,7 +74,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/update
    <li>javascript: URLs</li>
    <li>data: URLs</li>
    <li>file: URLs (c'est-à-dire, fichiers sur le système de fichiers, cependant, pour utiliser un fichier empaqueté à l'intérieur de l'extension, voir ci-dessous)</li>
-   <li>confidentiel : URLs (par exemle, <code>about:config</code>, <code>about:addons</code>, <code>about:debugging</code>, <code>about:newtab</code>)<span style="display: none;"> </span>. Les URL non privilégiées (par exemple, <code>about:blank</code>) sont autorisées.</li>
+   <li>confidentiel : URLs (par exemle, <code>about:config</code>, <code>about:addons</code>, <code>about:debugging</code>, <code>about:newtab</code>)<span class="hidden"> </span>. Les URL non privilégiées (par exemple, <code>about:blank</code>) sont autorisées.</li>
   </ul>
   Pour charger une page fournie avec votre extension, spécifiez une URL absolue à partir du fichier manifest.json de l'extension. Par exemple : '/path/to/my-page.html'. Si vous omettez le premier caractère '/', l'URL est traitée comme une URL relative et différents navigateurs peuvent construire différentes URL absolues.</dd>
  </dl>
diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/resourcetype/index.html b/files/fr/mozilla/add-ons/webextensions/api/webrequest/resourcetype/index.html
index a8b07698ea..b5fc7c42e3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/resourcetype/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/resourcetype/index.html
@@ -48,7 +48,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest/ResourceType
  <dd>Requêtes envoyées par plugins.</dd>
  <dt><code>ping</code></dt>
  <dd>Demandes envoyées à l'URL donnée dans l'attribut {{htmlattrxref("ping", "a")}} d'un hyperlien, lorsque l'hyperlien est suivi..</dd>
- <dd><span style="display: none;"> </span>Les navigateurs qui n'ont pas de type de <code>balise</code> dédié (voir la compatibilité des navigateurs ci-dessous), étiquettent également les requêtes envoyées par l'API Beacon en tant que <code>ping</code>.</dd>
+ <dd><span class="hidden"> </span>Les navigateurs qui n'ont pas de type de <code>balise</code> dédié (voir la compatibilité des navigateurs ci-dessous), étiquettent également les requêtes envoyées par l'API Beacon en tant que <code>ping</code>.</dd>
  <dt><code>script</code></dt>
  <dd>Code chargé pour être exécuté par un élément {{HTMLElement("script")}} ou exécuté dans un <a href="/fr/docs/Web/API/Web_Workers_API">Worker</a>.</dd>
  <dt><code>speculative</code></dt>
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html
index 69bd665e64..437939ec70 100644
--- a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.html
@@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups
 
 <p>Lorsque l'utilisateur clique sur le bouton, la fenêtre contextuelle s'affiche. Lorsque l'utilisateur clique n'importe où en dehors de la fenêtre contextuelle, la fenêtre contextuelle est fermée. La fenêtre contextuelle peut être fermée par programmation en appelant <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window/close">window.close()</a></code> à partir d'un script exécuté dans la fenêtre contextuelle. Cependant, vous ne pouvez pas ouvrir le menu contextuel à partir d'un JavaScript de le l'extension : il ne peut être ouvert qu'en réponse à une action de l'utilisateur.</p>
 
-<p>Vous pouvez définir un raccourci clavier qui ouvre la fenêtre contextuelle en utilisant les raccourcis <code>"_execute_browser_action"</code> et <code>"_execute_page_action"</code>. Consultez la clé de <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commande</a></code><span style="display: none;"> </span> de la documentation du manifest.json.</p>
+<p>Vous pouvez définir un raccourci clavier qui ouvre la fenêtre contextuelle en utilisant les raccourcis <code>"_execute_browser_action"</code> et <code>"_execute_page_action"</code>. Consultez la clé de <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commande</a></code><span class="hidden"> </span> de la documentation du manifest.json.</p>
 
 <h2 id="Spécification_dune_fenêtre_contextuelle">Spécification d'une fenêtre contextuelle</h2>
 
diff --git a/files/fr/tools/performance/waterfall/index.html b/files/fr/tools/performance/waterfall/index.html
index 0a351605e1..caea98ceb1 100644
--- a/files/fr/tools/performance/waterfall/index.html
+++ b/files/fr/tools/performance/waterfall/index.html
@@ -189,9 +189,9 @@ original_slug: Outils/Performance/Waterfall
     <p>Préparation/préoptimisation pour le Cycle Collection.</p>
    </td>
    <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
-   <td><span style="display: none;"> </span>
-    <p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><strong>Type</strong></p>
-    <span style="display: none;"> </span>
+   <td><span class="hidden"> </span>
+    <p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><strong>Type</strong></p>
+    <span class="hidden"> </span>
 
     <dl>
      <dd>Toujours "ForgetSkippable".</dd>
diff --git a/files/fr/web/api/cachestorage/match/index.html b/files/fr/web/api/cachestorage/match/index.html
index 42346f8fd0..22e25ab644 100644
--- a/files/fr/web/api/cachestorage/match/index.html
+++ b/files/fr/web/api/cachestorage/match/index.html
@@ -40,7 +40,7 @@ translation_of: Web/API/CacheStorage/match
   <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à <code>true</code>, la partie <code>?value=bar</code> de <code>http://foo.com/?value=bar</code> sera ignoré lors d'un rapporchement. La valeur par défaut est <code>false</code>.</li>
   <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} <code>http</code> (normalement, seulement <code>GET</code> et <code>HEAD</code> sont authorisés) La valeur par défaut est <code>false</code>.</li>
   <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header <code>VARY</code>. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header <code>VARY</code>. La valeur par défaut est <code>false</code>.</li>
-  <li><code>cacheName</code>: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.<span style="display: none;"> </span></li>
+  <li><code>cacheName</code>: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.<span class="hidden"> </span></li>
  </ul>
  </dd>
 </dl>
diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.html b/files/fr/web/api/canvasgradient/addcolorstop/index.html
index 76059cf23b..3929dde01b 100644
--- a/files/fr/web/api/canvasgradient/addcolorstop/index.html
+++ b/files/fr/web/api/canvasgradient/addcolorstop/index.html
@@ -52,7 +52,7 @@ ctx.fillRect(10, 10, 200, 100);
 
 <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html
index 28219272c1..f71bbb14db 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html
@@ -55,7 +55,7 @@ ctx.stroke();</code></pre>
 
 <p>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code" name="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
@@ -101,7 +101,7 @@ window.addEventListener("load", drawCanvas);
 
 <p>Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par <code>arc()</code>.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="HTML_2">HTML</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html
index 4df338c796..63a7c190dc 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -49,7 +49,7 @@ ctx.stroke();
 
 <p>Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html
index b3748ccbd7..6d32bb14f5 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -40,7 +40,7 @@ ctx.stroke();
 
 <p>Editez le code ci-dessous et observez les répercutions dans le canvas:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html
index 76fb50df9f..a764bd4477 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html
@@ -70,7 +70,7 @@ ctx.fillRect(10, 10, 200, 100);
 
 <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html
index 1d217a65b7..9355533e78 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -65,7 +65,6 @@ void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLar
 <h4 id="HTML">HTML</h4>
 
 <pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-&lt;div style="display:none;"&gt;
   &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
        width="300" height="227"&gt;
 &lt;/div&gt;
@@ -82,11 +81,10 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
 
 <p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div style="display:none;"&gt;
   &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
 &lt;/div&gt;
 &lt;div class="playable-buttons"&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html
index 61d8e1345d..80b247abdc 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html
@@ -62,7 +62,7 @@ ctx.stroke();
 
 <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code" name="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html
index 2a5e36e2cb..3bec32ef04 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -54,7 +54,7 @@ ctx.fillRect(10, 10, 100, 100);
 
 <p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html
index 666e230f59..598c9bb3ac 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html
@@ -58,7 +58,7 @@ ctx.fillText('Hello world', 50, 100);
 
 <p>Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html
index 51359d72fd..afa3187b8b 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html
@@ -51,7 +51,7 @@ ctx.stroke();
 
 <p>Éditez le code suivant pour voir les changements en direct:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html
index f7890599d4..a290011500 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html
@@ -49,7 +49,7 @@ ctx.stroke();
 
 <p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html
index f030ad7c92..72cc18fca8 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html
@@ -51,7 +51,7 @@ ctx.fill();
 
 <p>Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html
index 94dabd0201..66a5dcea2d 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html
@@ -54,7 +54,7 @@ ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html
index 91746be321..d0315f61ea 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html
@@ -54,7 +54,7 @@ ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
@@ -100,7 +100,7 @@ window.addEventListener("load", drawCanvas);
 
 <p>Vous pouvez utiliser <code>ctx.scale(-1, 1)</code> pour retourner le contexte horizontalement et <code>ctx.scale(1, -1) </code>pour le retourner verticalement.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code2">Playable code2</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html
index 99a57ca4c5..2f821c9367 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html
@@ -69,7 +69,7 @@ ctx.stroke();
 
 <p>Editez le code ci-dessous et observez les changements se produire dans le canvas:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html
index 54a288091b..e538f72e22 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html
@@ -61,7 +61,7 @@ ctx.fillRect(0, 0, 100, 100);
 
 <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html
index 59f9bb5f95..4813eca699 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -41,7 +41,7 @@ ctx.stroke();
 
 <p>Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html
index e2ac6a0f97..e625af9801 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html
@@ -53,7 +53,7 @@ ctx.strokeRect(10, 10, 100, 100);
 
 <p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html
index 379e409679..8c89a5bf6b 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html
@@ -58,7 +58,7 @@ ctx.strokeText('Hello world', 50, 100);
 
 <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html
index fa60151b13..f90c0fca72 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html
@@ -61,7 +61,7 @@ ctx.fillRect(0, 0, 100, 100);
 
 <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html
index 6146a88b6c..2ea645a83d 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html
@@ -54,7 +54,7 @@ ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/fr/web/api/credential/index.html b/files/fr/web/api/credential/index.html
index 3c0956f0df..e4d0953c70 100644
--- a/files/fr/web/api/credential/index.html
+++ b/files/fr/web/api/credential/index.html
@@ -23,7 +23,7 @@ translation_of: Web/API/Credential
  <ul>
   <li><code>password</code> (pour {{domxref("PasswordCredential")}})</li>
   <li><code>federated</code> (pour {{domxref("FederatedCredential")}})</li>
-  <li><code>public-key</code> (pour {{domxref("PublicKeyCredential")}})<span style="display: none;"> </span></li>
+  <li><code>public-key</code> (pour {{domxref("PublicKeyCredential")}})<span class="hidden"> </span></li>
  </ul>
  </dd>
 </dl>
diff --git a/files/fr/web/api/document/adoptnode/index.html b/files/fr/web/api/document/adoptnode/index.html
index 959e060387..16b8760df2 100644
--- a/files/fr/web/api/document/adoptnode/index.html
+++ b/files/fr/web/api/document/adoptnode/index.html
@@ -24,8 +24,8 @@ translation_of: Web/API/Document/adoptNode
 </pre>
 
 <dl>
- <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>node</code></dt>
- <dd>est le noeud adopté  qui a maintenant ce document en tant que son <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> (<em>document propriétaire</em>). Le <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document.  Notez que <code>node</code> et <code>externalNode</code> sont le même objet après cet appel.<span style="display: none;">  </span><span style="display: none;"> </span></dd>
+ <dt><code><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span>node</code></dt>
+ <dd>est le noeud adopté  qui a maintenant ce document en tant que son <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> (<em>document propriétaire</em>). Le <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document.  Notez que <code>node</code> et <code>externalNode</code> sont le même objet après cet appel.<span class="hidden">  </span><span class="hidden"> </span></dd>
  <dt><code>externalNode</code></dt>
  <dd>est le noeud à adopter existant dans un autre document.</dd>
 </dl>
diff --git a/files/fr/web/api/document/compatmode/index.html b/files/fr/web/api/document/compatmode/index.html
index 23cd1c1dbd..0197c02c50 100644
--- a/files/fr/web/api/document/compatmode/index.html
+++ b/files/fr/web/api/document/compatmode/index.html
@@ -20,7 +20,7 @@ translation_of: Web/API/Document/compatMode
 <h2 id="Valeurs">Valeurs</h2>
 
 <ul>
- <li><code>"BackCompat"</code> si le document est a<span style="display: none;"> </span>ffiché en mode<span style="display: none;"> </span><span style="display: none;"> </span> "quirks" ;<span style="display: none;"> </span></li>
+ <li><code>"BackCompat"</code> si le document est a<span class="hidden"> </span>ffiché en mode<span class="hidden"> </span><span class="hidden"> </span> "quirks" ;<span class="hidden"> </span></li>
 </ul>
 
 <dl>
@@ -29,7 +29,7 @@ translation_of: Web/API/Document/compatMode
 </dl>
 
 <ul>
- <li><code>"CSS1Compat"</code> si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo<span style="display: none;"> </span>de "proche du standard").</li>
+ <li><code>"CSS1Compat"</code> si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo<span class="hidden"> </span>de "proche du standard").</li>
 </ul>
 
 <dl>
diff --git a/files/fr/web/api/document/execcommand/index.html b/files/fr/web/api/document/execcommand/index.html
index 0828ac309b..dd90b03485 100644
--- a/files/fr/web/api/document/execcommand/index.html
+++ b/files/fr/web/api/document/execcommand/index.html
@@ -338,7 +338,7 @@ translation_of: Web/API/Document/execCommand
     </div>
      </div>
 
-<div id="compat-mobile" style="display: none;">
+<div id="compat-mobile" class="hidden">
 <table class="compat-table">
  <tbody>
   <tr>
diff --git a/files/fr/web/api/elementcssinlinestyle/style/index.html b/files/fr/web/api/elementcssinlinestyle/style/index.html
index 69b6276029..f6a4337edf 100644
--- a/files/fr/web/api/elementcssinlinestyle/style/index.html
+++ b/files/fr/web/api/elementcssinlinestyle/style/index.html
@@ -43,7 +43,7 @@ div.style.marginTop = ".25cm";
 
 <p>{{Compat("api.HTMLElement.style")}}</p>
 
-<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span id="1236997045923S" style="display: none;"> </span>Voir aussi</h2>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span id="1236997045923S" class="hidden"> </span>Voir aussi</h2>
 
 <ul>
  <li><a class="internal" href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">Liste des propriétés CSS DOM</a> (en)</li>
diff --git a/files/fr/web/api/event/event/index.html b/files/fr/web/api/event/event/index.html
index aeb96638d8..464a126f19 100644
--- a/files/fr/web/api/event/event/index.html
+++ b/files/fr/web/api/event/event/index.html
@@ -30,7 +30,7 @@ translation_of: Web/API/Event/Event
  <ul>
   <li><code>bubbles</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est <code>false</code> (<em>faux</em>).</li>
   <li><code>cancelable</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est <code>false</code> (<em>faux</em>) .</li>
-  <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .<span style="display: none;"> </span></li>
+  <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .<span class="hidden"> </span></li>
  </ul>
  </dd>
 </dl>
diff --git a/files/fr/web/api/mouseevent/index.html b/files/fr/web/api/mouseevent/index.html
index 9ca9f98666..f201122012 100644
--- a/files/fr/web/api/mouseevent/index.html
+++ b/files/fr/web/api/mouseevent/index.html
@@ -85,7 +85,7 @@ translation_of: Web/API/MouseEvent
  <dd>Alias pour {{domxref("MouseEvent.clientY")}}.</dd>
 </dl>
 
-<h2 id="Constantes"><span style="display: none;"> </span><span style="display: none;"> </span>Constantes</h2>
+<h2 id="Constantes"><span class="hidden"> </span><span class="hidden"> </span>Constantes</h2>
 
 <dl>
  <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
diff --git a/files/fr/web/api/worker/worker/index.html b/files/fr/web/api/worker/worker/index.html
index 34717d9a21..662be32858 100644
--- a/files/fr/web/api/worker/worker/index.html
+++ b/files/fr/web/api/worker/worker/index.html
@@ -30,7 +30,7 @@ translation_of: Web/API/Worker/Worker
  <ul>
   <li><code>type</code>: Une {{domxref("DOMString")}} définissant le type de worker à créer. The valeur peuvent être <code>classic</code> ou <code>module</code>. Si cette prpriété n'est pas définie, la valeur sera <code>classic</code>.</li>
   <li><code>credentials</code>: Une {{domxref("DOMString")}} définissant le type de politique d'origine à utiliser pour le <em>worker</em>. Les valeurs peuvent être <dfn><code>omit</code></dfn>, <code><dfn>same-origin</dfn></code> ou <dfn><code>include</code>. </dfn>Si cette propriété n'est pas définie, ou que type est défini à <code>classic</code>, la valeur sera <code>classic</code>.</li>
-  <li><code>name</code>: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+  <li><code>name</code>: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.<span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></li>
  </ul>
  </dd>
 </dl>
diff --git a/files/fr/web/css/css_background_and_borders/border-image_generator/index.html b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html
index c6114bd4ca..c0c5db61cd 100644
--- a/files/fr/web/css/css_background_and_borders/border-image_generator/index.html
+++ b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html
@@ -9,7 +9,7 @@ original_slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image
 ---
 <p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="Border_Image_Generator" name="Border_Image_Generator">Générateur border-image</h2>
 
 <h3 id="Contenu_HTML">Contenu HTML</h3>
diff --git a/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html
index 408be607e4..ac9bc500aa 100644
--- a/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html
+++ b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -9,7 +9,7 @@ original_slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius
 ---
 <p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
 
 <h3 id="Contenu_HTML">Contenu HTML</h3>
diff --git a/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html
index 418fde72dd..282a53d6e4 100644
--- a/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html
@@ -9,7 +9,7 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow
 ---
 <p>Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
 
 <h3 id="HTML_Content">HTML Content</h3>
diff --git a/files/fr/web/css/css_colors/color_picker_tool/index.html b/files/fr/web/css/css_colors/color_picker_tool/index.html
index 1703a2f993..6143791170 100644
--- a/files/fr/web/css/css_colors/color_picker_tool/index.html
+++ b/files/fr/web/css/css_colors/color_picker_tool/index.html
@@ -7,7 +7,7 @@ tags:
 translation_of: Web/CSS/CSS_Colors/Color_picker_tool
 original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs
 ---
-<div style="display: none;">
+<div class="hidden">
 <h2 id="ColorPIcker_Tool" name="ColorPIcker_Tool">ColorPIcker Tool</h2>
 
 <h3 id="HTML_Content">HTML Content</h3>
diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.html b/files/fr/web/css/css_transitions/using_css_transitions/index.html
index 0b17461d05..19d7aefd57 100644
--- a/files/fr/web/css/css_transitions/using_css_transitions/index.html
+++ b/files/fr/web/css/css_transitions/using_css_transitions/index.html
@@ -51,7 +51,7 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
  <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 0.5s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -116,7 +116,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 1s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -181,7 +181,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 2s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -246,7 +246,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 4s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -315,7 +315,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: ease</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -378,7 +378,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: linear</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -441,7 +441,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: step-end</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -504,7 +504,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: steps(4, end)</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -571,7 +571,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 0.5s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -643,7 +643,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 1s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -715,7 +715,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 2s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -787,7 +787,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 4s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
diff --git a/files/fr/web/css/filter/index.html b/files/fr/web/css/filter/index.html
index 2e10b2f60c..9f24d80f55 100644
--- a/files/fr/web/css/filter/index.html
+++ b/files/fr/web/css/filter/index.html
@@ -101,7 +101,7 @@ img {
 <pre class="brush: css">filter: blur(5px)
 </pre>
 
-<div id="blur_example" style="display: none;">
+<div id="blur_example" class="hidden">
 <pre class="brush: html">  &lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -198,7 +198,7 @@ table.standard-table td {
   &lt;/filter&gt;
 &lt;/svg&gt;</pre>
 
-<div id="brightness_example" style="display: none;">
+<div id="brightness_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -297,7 +297,7 @@ table.standard-table td {
   &lt;/filter&gt;
 &lt;/svg&gt;</pre>
 
-<div id="contrast_example" style="display: none;">
+<div id="contrast_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -411,7 +411,7 @@ table.standard-table td {
   &lt;/filter&gt;
 &lt;/svg&gt;</pre>
 
-<div id="shadow_example" style="display: none;">
+<div id="shadow_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -533,7 +533,7 @@ table.standard-table td {
 
 <pre class="brush: css">filter: grayscale(100%)</pre>
 
-<div id="grayscale_example" style="display: none;">
+<div id="grayscale_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -621,7 +621,7 @@ table.standard-table td {
 
 <pre class="brush: css">filter: hue-rotate(90deg)</pre>
 
-<div id="huerotate_example" style="display: none;">
+<div id="huerotate_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -712,7 +712,7 @@ table.standard-table td {
 
 <pre class="brush: css">filter: invert(100%)</pre>
 
-<div id="invert_example" style="display: none;">
+<div id="invert_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -800,7 +800,7 @@ table.standard-table td {
 
 <pre class="brush: css">filter: opacity(50%)</pre>
 
-<div id="opacity_example" style="display: none;">
+<div id="opacity_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -886,7 +886,7 @@ table.standard-table td {
 
 <pre class="brush: css">filter: saturate(200%)</pre>
 
-<div id="saturate_example" style="display: none;">
+<div id="saturate_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -971,7 +971,7 @@ table.standard-table td {
 
 <pre class="brush: css">filter: sepia(100%)</pre>
 
-<div id="sepia_example" style="display: none;">
+<div id="sepia_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -1059,7 +1059,7 @@ table.standard-table td {
 
 <pre class="brush: css">filter: contrast(175%) brightness(103%)</pre>
 
-<div id="combination()" style="display: none;">
+<div id="combination()" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
diff --git a/files/fr/web/css/transition-delay/index.html b/files/fr/web/css/transition-delay/index.html
index 8d3991d0a2..7f1053f8c2 100644
--- a/files/fr/web/css/transition-delay/index.html
+++ b/files/fr/web/css/transition-delay/index.html
@@ -56,7 +56,7 @@ transition-delay: unset;
 <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 0.5s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -123,7 +123,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 1s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -190,7 +190,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 2s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -257,7 +257,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 4s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
diff --git a/files/fr/web/css/transition-duration/index.html b/files/fr/web/css/transition-duration/index.html
index 7d97c7ae48..a859c23f3f 100644
--- a/files/fr/web/css/transition-duration/index.html
+++ b/files/fr/web/css/transition-duration/index.html
@@ -50,7 +50,7 @@ transition-duration: unset;
 <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 0.5s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -115,7 +115,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 1s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -180,7 +180,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 2s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -245,7 +245,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 4s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
diff --git a/files/fr/web/html/element/input/number/index.html b/files/fr/web/html/element/input/number/index.html
index e134aa2a77..ed38487203 100644
--- a/files/fr/web/html/element/input/number/index.html
+++ b/files/fr/web/html/element/input/number/index.html
@@ -270,7 +270,6 @@ input:valid+span:after {
         &lt;input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required&gt;
         &lt;span class="validity"&gt;&lt;/span&gt;
     &lt;/div&gt;
-    &lt;div class="feetInputGroup" style="display: none;"&gt;
         &lt;span&gt;Saisir votre taille — &lt;/span&gt;
         &lt;label for="feet"&gt;feet :&lt;/label&gt;
         &lt;input id="feet" type="number" name="feet" min="0" step="1"&gt;
@@ -289,7 +288,7 @@ input:valid+span:after {
 
 <p>Ici on utilise l'attribut <code>step</code> avec la valeur <code>0.01</code> afin d'accepter une taille en centimètres. On fournit également un texte indicatif via <code>placeholder</code>.</p>
 
-<p>Par défaut on masque la saisie en pieds avec <code>style="display: none;"</code>.</p>
+<p>Par défaut on masque la saisie en pieds avec <code>class="hidden"</code>.</p>
 
 <h3 id="CSS">CSS</h3>
 
diff --git a/files/fr/web/http/status/index.html b/files/fr/web/http/status/index.html
index c49a6cca41..3d30883fd2 100644
--- a/files/fr/web/http/status/index.html
+++ b/files/fr/web/http/status/index.html
@@ -182,7 +182,7 @@ translation_of: Web/HTTP/Status
 
  <ul>
   <li><a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP">Liste des codes de statut HTTP sur Wikipedia</a></li>
-  <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">Registre officiel des codes de statut HTTP par l'IANA</a><span style="display: none;"> </span></li>
+  <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">Registre officiel des codes de statut HTTP par l'IANA</a><span class="hidden"> </span></li>
  </ul>
  </dt>
 </dl>
diff --git a/files/fr/web/javascript/reference/global_objects/object/create/index.html b/files/fr/web/javascript/reference/global_objects/object/create/index.html
index e8f8cf50a5..5cf69f483c 100644
--- a/files/fr/web/javascript/reference/global_objects/object/create/index.html
+++ b/files/fr/web/javascript/reference/global_objects/object/create/index.html
@@ -223,7 +223,7 @@ o2 = Object.create({}, {
 <div id="SLO_balloon_obj" style="display: block;">
 <div class="SLO_ImTranslatorLogo" id="SLO_button" style="display: none; opacity: 1;"></div>
 
-<div id="SLO_shadow_translation_result2" style="display: none;"></div>
+<div id="SLO_shadow_translation_result2" class="hidden"></div>
 
 <div id="SLO_shadow_translator" style="display: none; left: 63px; top: 0px; box-shadow: rgb(186, 185, 181) 0px 0px 0px;">
 <div id="SLO_planshet">
@@ -237,7 +237,7 @@ o2 = Object.create({}, {
 <div class="SLO_BL_LABLE_ON" id="SLO_P2" title="Translator">T</div>
 </div>
 
-<div id="SLO_alert_bbl" style="display: none;">
+<div id="SLO_alert_bbl" class="hidden">
 <div id="SLHKclose"></div>
 
 <div id="SLO_alert_cont"></div>
diff --git a/files/fr/web/manifest/index.html b/files/fr/web/manifest/index.html
index dd344294fa..6d7a5e276d 100644
--- a/files/fr/web/manifest/index.html
+++ b/files/fr/web/manifest/index.html
@@ -174,7 +174,7 @@ translation_of: Web/Manifest
  </thead>
  <tbody>
   <tr>
-   <td><span style="display: none;"> </span> </td>
+   <td><span class="hidden"> </span> </td>
    <td></td>
   </tr>
   <tr>
diff --git a/files/fr/web/mathml/element/math/index.html b/files/fr/web/mathml/element/math/index.html
index 5e1cf317ff..0257ef4c41 100644
--- a/files/fr/web/mathml/element/math/index.html
+++ b/files/fr/web/mathml/element/math/index.html
@@ -19,7 +19,7 @@ translation_of: Web/MathML/Element/math
  <dt id="attr-class-id-style">class, id, style</dt>
  <dd>Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de style</a>.</dd>
  <dt id="attr-dir">dir</dt>
- <dd><span style="display: none;"> </span>Le sens global de lecture des formules. Les valeurs possibles sont <code>ltr</code> (gauche à droite) ou <code>rtl</code> (droite à gauche).</dd>
+ <dd><span class="hidden"> </span>Le sens global de lecture des formules. Les valeurs possibles sont <code>ltr</code> (gauche à droite) ou <code>rtl</code> (droite à gauche).</dd>
  <dt id="attr-href">href</dt>
  <dd>Un hyperlien pointant vers un URI donné.</dd>
  <dt id="attr-mathbackground">mathbackground</dt>
diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.html b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html
index 6668cbe216..f7f381646f 100644
--- a/files/fr/web/svg/applying_svg_effects_to_html_content/index.html
+++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html
@@ -185,7 +185,7 @@ pre.target:hover { filter:url(#f3); }
 
 <p>{{EmbedLiveSample('Exemple_Filtres', 650, 200)}}</p>
 
-<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
+<p class="hidden"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
 
 <h3 id="Exemple_Texte_flouté">Exemple : Texte flouté</h3>
 
diff --git a/files/fr/webassembly/understanding_the_text_format/index.html b/files/fr/webassembly/understanding_the_text_format/index.html
index 4a38e79ea1..bd74f464d3 100644
--- a/files/fr/webassembly/understanding_the_text_format/index.html
+++ b/files/fr/webassembly/understanding_the_text_format/index.html
@@ -26,7 +26,7 @@ translation_of: WebAssembly/Understanding_the_text_format
 
 <dl>
  <dt>{{EmbedLiveSample}}</dt>
- <dd>Afin de permettre aux humains de lire et d'éditer du code WebAssembly, il y a une représentation textuelle du format binaire wasm. C'est une forme intermédiaire conçue pour être affic<span style="display: none;"> </span><span style="display: none;"> </span>hée dans les éditeurs de texte, les outils de développeurs intégrés aux navigateurs web, etc. Cet article montre comment ce format fonctionne sur le plan syntaxique, mais aussi comment il se combine avec le code binaire sous-jacent — ainsi que l'objet JavaScript englobant qui représente wasm.</dd>
+ <dd>Afin de permettre aux humains de lire et d'éditer du code WebAssembly, il y a une représentation textuelle du format binaire wasm. C'est une forme intermédiaire conçue pour être affic<span class="hidden"> </span><span class="hidden"> </span>hée dans les éditeurs de texte, les outils de développeurs intégrés aux navigateurs web, etc. Cet article montre comment ce format fonctionne sur le plan syntaxique, mais aussi comment il se combine avec le code binaire sous-jacent — ainsi que l'objet JavaScript englobant qui représente wasm.</dd>
  <dt><strong>Note</strong>: Ceci est potentiellement exagéré si vous êtes un développeur web cherchant uniquement à charger un module wasm dans une page pour l'utiliser dans votre code (voir <a href="https://developer.mozilla.org/fr/docs/WebAssembly/Using_the_JavaScript_API">Utilisez l'API JavaScript de WebAssembly</a>). Mais il est plus utile si, en revanche, vous voulez écrite des modules wasm pour optimiser les performances de votre librairies Javascript, ou construire votre propre compilateur WebAssembl</dt>
 </dl>