From 97065b2e68dd8768dc1ea092c893c57ebe205026 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Thu, 25 Feb 2021 08:31:36 -0500
Subject: use class="hidden" not style="display:none"

---
 .../api/canvasrenderingcontext2d/arc/index.html    |   4 +-
 .../canvasrenderingcontext2d/beginpath/index.html  |   2 +-
 .../canvasrenderingcontext2d/clearrect/index.html  |   6 +-
 .../canvasrenderingcontext2d/drawimage/index.html  |   4 +-
 .../canvasrenderingcontext2d/fillrect/index.html   |   2 +-
 .../es/web/api/canvasrenderingcontext2d/index.html |   4 +-
 files/es/web/api/event/event/index.html            |   2 +-
 files/es/web/api/media_streams_api/index.html      |   4 +-
 files/es/web/css/appearance/index.html             | 220 ++++++++++-----------
 files/es/web/css/background-blend-mode/index.html  |   5 +-
 files/es/web/css/blend-mode/index.html             |  48 ++---
 .../web/css/border-bottom-left-radius/index.html   |  10 +-
 .../web/css/border-bottom-right-radius/index.html  |  10 +-
 .../es/web/css/border-top-right-radius/index.html  |   2 +-
 .../border-image_generator/index.html              |   2 +-
 .../border-radius_generator/index.html             |   2 +-
 .../css/css_colors/color_picker_tool/index.html    |   2 +-
 .../stacking_context_example_1/index.html          |   2 +-
 files/es/web/css/filter/index.html                 |  22 +--
 files/es/web/css/gradient/index.html               |   6 +-
 files/es/web/css/text-decoration-style/index.html  |   2 +-
 .../css/tools/cubic_bezier_generator/index.html    |   2 +-
 files/es/web/css/transition-delay/index.html       |   8 +-
 files/es/web/css/transition-duration/index.html    |   8 +-
 files/es/web/html/element/input/number/index.html  |   3 +-
 .../http/cors/errors/corsdidnotsucceed/index.html  |   4 +-
 files/es/web/http/headers/accept/index.html        |   2 +-
 files/es/web/http/status/index.html                |   4 +-
 .../unicode_property_escapes/index.html            |   2 +-
 .../reference/global_objects/math/cos/index.html   |   2 +-
 files/es/web/media/formats/index.html              |   2 +-
 files/es/web/tutorials/index.html                  |   2 +-
 .../index.html                                     |   2 +-
 33 files changed, 191 insertions(+), 211 deletions(-)

(limited to 'files/es/web')

diff --git a/files/es/web/api/canvasrenderingcontext2d/arc/index.html b/files/es/web/api/canvasrenderingcontext2d/arc/index.html
index db4803a7ab..e6867c1785 100644
--- a/files/es/web/api/canvasrenderingcontext2d/arc/index.html
+++ b/files/es/web/api/canvasrenderingcontext2d/arc/index.html
@@ -51,7 +51,7 @@ ctx.stroke();
 
 <p><span class="notranslate">Edite el código de abajo y vea su actualización de cambios en vivo en el lienzo:</span></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;
@@ -97,7 +97,7 @@ window.addEventListener("load", drawCanvas);
 
 <p><span class="notranslate">En este ejemplo se dibujan diferentes formas para mostrar lo que es posible al usar <code>arc()</code> .</span></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/es/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html
index 1c91e264f4..1ba81cea48 100644
--- a/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html
+++ b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -51,7 +51,7 @@ ctx.stroke();
 
 <p>Edita el código aquí debajo y mira tus cambios actualizarse en vivo en el 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/es/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html
index 64aa1a3908..12f9709bc5 100644
--- a/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html
+++ b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -41,7 +41,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect
  </dt>
 </dl>
 
-<p><span style="display: none;"> </span> Este es un simple fragmento (snippet) de código que usa el método <strong><code>clearRect</code></strong>.</p>
+<p><span class="hidden"> </span> Este es un simple fragmento (snippet) de código que usa el método <strong><code>clearRect</code></strong>.</p>
 
 <h4 id="HTML">HTML</h4>
 
@@ -64,7 +64,7 @@ ctx.clearRect(10, 10, 100, 100);
 // clear the whole canvas
 // ctx.clearRect(0, 0, canvas.width, canvas.height);</pre>
 
-<h2 id="sect1"><span style="display: none;"> </span> </h2>
+<h2 id="sect1"><span class="hidden"> </span> </h2>
 
 <p>Edite el código de abajo y vea sus cambios actualizados en vivo en el canvas:</p>
 
@@ -87,7 +87,7 @@ ctx.clearRect(10, 10, 100, 100);
  </tbody>
 </table>
 
-<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/es/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html
index 2d5330ec53..45146d25ef 100644
--- a/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html
+++ b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -65,7 +65,6 @@ void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
 <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>Edita el código debajo y observa los cambios actualizarse en vivo en el 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/es/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html
index bc1a6ddf65..b1308d9171 100644
--- a/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html
+++ b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -49,7 +49,7 @@ ctx.fillRect(10, 10, 100, 100);
 
 <p>Edita el código  que se encuentra a continuación y observa en vivo los cambios actualizados en el 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/es/web/api/canvasrenderingcontext2d/index.html b/files/es/web/api/canvasrenderingcontext2d/index.html
index 77df4af190..f831371fe2 100644
--- a/files/es/web/api/canvasrenderingcontext2d/index.html
+++ b/files/es/web/api/canvasrenderingcontext2d/index.html
@@ -441,7 +441,7 @@ ctx.fillRect(10, 10, 55, 50);
 <div id="SLG_balloon_obj" style="display: block;">
 <div class="SLG_ImTranslatorLogo" id="SLG_button" style="display: none; opacity: 1;"> </div>
 
-<div id="SLG_shadow_translation_result2" style="display: none;"> </div>
+<div id="SLG_shadow_translation_result2" class="hidden"> </div>
 
 <div id="SLG_shadow_translator" style="display: none; box-shadow: rgb(186, 185, 181) 0px 0px 0px;">
 <div id="SLG_planshet">
@@ -455,7 +455,7 @@ ctx.fillRect(10, 10, 55, 50);
 <div class="SLG_BL_LABLE_ON" id="SLG_P2" title="Translator">T</div>
 </div>
 
-<div id="SLG_alert_bbl" style="display: none;">
+<div id="SLG_alert_bbl" class="hidden">
 <div id="SLHKclose" style=""> </div>
 
 <div id="SLG_alert_cont"> </div>
diff --git a/files/es/web/api/event/event/index.html b/files/es/web/api/event/event/index.html
index b1410daf7b..fa62101a16 100644
--- a/files/es/web/api/event/event/index.html
+++ b/files/es/web/api/event/event/index.html
@@ -26,7 +26,7 @@ translation_of: Web/API/Event/Event
   <li><code>"bubbles"</code>: (Opcional) {{jsxref("Boolean")}} indica si el evento se propaga. Por defecto es <code>false</code>.</li>
   <li><code>"cancelable"</code>: (Opcional) A {{jsxref("Boolean")}} indica si el evento puede ser cancelado. Por defecto es <code>false</code>.</li>
   <li><code>"scoped"</code>: (Opcional) {{jsxref("Boolean")}} indica el ámbito de propagación. Si el valor es <code>true</code>, <code>deepPath</code> contendrá el nodo de destino.</li>
