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

44 files changed, 76 insertions, 79 deletions

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>