-  <li><code>"composed"</code>: (Opcional) {{jsxref("Boolean")}} que indica si el evento disparará listeners fuera de un shadow root. Por defecto es <code>false</code>.<span style="display: none;"> </span></li>
+  <li><code>"composed"</code>: (Opcional) {{jsxref("Boolean")}} que indica si el evento disparará listeners fuera de un shadow root. Por defecto es <code>false</code>.<span class="hidden"> </span></li>
  </ul>
  </dd>
 </dl>
diff --git a/files/es/web/api/media_streams_api/index.html b/files/es/web/api/media_streams_api/index.html
index 38ece0b5b8..41b5620158 100644
--- a/files/es/web/api/media_streams_api/index.html
+++ b/files/es/web/api/media_streams_api/index.html
@@ -211,7 +211,7 @@ original_slug: WebRTC/MediaStream_API
   <dd>
     <strong>MediaTrackConstraints</strong> or <strong>null</strong></dd>
   <dt>
-    <span id="cke_bm_186C" style="display: none;"> </span>Excepciones</dt>
+    <span id="cke_bm_186C" class="hidden"> </span>Excepciones</dt>
   <dd>
     None.</dd>
 </dl>
@@ -321,7 +321,7 @@ original_slug: WebRTC/MediaStream_API
   <dd>
     INVALID_STATE_ERR if the stream is finished (all tracks have ended).</dd>
 </dl>
-<h3 id="item()">item()<span id="cke_bm_369C" style="display: none;"> </span></h3>
+<h3 id="item()">item()<span id="cke_bm_369C" class="hidden"> </span></h3>
 <p>Devuelve la MediaStreamTrack al valor de índice (index) especificado.</p>
 <dl>
   <dt>
diff --git a/files/es/web/css/appearance/index.html b/files/es/web/css/appearance/index.html
index b9bb3a62cc..9e0bdcaada 100644
--- a/files/es/web/css/appearance/index.html
+++ b/files/es/web/css/appearance/index.html
@@ -48,7 +48,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>none</code></td>
    <td>
-    <div id="sampleNone" style="display: none;">
+    <div id="sampleNone" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre>
 
@@ -62,7 +62,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>button</code></td>
    <td>
-    <div id="sampleButton" style="display: none;">
+    <div id="sampleButton" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre>
 
@@ -75,7 +75,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>button-arrow-down</code></td>
    <td>
-    <div id="sampleButtonArrowDown" style="display: none;">
+    <div id="sampleButtonArrowDown" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre>
 
@@ -88,7 +88,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>button-arrow-next</code></td>
    <td>
-    <div id="sampleButtonArrowNext" style="display: none;">
+    <div id="sampleButtonArrowNext" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre>
 
@@ -101,7 +101,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>button-arrow-previous</code></td>
    <td>
-    <div id="sampleButtonArrowPrevious" style="display: none;">
+    <div id="sampleButtonArrowPrevious" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre>
 
@@ -114,7 +114,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>button-arrow-up</code></td>
    <td>
-    <div id="sampleButtonArrowUp" style="display: none;">
+    <div id="sampleButtonArrowUp" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre>
 
@@ -127,7 +127,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>button-bevel</code></td>
    <td>
-    <div id="sampleButtonBevel" style="display: none;">
+    <div id="sampleButtonBevel" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre>
 
@@ -140,7 +140,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>button-focus</code></td>
    <td>
-    <div id="sampleButtonFocus" style="display: none;">
+    <div id="sampleButtonFocus" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre>
 
@@ -153,7 +153,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>caret</code></td>
    <td>
-    <div id="sampleCaret" style="display: none;">
+    <div id="sampleCaret" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre>
 
@@ -166,7 +166,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>checkbox</code></td>
    <td>
-    <div id="sampleCheckbox" style="display: none;">
+    <div id="sampleCheckbox" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre>
 
@@ -179,7 +179,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>checkbox-container</code></td>
    <td>
-    <div id="sampleCheckboxContainer" style="display: none;">
+    <div id="sampleCheckboxContainer" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre>
 
@@ -192,7 +192,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>checkbox-label</code></td>
    <td>
-    <div id="sampleCheckboxLabel" style="display: none;">
+    <div id="sampleCheckboxLabel" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre>
 
@@ -205,7 +205,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>checkmenuitem</code></td>
    <td>
-    <div id="sampleCheckmenuitem" style="display: none;">
+    <div id="sampleCheckmenuitem" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre>
 
@@ -218,7 +218,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>dualbutton</code></td>
    <td>
-    <div id="sampleDualButton" style="display: none;">
+    <div id="sampleDualButton" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre>
 
@@ -231,7 +231,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>groupbox</code></td>
    <td>
-    <div id="sampleGroupbox" style="display: none;">
+    <div id="sampleGroupbox" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre>
 
@@ -244,7 +244,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>listbox</code></td>
    <td>
-    <div id="sampleListBox" style="display: none;">
+    <div id="sampleListBox" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre>
 
@@ -257,7 +257,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>listitem</code></td>
    <td>
-    <div id="sampleListItem" style="display: none;">
+    <div id="sampleListItem" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre>
 
@@ -270,7 +270,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menuarrow</code></td>
    <td>
-    <div id="sampleMenuArrow" style="display: none;">
+    <div id="sampleMenuArrow" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre>
 
@@ -283,7 +283,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menubar</code></td>
    <td>
-    <div id="sampleMenubar" style="display: none;">
+    <div id="sampleMenubar" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre>
 
@@ -296,7 +296,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menucheckbox</code></td>
    <td>
-    <div id="sampleMenuCheckbox" style="display: none;">
+    <div id="sampleMenuCheckbox" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre>
 
@@ -309,7 +309,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menuimage</code></td>
    <td>
-    <div id="sampleMenuImage" style="display: none;">
+    <div id="sampleMenuImage" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }</pre>
 
@@ -322,7 +322,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menuitem</code></td>
    <td>
-    <div id="sampleMenuItem" style="display: none;">
+    <div id="sampleMenuItem" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }</pre>
 
@@ -335,7 +335,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menuitemtext</code></td>
    <td>
-    <div id="sampleMenuItemText" style="display: none;">
+    <div id="sampleMenuItemText" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }</pre>
 
@@ -348,7 +348,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menulist</code></td>
    <td>
-    <div id="sampleMenuList" style="display: none;">
+    <div id="sampleMenuList" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }</pre>
 
@@ -361,7 +361,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menulist-button</code></td>
    <td>
-    <div id="sampleMenuListButton" style="display: none;">
+    <div id="sampleMenuListButton" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }</pre>
 
@@ -374,7 +374,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menulist-text</code></td>
    <td>
-    <div id="sampleMenuListText" style="display: none;">
+    <div id="sampleMenuListText" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }</pre>
 
@@ -387,7 +387,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menulist-textfield</code></td>
    <td>
-    <div id="sampleMenuListTextfield" style="display: none;">
+    <div id="sampleMenuListTextfield" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }</pre>
 
@@ -400,7 +400,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menupopup</code></td>
    <td>
-    <div id="sampleMenuPopup" style="display: none;">
+    <div id="sampleMenuPopup" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }</pre>
 
@@ -413,7 +413,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menuradio</code></td>
    <td>
-    <div id="sampleMenuRadio" style="display: none;">
+    <div id="sampleMenuRadio" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }</pre>
 
@@ -426,7 +426,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>menuseparator</code></td>
    <td>
-    <div id="sampleMenuSeparator" style="display: none;">
+    <div id="sampleMenuSeparator" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }</pre>
 
@@ -439,7 +439,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>meterbar</code></td>
    <td>
-    <div id="sampleMeterbar" style="display: none;">
+    <div id="sampleMeterbar" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }</pre>
 
@@ -452,7 +452,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>meterchunk</code></td>
    <td>
-    <div id="sampleMeterchunk" style="display: none;">
+    <div id="sampleMeterchunk" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }</pre>
 
@@ -465,7 +465,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>progressbar</code></td>
    <td>
-    <div id="sampleProgressBar" style="display: none;">
+    <div id="sampleProgressBar" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }</pre>
 
@@ -478,7 +478,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>progressbar-vertical</code></td>
    <td>
-    <div id="sampleProgressBarVertical" style="display: none;">
+    <div id="sampleProgressBarVertical" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }</pre>
 
@@ -491,7 +491,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>progresschunk</code></td>
    <td>
-    <div id="sampleProgressChunk" style="display: none;">
+    <div id="sampleProgressChunk" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }</pre>
 
@@ -504,7 +504,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>progresschunk-vertical</code></td>
    <td>
-    <div id="sampleProgressChunkVertical" style="display: none;">
+    <div id="sampleProgressChunkVertical" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }</pre>
 
@@ -517,7 +517,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>radio</code></td>
    <td>
-    <div id="sampleRadio" style="display: none;">
+    <div id="sampleRadio" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }</pre>
 
@@ -530,7 +530,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>radio-container</code></td>
    <td>
-    <div id="sampleRadioContainer" style="display: none;">
+    <div id="sampleRadioContainer" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }</pre>
 
@@ -543,7 +543,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>radio-label</code></td>
    <td>
-    <div id="sampleRadioLabel" style="display: none;">
+    <div id="sampleRadioLabel" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }</pre>
 
@@ -556,7 +556,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>radiomenuitem</code></td>
    <td>
-    <div id="sampleRadioMenuItem" style="display: none;">
+    <div id="sampleRadioMenuItem" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }</pre>
 
@@ -569,7 +569,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td>range</td>
    <td>
-    <div id="sampleRange" style="display: none;">
+    <div id="sampleRange" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: range; -webkit-appearance: range; color: black; }</pre>
 
@@ -582,7 +582,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td>range-thumb</td>
    <td>
-    <div id="sampleRangeThumb" style="display: none;">
+    <div id="sampleRangeThumb" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; }</pre>
 
@@ -595,7 +595,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>resizer</code></td>
    <td>
-    <div id="sampleResizer" style="display: none;">
+    <div id="sampleResizer" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }</pre>
 
@@ -608,7 +608,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>resizerpanel</code></td>
    <td>
-    <div id="sampleResizerPanel" style="display: none;">
+    <div id="sampleResizerPanel" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }</pre>
 
@@ -621,7 +621,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scale-horizontal</code></td>
    <td>
-    <div id="sampleScaleHorizontal" style="display: none;">
+    <div id="sampleScaleHorizontal" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }</pre>
 
@@ -634,7 +634,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scalethumbend</code></td>
    <td>
-    <div id="sampleThumbEnd" style="display: none;">
+    <div id="sampleThumbEnd" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }</pre>
 
@@ -647,7 +647,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scalethumb-horizontal</code></td>
    <td>
-    <div id="sampleScaleThumbHorizontal" style="display: none;">
+    <div id="sampleScaleThumbHorizontal" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }</pre>
 
@@ -660,7 +660,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scalethumbstart</code></td>
    <td>
-    <div id="sampleScaleThumbStart" style="display: none;">
+    <div id="sampleScaleThumbStart" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }</pre>
 
@@ -673,7 +673,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scalethumbtick</code></td>
    <td>
-    <div id="sampleScaleThumbTick" style="display: none;">
+    <div id="sampleScaleThumbTick" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }</pre>
 
@@ -686,7 +686,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scalethumb-vertical</code></td>
    <td>
-    <div id="sampleScaleThumbVertical" style="display: none;">
+    <div id="sampleScaleThumbVertical" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }</pre>
 
@@ -699,7 +699,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scale-vertical</code></td>
    <td>
-    <div id="sampleScaleVertical" style="display: none;">
+    <div id="sampleScaleVertical" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }</pre>
 
@@ -712,7 +712,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scrollbarbutton-down</code></td>
    <td>
-    <div id="sampleScrollbarButtonDown" style="display: none;">
+    <div id="sampleScrollbarButtonDown" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }</pre>
 
@@ -725,7 +725,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scrollbarbutton-left</code></td>
    <td>
-    <div id="sampleScrollbarButtonLeft" style="display: none;">
+    <div id="sampleScrollbarButtonLeft" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }</pre>
 
@@ -738,7 +738,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scrollbarbutton-right</code></td>
    <td>
-    <div id="sampleScrollbarButtonRight" style="display: none;">
+    <div id="sampleScrollbarButtonRight" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }</pre>
 
@@ -751,7 +751,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scrollbarbutton-up</code></td>
    <td>
-    <div id="sampleScrollbarButtonUp" style="display: none;">
+    <div id="sampleScrollbarButtonUp" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }</pre>
 
@@ -764,7 +764,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scrollbarthumb-horizontal</code></td>
    <td>
-    <div id="sampleScrollbarThumbHorizontal" style="display: none;">
+    <div id="sampleScrollbarThumbHorizontal" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }</pre>
 
@@ -777,7 +777,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scrollbarthumb-vertical</code></td>
    <td>
-    <div id="sampleScrollbarThumbVertical" style="display: none;">
+    <div id="sampleScrollbarThumbVertical" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }</pre>
 
@@ -790,7 +790,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scrollbartrack-horizontal</code></td>
    <td>
-    <div id="sampleScrollbarTrackHorizontal" style="display: none;">
+    <div id="sampleScrollbarTrackHorizontal" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }</pre>
 
@@ -803,7 +803,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>scrollbartrack-vertical</code></td>
    <td>
-    <div id="sampleScrollbarTrackVertical" style="display: none;">
+    <div id="sampleScrollbarTrackVertical" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }</pre>
 
@@ -816,7 +816,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>searchfield</code></td>
    <td>
-    <div id="sampleSearchField" style="display: none;">
+    <div id="sampleSearchField" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }</pre>
 
@@ -829,7 +829,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>separator</code></td>
    <td>
-    <div id="sampleSeparator" style="display: none;">
+    <div id="sampleSeparator" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }</pre>
 
@@ -842,7 +842,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>sheet</code></td>
    <td>
-    <div id="sampleSheet" style="display: none;">
+    <div id="sampleSheet" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }</pre>
 
@@ -855,7 +855,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>spinner</code></td>
    <td>
-    <div id="sampleSpinner" style="display: none;">
+    <div id="sampleSpinner" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }</pre>
 
@@ -868,7 +868,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>spinner-downbutton</code></td>
    <td>
-    <div id="sampleSpinnerDownbutton" style="display: none;">
+    <div id="sampleSpinnerDownbutton" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }</pre>
 
@@ -881,7 +881,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>spinner-textfield</code></td>
    <td>
-    <div id="sampleSpinnerTextfield" style="display: none;">
+    <div id="sampleSpinnerTextfield" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }</pre>
 
@@ -894,7 +894,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>spinner-upbutton</code></td>
    <td>
-    <div id="sampleSpinnerUpbutton" style="display: none;">
+    <div id="sampleSpinnerUpbutton" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }</pre>
 
@@ -907,7 +907,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>splitter</code></td>
    <td>
-    <div id="sampleSplitter" style="display: none;">
+    <div id="sampleSplitter" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }</pre>
 
@@ -920,7 +920,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>statusbar</code></td>
    <td>
-    <div id="sampleStatusBar" style="display: none;">
+    <div id="sampleStatusBar" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }</pre>
 
@@ -933,7 +933,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>statusbarpanel</code></td>
    <td>
-    <div id="sampleStatusBarPanel" style="display: none;">
+    <div id="sampleStatusBarPanel" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }</pre>
 
@@ -946,7 +946,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>tab</code></td>
    <td>
-    <div id="sampleTab" style="display: none;">
+    <div id="sampleTab" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }</pre>
 
@@ -959,7 +959,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>tabpanel</code></td>
    <td>
-    <div id="sampleTabPanel" style="display: none;">
+    <div id="sampleTabPanel" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }</pre>
 
@@ -972,7 +972,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>tabpanels</code></td>
    <td>
-    <div id="sampleTabPanels" style="display: none;">
+    <div id="sampleTabPanels" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }</pre>
 
@@ -985,7 +985,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>tab-scroll-arrow-back</code></td>
    <td>
-    <div id="sampleTabScrollArrowBack" style="display: none;">
+    <div id="sampleTabScrollArrowBack" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }</pre>
 
@@ -998,7 +998,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>tab-scroll-arrow-forward</code></td>
    <td>
-    <div id="sampleTabScrollArrowForward" style="display: none;">
+    <div id="sampleTabScrollArrowForward" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }</pre>
 
@@ -1011,7 +1011,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>textfield</code></td>
    <td>
-    <div id="sampleTextField" style="display: none;">
+    <div id="sampleTextField" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }</pre>
 
@@ -1024,7 +1024,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>textfield-multiline</code></td>
    <td>
-    <div id="sampleTextfieldMultiline" style="display: none;">
+    <div id="sampleTextfieldMultiline" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }</pre>
 
@@ -1037,7 +1037,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>toolbar</code></td>
    <td>
-    <div id="sampleToolbar" style="display: none;">
+    <div id="sampleToolbar" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }</pre>
 
@@ -1050,7 +1050,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>toolbarbutton</code></td>
    <td>
-    <div id="sampleToolbarButton" style="display: none;">
+    <div id="sampleToolbarButton" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }</pre>
 
@@ -1063,7 +1063,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>toolbarbutton-dropdown</code></td>
    <td>
-    <div id="sampleToolbarButtonDropdown" style="display: none;">
+    <div id="sampleToolbarButtonDropdown" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }</pre>
 
@@ -1076,7 +1076,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>toolbargripper</code></td>
    <td>
-    <div id="sampleToolbarGripper" style="display: none;">
+    <div id="sampleToolbarGripper" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }</pre>
 
@@ -1089,7 +1089,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>toolbox</code></td>
    <td>
-    <div id="sampleToolbox" style="display: none;">
+    <div id="sampleToolbox" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }</pre>
 
@@ -1102,7 +1102,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>tooltip</code></td>
    <td>
-    <div id="sampleTooltip" style="display: none;">
+    <div id="sampleTooltip" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }</pre>
 
@@ -1115,7 +1115,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>treeheader</code></td>
    <td>
-    <div id="sampleTreeHeader" style="display: none;">
+    <div id="sampleTreeHeader" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }</pre>
 
@@ -1128,7 +1128,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>treeheadercell</code></td>
    <td>
-    <div id="sampleTreeHeaderCell" style="display: none;">
+    <div id="sampleTreeHeaderCell" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }</pre>
 
@@ -1141,7 +1141,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>treeheadersortarrow</code></td>
    <td>
-    <div id="sampleTreeHeaderSortArrow" style="display: none;">
+    <div id="sampleTreeHeaderSortArrow" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }</pre>
 
@@ -1154,7 +1154,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>treeitem</code></td>
    <td>
-    <div id="sampleTreeItem" style="display: none;">
+    <div id="sampleTreeItem" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }</pre>
 
@@ -1167,7 +1167,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>treeline</code></td>
    <td>
-    <div id="sampleTreeLine" style="display: none;">
+    <div id="sampleTreeLine" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }</pre>
 
@@ -1180,7 +1180,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>treetwisty</code></td>
    <td>
-    <div id="sampleTreeTwisty" style="display: none;">
+    <div id="sampleTreeTwisty" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }</pre>
 
@@ -1193,7 +1193,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>treetwistyopen</code></td>
    <td>
-    <div id="sampleTreeTwistyOpen" style="display: none;">
+    <div id="sampleTreeTwistyOpen" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }</pre>
 
@@ -1206,7 +1206,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>treeview</code></td>
    <td>
-    <div id="sampleTreeView" style="display: none;">
+    <div id="sampleTreeView" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }</pre>
 
@@ -1219,7 +1219,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-mac-unified-toolbar</code></td>
    <td>
-    <div id="sampleMacUnifiedToolbar" style="display: none;">
+    <div id="sampleMacUnifiedToolbar" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-mac-unified-toolbar; color: black; }</pre>
 
@@ -1232,7 +1232,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td>{{gecko_minversion_inline("2.0")}} <code>-moz-win-borderless-glass</code></td>
    <td>
-    <div id="sampleWinBorderlessGlass" style="display: none;">
+    <div id="sampleWinBorderlessGlass" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-win-borderless-glass; color: black; }</pre>
 
@@ -1245,7 +1245,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-win-browsertabbar-toolbox</code></td>
    <td>
-    <div id="sampleWinBrowsertabbarToolbox" style="display: none;">
+    <div id="sampleWinBrowsertabbarToolbox" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre>
 
@@ -1258,7 +1258,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-win-communicationstext</code></td>
    <td>
-    <div id="sampleWinCommunicationstext" style="display: none;">
+    <div id="sampleWinCommunicationstext" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-win-communicationstext; color: black; }</pre>
 
@@ -1271,7 +1271,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-win-communications-toolbox</code></td>
    <td>
-    <div id="sampleWinCommunicationsToolbox" style="display: none;">
+    <div id="sampleWinCommunicationsToolbox" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-win-communications-toolbox; color: black; }</pre>
 
@@ -1284,7 +1284,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td>{{gecko_minversion_inline("6.0")}} <code>-moz-win-exclude-glass</code></td>
    <td>
-    <div id="sampleWinExcludeGlass" style="display: none;">
+    <div id="sampleWinExcludeGlass" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-win-exclude-glass; color: black; }</pre>
 
@@ -1297,7 +1297,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-win-glass</code></td>
    <td>
-    <div id="sampleWinGlass" style="display: none;">
+    <div id="sampleWinGlass" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-win-glass; color: black; }</pre>
 
@@ -1310,7 +1310,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-win-mediatext</code></td>
    <td>
-    <div id="sampleWinMediaText" style="display: none;">
+    <div id="sampleWinMediaText" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-win-mediatext; color: black; }</pre>
 
@@ -1323,7 +1323,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-win-media-toolbox</code></td>
    <td>
-    <div id="sampleWinMediaToolbox" style="display: none;">
+    <div id="sampleWinMediaToolbox" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-win-media-toolbox; color: black; }</pre>
 
@@ -1336,7 +1336,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-button-box</code></td>
    <td>
-    <div id="sampleWindowButtonBox" style="display: none;">
+    <div id="sampleWindowButtonBox" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-button-box; color: black; }</pre>
 
@@ -1349,7 +1349,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-button-box-maximized</code></td>
    <td>
-    <div id="sampleWindowButtonBoxMaximized" style="display: none;">
+    <div id="sampleWindowButtonBoxMaximized" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-button-box-maximized; color: black; }</pre>
 
@@ -1362,7 +1362,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-button-close</code></td>
    <td>
-    <div id="sampleWindowButtonClose" style="display: none;">
+    <div id="sampleWindowButtonClose" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-button-close; color: black; }</pre>
 
@@ -1375,7 +1375,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-button-maximize</code></td>
    <td>
-    <div id="sampleWindowButtonMaximize" style="display: none;">
+    <div id="sampleWindowButtonMaximize" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-button-maximize; color: black; }</pre>
 
@@ -1388,7 +1388,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-button-minimize</code></td>
    <td>
-    <div id="sampleWindowButtonMinimize" style="display: none;">
+    <div id="sampleWindowButtonMinimize" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-button-minimize; color: black; }</pre>
 
@@ -1401,7 +1401,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-button-restore</code></td>
    <td>
-    <div id="sampleWindowButtonRestore" style="display: none;">
+    <div id="sampleWindowButtonRestore" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-button-restore; color: black; }</pre>
 
@@ -1414,7 +1414,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-frame-bottom</code></td>
    <td>
-    <div id="sampleWindowFrameBottom" style="display: none;">
+    <div id="sampleWindowFrameBottom" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-frame-bottom; color: black; }</pre>
 
@@ -1427,7 +1427,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-frame-left</code></td>
    <td>
-    <div id="sampleWindowFrameLeft" style="display: none;">
+    <div id="sampleWindowFrameLeft" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-frame-left; color: black; }</pre>
 
@@ -1440,7 +1440,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-frame-right</code></td>
    <td>
-    <div id="sampleWindowFrameRight" style="display: none;">
+    <div id="sampleWindowFrameRight" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-frame-right; color: black; }</pre>
 
@@ -1453,7 +1453,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-titlebar</code></td>
    <td>
-    <div id="sampleWindowTitlebar" style="display: none;">
+    <div id="sampleWindowTitlebar" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-titlebar; color: black; }</pre>
 
@@ -1466,7 +1466,7 @@ translation_of: Web/CSS/appearance
   <tr>
    <td><code>-moz-window-titlebar-maximized</code></td>
    <td>
-    <div id="sampleWindowTitlebarMaximized" style="display: none;">
+    <div id="sampleWindowTitlebarMaximized" class="hidden">
     <pre class="brush:css">
  div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }</pre>
 
diff --git a/files/es/web/css/background-blend-mode/index.html b/files/es/web/css/background-blend-mode/index.html
index 808654f167..772665931b 100644
--- a/files/es/web/css/background-blend-mode/index.html
+++ b/files/es/web/css/background-blend-mode/index.html
@@ -39,7 +39,6 @@ background-blend-mode: unset;
 
 <h2 id="Examples" name="Examples">Ejemplos</h2>
 
-<pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;
 &lt;select id="select"&gt;
     &lt;option&gt;normal&lt;/option&gt;
     &lt;option&gt;multiply&lt;/option&gt;
@@ -59,14 +58,14 @@ background-blend-mode: unset;
     &lt;option&gt;luminosity&lt;/option&gt;
 &lt;/select&gt;</pre>
 
-<pre class="brush: css" style="display: none;">#div {
+<pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
     background-blend-mode: screen;
 }</pre>
 
-<pre class="brush: js" style="display: none;">document.getElementById("select").onchange = function(event) {
+<pre class="brush: js" class="hidden">document.getElementById("select").onchange = function(event) {
     document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
 }
 console.log(document.getElementById('div'));</pre>
diff --git a/files/es/web/css/blend-mode/index.html b/files/es/web/css/blend-mode/index.html
index e2a0e41f18..850630faa9 100644
--- a/files/es/web/css/blend-mode/index.html
+++ b/files/es/web/css/blend-mode/index.html
@@ -30,9 +30,8 @@ translation_of: Web/CSS/blend-mode
   El efecto es similar a dos trozos de papel sobrepuestos.</p>
 
  <div id="normal">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -50,9 +49,8 @@ translation_of: Web/CSS/blend-mode
   El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.</p>
 
  <div id="multiply">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -70,9 +68,8 @@ translation_of: Web/CSS/blend-mode
   El efecto es similar a dos imágenes mostrándose desde un proyector.</p>
 
  <div id="screen">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -87,9 +84,8 @@ translation_of: Web/CSS/blend-mode
  <dd>El color final es el resultado de <code>multiply</code> si el color inferior es más oscuro, o <code>screen</code> si el color inferior es más claro.<br>
  Este modo de mezcla es equivalente a <code>hard-light</code>, pero si las capas son intercambiadas.
  <div id="overlay">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -105,9 +101,8 @@ translation_of: Web/CSS/blend-mode
  <p>El resultado final es un color compuesto de los valores más oscuros por cada canal de color.</p>
 
  <div id="darken">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -123,9 +118,8 @@ translation_of: Web/CSS/blend-mode
  <p>El resultado final es un color compuesto de los valores más claros por cada canal de color.</p>
 
  <div id="lighten">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -143,9 +137,8 @@ translation_of: Web/CSS/blend-mode
   Este modo de mezcla es similar a <code>screen</code>, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.</p>
 
  <div id="color-dodge">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -163,9 +156,8 @@ translation_of: Web/CSS/blend-mode
   Este modo de mezcla es similar a <code>multiply</code>, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.</p>
 
  <div id="color-burn">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -183,9 +175,8 @@ translation_of: Web/CSS/blend-mode
   El efecto es similar a encender un foco con mucha <em>intensidad</em> en el fondo.</p>
 
  <div id="hard-light">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -203,9 +194,8 @@ translation_of: Web/CSS/blend-mode
   El efecto es similar a encender un foco <em>difuso</em> en el fondo<em><code>.</code></em></p>
 
  <div id="soft-light">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -222,9 +212,8 @@ translation_of: Web/CSS/blend-mode
   Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.</p>
 
  <div id="difference">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -241,9 +230,8 @@ translation_of: Web/CSS/blend-mode
   Así como con <code>difference</code>,  una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.</p>
 
  <div id="exclusion">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -259,9 +247,8 @@ translation_of: Web/CSS/blend-mode
  <p>El color final tiene el <em>matiz</em> del color superior, mientras usa la <em>saturación</em> y <em>luminosidad</em> del color inferior.</p>
 
  <div id="hue">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -278,9 +265,8 @@ translation_of: Web/CSS/blend-mode
   Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.</p>
 
  <div id="saturation">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -297,9 +283,8 @@ translation_of: Web/CSS/blend-mode
   El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.</p>
 
  <div id="color">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
@@ -316,9 +301,8 @@ translation_of: Web/CSS/blend-mode
   Este modo de mezcla es equivalente a <code>color</code>, pero con las capas intercambiadas.</p>
 
  <div id="luminosity">
- <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
- <pre class="brush: css" style="display: none;">#div {
+ <pre class="brush: css" class="hidden">#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),
diff --git a/files/es/web/css/border-bottom-left-radius/index.html b/files/es/web/css/border-bottom-left-radius/index.html
index 7290aa56c1..ec7a099916 100644
--- a/files/es/web/css/border-bottom-left-radius/index.html
+++ b/files/es/web/css/border-bottom-left-radius/index.html
@@ -73,7 +73,7 @@ border-bottom-left-radius: inherit;
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 40px; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>Un arco de círculo usado como borde
@@ -87,7 +87,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 20px; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>Un arco de elipse usado como borde
@@ -101,7 +101,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>La caja es un cuadro: un arco de círculo es usado como borde
@@ -115,7 +115,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 200px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>La caja no es un círculo: un arco de elipse es usado como borde
@@ -129,7 +129,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="border: black 3px double; border-bottom-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>El color de fondo está delimitado al borde
diff --git a/files/es/web/css/border-bottom-right-radius/index.html b/files/es/web/css/border-bottom-right-radius/index.html
index 1e95cfd6d7..5e9894934c 100644
--- a/files/es/web/css/border-bottom-right-radius/index.html
+++ b/files/es/web/css/border-bottom-right-radius/index.html
@@ -73,7 +73,7 @@ border-bottom-right-radius: inherit;
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>Un arco de círculo usado como borde
@@ -87,7 +87,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>Un arco de elipse usado como borde
@@ -101,7 +101,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>La caja es un cuadro: un arco de círculo es usado como borde
@@ -115,7 +115,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>La caja no es un círculo: un arco de elipse es usado como borde
@@ -129,7 +129,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>El color de fondo está delimitado al borde
diff --git a/files/es/web/css/border-top-right-radius/index.html b/files/es/web/css/border-top-right-radius/index.html
index ecb6f157b2..e29277d18f 100644
--- a/files/es/web/css/border-top-right-radius/index.html
+++ b/files/es/web/css/border-top-right-radius/index.html
@@ -109,7 +109,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 200px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>La caja no es un círculo: un arco de elipse es usado como borde
diff --git a/files/es/web/css/css_background_and_borders/border-image_generator/index.html b/files/es/web/css/css_background_and_borders/border-image_generator/index.html
index 7757dc9b29..17cb7b70bc 100644
--- a/files/es/web/css/css_background_and_borders/border-image_generator/index.html
+++ b/files/es/web/css/css_background_and_borders/border-image_generator/index.html
@@ -8,7 +8,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador
 ---
 <p>Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}</p>
-<div style="display: none;">
+<div class="hidden">
  <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
  <h3 id="HTML_Content">HTML Content</h3>
  <pre class="brush: html">    <div id="container">
diff --git a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html
index 5f2f982065..f445dff39b 100644
--- a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html
+++ b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -7,7 +7,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 ---
 <p>Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
 
 <h3 id="HTML_Content">HTML Content</h3>
diff --git a/files/es/web/css/css_colors/color_picker_tool/index.html b/files/es/web/css/css_colors/color_picker_tool/index.html
index d3758668dd..1ca3b91962 100644
--- a/files/es/web/css/css_colors/color_picker_tool/index.html
+++ b/files/es/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/CSS_Colors/Herramienta_para_seleccionar_color
 ---
-<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/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
index c91a910a51..648e9ba67a 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -119,7 +119,7 @@ original_slug: >-
  <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li>
  <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li>
  <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li>
- <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel<span id="cke_bm_89E" style="display: none;"> </span></li>
+ <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel<span id="cke_bm_89E" class="hidden"> </span></li>
 </ul>
 
 <div class="originaldocinfo">
diff --git a/files/es/web/css/filter/index.html b/files/es/web/css/filter/index.html
index 6ae8e8e2dd..bf9954f5cc 100644
--- a/files/es/web/css/filter/index.html
+++ b/files/es/web/css/filter/index.html
@@ -99,7 +99,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;
@@ -194,7 +194,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;
@@ -290,7 +290,7 @@ table.standard-table td {
 &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;
@@ -401,7 +401,7 @@ table.standard-table td {
 &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;
@@ -519,7 +519,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;
@@ -603,7 +603,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;
@@ -690,7 +690,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;
@@ -774,7 +774,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;
@@ -856,7 +856,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;
@@ -937,7 +937,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;
@@ -1021,7 +1021,7 @@ table.standard-table td {
 
 <pre class="brush: css">filter: contrast(175%) brightness(3%)</pre>
 
-<div id="combination_example" style="display: none;">
+<div id="combination_example" class="hidden">
 <pre class="brush: html">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
diff --git a/files/es/web/css/gradient/index.html b/files/es/web/css/gradient/index.html
index ca6d95e622..62b2364d7b 100644
--- a/files/es/web/css/gradient/index.html
+++ b/files/es/web/css/gradient/index.html
@@ -29,7 +29,7 @@ original_slug: Web/CSS/Gradiente
 <ul>
  <li id="linear-gradient"><em><strong>Linear gradients</strong>(gradiente lineal)</em>, generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria.
 
-  <pre class="brush: html" style="display: none;">A rainbow made from a gradient
+  <pre class="brush: html" class="hidden">A rainbow made from a gradient
 </pre>
 
   <pre class="brush: css">body {
@@ -43,7 +43,7 @@ background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,viole
   <p>{{ EmbedLiveSample('linear-gradient', 600, 20) }}</p>
  </li>
  <li id="radial-gradient"><em><strong>Radial gradient </strong>(gradientes radiales)</em>, generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será.
-  <pre class="brush: html" style="display: none;">Radial gradient
+  <pre class="brush: html" class="hidden">Radial gradient
   </pre>
 
   <pre class="brush: css">body {
@@ -55,7 +55,7 @@ background: radial-gradient(red, yellow, rgb(30, 144, 255));
   <p>{{ EmbedLiveSample('radial-gradient', 600, 20) }}</p>
  </li>
  <li id="repeating-gradient"><em><strong>Repeating gradient </strong>(gradientes de repetición), </em>donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja.
-  <pre class="brush: html" style="display: none;">Repeating gradient
+  <pre class="brush: html" class="hidden">Repeating gradient
 </pre>
 
   <pre class="brush: css">body {
diff --git a/files/es/web/css/text-decoration-style/index.html b/files/es/web/css/text-decoration-style/index.html
index d698913b8f..dcf687dc26 100644
--- a/files/es/web/css/text-decoration-style/index.html
+++ b/files/es/web/css/text-decoration-style/index.html
@@ -88,7 +88,7 @@ text-decoration-style: unset;
 
 <h2 id="Ejemplos">Ejemplos</h2>
 
-<pre class="brush: css" style="display: none;">.example {
+<pre class="brush: css" class="hidden">.example {
        -moz-text-decoration-line: underline;
        -moz-text-decoration-style: wavy;
        -moz-text-decoration-color: red;
diff --git a/files/es/web/css/tools/cubic_bezier_generator/index.html b/files/es/web/css/tools/cubic_bezier_generator/index.html
index 0cf0780356..dab5df8c51 100644
--- a/files/es/web/css/tools/cubic_bezier_generator/index.html
+++ b/files/es/web/css/tools/cubic_bezier_generator/index.html
@@ -5,7 +5,7 @@ translation_of: Web/CSS/Tools/Cubic_Bezier_Generator
 original_slug: Web/CSS/Herramientas/Cubic_Bezier_Generator
 ---
 <div id="Tool">
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html">&lt;html&gt;
     &lt;canvas id="bezier" width="336" height="336"&gt;
     &lt;/canvas&gt;
diff --git a/files/es/web/css/transition-delay/index.html b/files/es/web/css/transition-delay/index.html
index b3c85d103f..9cb0e703b7 100644
--- a/files/es/web/css/transition-delay/index.html
+++ b/files/es/web/css/transition-delay/index.html
@@ -41,7 +41,7 @@ transition-delay: initial
 <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;
@@ -108,7 +108,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;
@@ -175,7 +175,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;
@@ -242,7 +242,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/es/web/css/transition-duration/index.html b/files/es/web/css/transition-duration/index.html
index 03f74d31d8..c00efcbd79 100644
--- a/files/es/web/css/transition-duration/index.html
+++ b/files/es/web/css/transition-duration/index.html
@@ -44,7 +44,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;
@@ -109,7 +109,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;
@@ -174,7 +174,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;
@@ -239,7 +239,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/es/web/html/element/input/number/index.html b/files/es/web/html/element/input/number/index.html
index 7f0b4166e8..c18d7a97f9 100644
--- a/files/es/web/html/element/input/number/index.html
+++ b/files/es/web/html/element/input/number/index.html
@@ -315,7 +315,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;Enter your height — &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;
@@ -334,7 +333,7 @@ input:valid+span:after {
 
 <p>Verás que estamos usando muchos de los atributos que ya hemos visto antes en el artículo. Como queremos que acepte un valor de medida en centímetros, hemos colocado el valor de <code>step</code> a <code>0.01</code>, de manera que valores como <em>1.78</em> no sean vistos como inválidos. También hemos provisto una marca de lugar (placeholder) para esa entrada.</p>
 
-<p>Hemos escondido las entradas de pies y pulgadas inicialmente usando <code>style="display: none;"</code>, de manera que metros sea el tipo de entrada preseleccionado.</p>
+<p>Hemos escondido las entradas de pies y pulgadas inicialmente usando <code>class="hidden"</code>, de manera que metros sea el tipo de entrada preseleccionado.</p>
 
 <p>Ahora, al CSS. Este se ve muy similar al estilo de validación que vimos antes; nada extraordinario aquí.</p>
 
diff --git a/files/es/web/http/cors/errors/corsdidnotsucceed/index.html b/files/es/web/http/cors/errors/corsdidnotsucceed/index.html
index 78038c007b..4b3d1497dc 100644
--- a/files/es/web/http/cors/errors/corsdidnotsucceed/index.html
+++ b/files/es/web/http/cors/errors/corsdidnotsucceed/index.html
@@ -30,10 +30,10 @@ translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed
 <p>Otras causas posibles:</p>
 
 <ul>
- <li><span style="display: none;"> </span>Intentar acceder a un recurso <code>https</code> que tenga un certificado no válido, causará este error.</li>
+ <li><span class="hidden"> </span>Intentar acceder a un recurso <code>https</code> que tenga un certificado no válido, causará este error.</li>
  <li>Intentar acceder a un recurso <code>http</code> desde una página con un origen <code>https</code> también causará este error.</li>
  <li>A partir de Firefox 68, las páginas <code>https</code> no pueden acceder a <code>http://localhost</code>, aunque esto puede ser modificado por el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488740">Error 1488740</a>.</li>
- <li>El servidor no respondió a la solicitud actual (incluso si respondió la <a href="/es/docs/Glossary/Preflight_peticion">solicitud Preflight</a>. Un escenario podría ser un servicio HTTP en desarrollo que "entró en pánico" sin devolver ningún dato.<span style="display: none;"> </span></li>
+ <li>El servidor no respondió a la solicitud actual (incluso si respondió la <a href="/es/docs/Glossary/Preflight_peticion">solicitud Preflight</a>. Un escenario podría ser un servicio HTTP en desarrollo que "entró en pánico" sin devolver ningún dato.<span class="hidden"> </span></li>
 </ul>
 
 <dl>
diff --git a/files/es/web/http/headers/accept/index.html b/files/es/web/http/headers/accept/index.html
index 7311f2498f..7d6338aa6a 100644
--- a/files/es/web/http/headers/accept/index.html
+++ b/files/es/web/http/headers/accept/index.html
@@ -51,7 +51,7 @@ Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8</pre>
  <ul>
   <li>image/png</li>
   <li>image/svg</li>
-  <li>image/gif<span style="display: none;"> </span></li>
+  <li>image/gif<span class="hidden"> </span></li>
  </ul>
  </dd>
  <dt><code>*/*</code></dt>
diff --git a/files/es/web/http/status/index.html b/files/es/web/http/status/index.html
index 1db976d0af..5ddb7b628b 100644
--- a/files/es/web/http/status/index.html
+++ b/files/es/web/http/status/index.html
@@ -38,10 +38,10 @@ translation_of: Web/HTTP/Status
 <h2 id="Respuestas_satisfactorias">Respuestas satisfactorias</h2>
 
 <ul>
- <li><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>GET</code>: El recurso se ha obtenido y se transmite en el cuerpo del mensaje.</li>
+ <li><code><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span>GET</code>: El recurso se ha obtenido y se transmite en el cuerpo del mensaje.</li>
  <li><code>HEAD</code>: Los encabezados de entidad están en el cuerpo del mensaje.</li>
  <li><code>PUT</code> o <code>POST</code>: El recurso que describe el resultado de la acción se transmite en el cuerpo del mensaje.</li>
- <li><code>TRACE</code>: El cuerpo del mensaje contiene el mensaje de solicitud recibido por el servidor.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+ <li><code>TRACE</code>: El cuerpo del mensaje contiene el mensaje de solicitud recibido por el servidor.<span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></li>
 </ul>
 
 <dl>
diff --git a/files/es/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html b/files/es/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html
index 3539c66acf..cbc7d29662 100644
--- a/files/es/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html
+++ b/files/es/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html
@@ -47,7 +47,7 @@ original_slug: Web/JavaScript/Guide/Regular_Expressions/Escapes_de_propiedades_U
  <li><a href="https://unicode.org/reports/tr24/#Script_Extensions">Extensiones de script</a> (<code>scx</code> por «<em><strong>sc</strong>ript e<strong>x</strong>tensions</em>»)</li>
 </ul>
 
-<p>Consulta también <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt">PropertyValueAliases.txt<span style="display: none;"> </span></a></p>
+<p>Consulta también <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt">PropertyValueAliases.txt<span class="hidden"> </span></a></p>
 
 <dl>
  <dt>UnicodeBinaryPropertyName</dt>
diff --git a/files/es/web/javascript/reference/global_objects/math/cos/index.html b/files/es/web/javascript/reference/global_objects/math/cos/index.html
index 1ed9a36f2d..8ff7512cdb 100644
--- a/files/es/web/javascript/reference/global_objects/math/cos/index.html
+++ b/files/es/web/javascript/reference/global_objects/math/cos/index.html
@@ -6,7 +6,7 @@ original_slug: Web/JavaScript/Referencia/Objetos_globales/Math/cos
 ---
 <div>{{JSRef}}</div>
 
-<p><span class="seoSummary">La función estática <strong><code>Math.cos()</code></strong> devuelve el <a href="https://es.wikipedia.org/wiki/Coseno">coseno</a> del ángulo especificado, que debe ser especificado en <a href="https://es.wikipedia.org/wiki/Radi%C3%A1n" title="radians">radianes</a>. Este valor es </span><math style="display: inline;"> <mstyle displaystyle="true"> <mfrac> <msub> <mrow> <mtext>longitud</mtext> </mrow> <mrow> <mrow> <mtext>adyacente</mtext> </mrow> </mrow> </msub> <msub> <mrow> <mtext>longitud</mtext> </mrow> <mrow> <mrow> <mtext>hipotenusa</mtext> </mrow> </mrow> </msub> </mfrac> </mstyle> </math>.<span style="display: none;"> </span></p>
+<p><span class="seoSummary">La función estática <strong><code>Math.cos()</code></strong> devuelve el <a href="https://es.wikipedia.org/wiki/Coseno">coseno</a> del ángulo especificado, que debe ser especificado en <a href="https://es.wikipedia.org/wiki/Radi%C3%A1n" title="radians">radianes</a>. Este valor es </span><math style="display: inline;"> <mstyle displaystyle="true"> <mfrac> <msub> <mrow> <mtext>longitud</mtext> </mrow> <mrow> <mrow> <mtext>adyacente</mtext> </mrow> </mrow> </msub> <msub> <mrow> <mtext>longitud</mtext> </mrow> <mrow> <mrow> <mtext>hipotenusa</mtext> </mrow> </mrow> </msub> </mfrac> </mstyle> </math>.<span class="hidden"> </span></p>
 
 <div>{{EmbedInteractiveExample("pages/js/math-cos.html")}}</div>
 
diff --git a/files/es/web/media/formats/index.html b/files/es/web/media/formats/index.html
index 9d4f181ae7..b11ddc3580 100644
--- a/files/es/web/media/formats/index.html
+++ b/files/es/web/media/formats/index.html
@@ -32,7 +32,7 @@ translation_of: Web/Media/Formats
 <h3 id="Images">Images</h3>
 
 <dl>
- <dt><span style="display: none;"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt>
+ <dt><span class="hidden"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt>
  <dd>Covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd>
  <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt>
  <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd>
diff --git a/files/es/web/tutorials/index.html b/files/es/web/tutorials/index.html
index fac9d9bf3e..dff8adfeab 100644
--- a/files/es/web/tutorials/index.html
+++ b/files/es/web/tutorials/index.html
@@ -198,7 +198,7 @@ original_slug: Web/Tutoriales
     <h3 id="Desarrollo_de_extensiones">Desarrollo de extensiones</h3>
    </td>
    <td>
-    <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><strong><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">Extensiones web</a></strong><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></p>
+    <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><strong><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">Extensiones web</a></strong><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></p>
 
     <p>Extensiones Web es un sistema de navegación cruzada para desarrollar complementos del buscador. El sistema es en gran medida compatible con la <a href="https://developer.chrome.com/extensions">API (Interfaz de Programación de Aplicaciones) </a>respaldada por Google Chrome y Opera. En la mayoría de los casos, las extensiones escritas para estos buscadores pueden funcionar en Firefox o Microsoft Edge con <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">solo algunos cambios</a>. La API es compatible también con el <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocesador de Firefox</a>.</p>
    </td>
diff --git a/files/es/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/es/web/xpath/introduction_to_using_xpath_in_javascript/index.html
index 9cec6c1847..4a3fceb37c 100644
--- a/files/es/web/xpath/introduction_to_using_xpath_in_javascript/index.html
+++ b/files/es/web/xpath/introduction_to_using_xpath_in_javascript/index.html
@@ -115,7 +115,7 @@ alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elem
  <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li>
 </ul>
 
-<p>El objeto <code>XPathResult</code> regresado es un conjunto de nodos de los nodos coincidentes los cuales se comportarán como un iterador, perimitiendo el acceso individual a los nodos mediante el uso de método <span id="cke_bm_118S" style="display: none;"> </span><code>iterateNext()</code><span id="cke_bm_118E" style="display: none;"> </span> del <code>XPathResult</code><span id="cke_bm_119E" style="display: none;"> </span>.</p>
+<p>El objeto <code>XPathResult</code> regresado es un conjunto de nodos de los nodos coincidentes los cuales se comportarán como un iterador, perimitiendo el acceso individual a los nodos mediante el uso de método <span id="cke_bm_118S" class="hidden"> </span><code>iterateNext()</code><span id="cke_bm_118E" class="hidden"> </span> del <code>XPathResult</code><span id="cke_bm_119E" class="hidden"> </span>.</p>
 
 <p>Una vez que hemos iterado sobre todos los nodos individuales coincidentes,<code> iterateNext()</code> regresará <code>null</code>.</p>
 
-- 
cgit v1.2.3-54-g00ecf