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"

---
 .../learn/css/building_blocks/selectors/index.html |   2 +-
 .../index.html                                     |   2 +-
 files/es/conflicting/web/api/push_api/index.html   |   2 +-
 files/es/glossary/google_chrome/index.html         |   6 +-
 .../what_is_a_domain_name/index.html               |   2 +-
 .../css/styling_text/styling_lists/index.html      |   2 +-
 files/es/learn/html/howto/index.html               |   2 +-
 .../responsive_images/index.html                   |   2 +-
 files/es/orphaned/storage/index.html               |   2 +-
 .../how_to/work_with_animations/index.html         |   2 +-
 .../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 +-
 43 files changed, 203 insertions(+), 223 deletions(-)

(limited to 'files/es')

diff --git a/files/es/conflicting/learn/css/building_blocks/selectors/index.html b/files/es/conflicting/learn/css/building_blocks/selectors/index.html
index c15b94b415..0bbf89b28d 100644
--- a/files/es/conflicting/learn/css/building_blocks/selectors/index.html
+++ b/files/es/conflicting/learn/css/building_blocks/selectors/index.html
@@ -360,7 +360,7 @@ a.homepage:hover, a.homepage:focus, a.homepage:active {
   <table style="border: 2px outset #36b; padding: 1em;">
    <tbody>
     <tr>
-     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span class="hidden"> </span><span class="hidden"> </span></td>
     </tr>
    </tbody>
   </table>
diff --git a/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html b/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html
index bdedd4aff0..71308c4e77 100644
--- a/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html
+++ b/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html
@@ -38,7 +38,7 @@ original_slug: MDN/Kuma/Contributing
  </div>
  <div class="section">
   <h2 class="Community" id="Community" name="Community">MDN comunidad de desarrolladores</h2>
-  <p><span style="display: none;"> </span>Si desea hablar con nuestros desarrolladores, o incluso mejor, para ayudar a construir y mejorar la plataforma de Kuma, !únase a nuestra comunidad de desarrolladores!</p>
+  <p><span class="hidden"> </span>Si desea hablar con nuestros desarrolladores, o incluso mejor, para ayudar a construir y mejorar la plataforma de Kuma, !únase a nuestra comunidad de desarrolladores!</p>
   <ul>
    <li>Únase a la conversación en el IRC: <a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">#mdndev</a></li>
    <li>Lea el foro de desarrolladores MDN: {{DiscussionList("dev-mdn", "mozilla.dev.mdn")}}</li>
diff --git a/files/es/conflicting/web/api/push_api/index.html b/files/es/conflicting/web/api/push_api/index.html
index 016e0abcaa..ea87d50427 100644
--- a/files/es/conflicting/web/api/push_api/index.html
+++ b/files/es/conflicting/web/api/push_api/index.html
@@ -74,7 +74,7 @@ original_slug: Web/API/Push_API/Using_the_Push_API
  <li>Over in your service worker, set up a <code>push</code> event handler to respond to push messages being received.
   <ol>
    <li>If you want to respond by sending a channel message back to the main context (see Step 6) you need to first get a reference to the <code>port2</code> we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the <code>onmessage</code> handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the <code>ports</code> property, index 0. Once this is done, you can send a message back to <code>port1</code>, using {{domxref("MessagePort.postMessage()")}}.</li>
-   <li>If you want to respond by firing a system notification, you can do this by calling {{domxref("ServiceWorkerRegistration.showNotification()")}}. Note that in our code we have run this inside an {{domxref("ExtendableEvent.waitUntil()")}} method — this extends the lifetime of the event until after the notification has been fired, so we can make sure everything has happened that we want to happen.<span id="cke_bm_307E" style="display: none;"> </span></li>
+   <li>If you want to respond by firing a system notification, you can do this by calling {{domxref("ServiceWorkerRegistration.showNotification()")}}. Note that in our code we have run this inside an {{domxref("ExtendableEvent.waitUntil()")}} method — this extends the lifetime of the event until after the notification has been fired, so we can make sure everything has happened that we want to happen.<span id="cke_bm_307E" class="hidden"> </span></li>
   </ol>
  </li>
 </ol>
diff --git a/files/es/glossary/google_chrome/index.html b/files/es/glossary/google_chrome/index.html
index 4e13558570..61ad20de77 100644
--- a/files/es/glossary/google_chrome/index.html
+++ b/files/es/glossary/google_chrome/index.html
@@ -49,9 +49,9 @@ translation_of: Glossary/Google_Chrome
 <div id="SL_balloon_obj" style="display: block;">
 <div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; display: none; opacity: 1;"> </div>
 
-<div id="SL_shadow_translation_result2" style="display: none;"> </div>
+<div id="SL_shadow_translation_result2" class="hidden"> </div>
 
-<div id="SL_shadow_translator" style="display: none;">
+<div id="SL_shadow_translator" class="hidden">
 <div id="SL_planshet">
 <div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
 
@@ -63,7 +63,7 @@ translation_of: Glossary/Google_Chrome
 <div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
 </div>
 
-<div id="SL_alert_bbl" style="display: none;">
+<div id="SL_alert_bbl" class="hidden">
 <div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
 
 <div id="SL_alert_cont"> </div>
diff --git a/files/es/learn/common_questions/what_is_a_domain_name/index.html b/files/es/learn/common_questions/what_is_a_domain_name/index.html
index bc38251b25..ef602dfbab 100644
--- a/files/es/learn/common_questions/what_is_a_domain_name/index.html
+++ b/files/es/learn/common_questions/what_is_a_domain_name/index.html
@@ -42,7 +42,7 @@ translation_of: Learn/Common_questions/What_is_a_domain_name
 <p>Cada una de estas partes provee información específica sobre el nombre de dominio completo.</p>
 
 <ul>
- <li>TLDs l<span style="display: none;"> </span>ocales como <code>.us</code>, <code>.fr</code>, o <code>.se</code> pueden requerir el servicio en un determinado idioma o  que esté alojado en un país específico - estan hecho para indicar que un recurso está en un idioma o país en particular.</li>
+ <li>TLDs l<span class="hidden"> </span>ocales como <code>.us</code>, <code>.fr</code>, o <code>.se</code> pueden requerir el servicio en un determinado idioma o  que esté alojado en un país específico - estan hecho para indicar que un recurso está en un idioma o país en particular.</li>
  <li>Los TLDs que contienen <code>.gov</code> son solamente permitidos para ser usados por los departamentos de gobierno.</li>
  <li>Los TLDs como <code>.edu</code> y <code>.ac</code> <code>.uk</code> se supone que se usen solamente en instituciones educacionales o académicas.</li>
 </ul>
diff --git a/files/es/learn/css/styling_text/styling_lists/index.html b/files/es/learn/css/styling_text/styling_lists/index.html
index eeb395313b..80f3b3be01 100644
--- a/files/es/learn/css/styling_text/styling_lists/index.html
+++ b/files/es/learn/css/styling_text/styling_lists/index.html
@@ -122,7 +122,7 @@ dd {
  <li>La primera regla establece un tipo de letra para todo el sitio y un tamaño de letra base de 10px. Estos valores se heredan para toda la página.</li>
  <li>Las reglas 2 y 3 establecen tamaños de letra relativos para los títulos, diferentes tipos de listas (que heredan los hijos de los elementos de listas), y párrafos. Esto significa que todos los párrafos y todas las listas tendrán el mismo tamaño de letra y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante.</li>
  <li>La regla 4 establece el mismo interlineado ({{cssxref("line-height")}}) en los párrafos y los elementos de las listas, de modo que todos los párrafos y todos los elementos individuales de las listas tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical consistente.</li>
- <li>Las reglas 5 y 6 se aplican a las listas de descripciones; establecemos la misma altura de interlineado (<code>line-height</code>) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De nuevo, ¡la coherencia es buena! También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente.<span id="cke_bm_126E" style="display: none;"> </span></li>
+ <li>Las reglas 5 y 6 se aplican a las listas de descripciones; establecemos la misma altura de interlineado (<code>line-height</code>) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De nuevo, ¡la coherencia es buena! También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente.<span id="cke_bm_126E" class="hidden"> </span></li>
 </ul>
 
 <h2 id="Estilos_específicos_de_las_listas">Estilos específicos de las listas</h2>
diff --git a/files/es/learn/html/howto/index.html b/files/es/learn/html/howto/index.html
index 4717432b11..24ec51663c 100644
--- a/files/es/learn/html/howto/index.html
+++ b/files/es/learn/html/howto/index.html
@@ -139,4 +139,4 @@ original_slug: Learn/HTML/como
 </div>
 </div>
 
-<p><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> </p>
diff --git a/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html
index daa97085e9..ef66e0fd14 100644
--- a/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html
+++ b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -20,7 +20,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
    <td>Deberías tener un conocimiento <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">básico de HTML</a> y cómo <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">agregar imágenes estáticas a un sitio web</a>.</td>
   </tr>
   <tr>
-   <th scope="row"><span style="display: none;"> </span>Objetivo:<span style="display: none;"> </span></th>
+   <th scope="row"><span class="hidden"> </span>Objetivo:<span class="hidden"> </span></th>
    <td>Aprende a usar características como {{htmlattrxref("srcset", "img")}} y el elemento {{htmlelement("picture")}} para implementar soluciones de imágenes adaptables a sitios web.</td>
   </tr>
  </tbody>
diff --git a/files/es/orphaned/storage/index.html b/files/es/orphaned/storage/index.html
index 9763850868..8921560a24 100644
--- a/files/es/orphaned/storage/index.html
+++ b/files/es/orphaned/storage/index.html
@@ -247,7 +247,7 @@ if (ourTransaction)
 <h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
 <ul> <li><a href="/es/mozIStorageConnection" title="es/mozIStorageConnection">mozIStorageConnection</a> Conexión de la base de datos a un archivo específico o almacenamiento en memoria.</li> <li><a href="/es/MozIStorageStatement" title="es/MozIStorageStatement">mozIStorageStatement</a> Crea y ejecuta sentencias SQL en bases de datos SQLite.</li> <li><a href="/es/MozIStorageValueArray" title="es/MozIStorageValueArray">mozIStorageValueArray</a> Agrupa una matriz de valores SQL, como una fila resultante.</li> <li><a href="/es/MozIStorageFunction" title="es/MozIStorageFunction">mozIStorageFunction</a> Crea una nueva función SQLite.</li> <li><a href="/es/MozIStorageAggregateFunction" title="es/MozIStorageAggregateFunction">mozIStorageAggregateFunction</a> Crea una nueva función agregada SQLite.</li> <li><a href="/es/MozIStorageProgressHandler" title="es/MozIStorageProgressHandler">mozIStorageProgressHandler</a> Vigilar progresos durante la ejecución de una sentencia.</li> <li><a href="/es/MozIStorageStatementWrapper" title="es/MozIStorageStatementWrapper">mozIStorageStatementWrapper</a> Agrupador de la sentencia Storage.</li> <li><a href="/es/MozIStorageService" title="es/MozIStorageService">mozIStorageService</a> Servicio Storage.</li>
 </ul>
-<ul> <li><a href="/es/Storage/Performance" title="es/Storage/Performance">Storage:Rendimiento</a> Cómo hacer que tu conexión de base de datos rinda bien.</li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3072">Storage Inspector Extension</a><span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span><span class="short_text" id="result_box"><span title=""><br> </span></span></span> <span class="short_text" id="result_box"><span title="">Hace que sea fácil de ver los archivos de base de datos SQLite en el perfil actual.</span></span></li> <li><a class="external" href="http://www.sqlite.org/lang.html">SQLite Syntax</a> Query <span class="short_text" id="result_box"><span style="" title="">lengua que comprenda </span></span>SQLite</li> <li><a class="external" href="http://sqlitebrowser.sourceforge.net/">SQLite Database Browser</a><span class="medium_text" id="result_box"><span title="">es una herramienta capaz libre disponible para muchas plataformas. </span><span title="">Puede ser útil para examinar las bases de datos existentes y las pruebas sentencias SQL.</span></span> <span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager Extension</a><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="">ayuda a administrar los archivos de base de datos SQLite en el equipo.</span></span> <span class="goog-zippy-collapsed" id="romanspan" style="display: none;"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span> <div class="almost_half_cell" style=""> <div dir="ltr" style=""><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title=""><br> </span></span></div> </div> </li>
+<ul> <li><a href="/es/Storage/Performance" title="es/Storage/Performance">Storage:Rendimiento</a> Cómo hacer que tu conexión de base de datos rinda bien.</li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3072">Storage Inspector Extension</a><span class="goog-zippy-collapsed" id="romanspan" class="hidden"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span><span class="short_text" id="result_box"><span title=""><br> </span></span></span> <span class="short_text" id="result_box"><span title="">Hace que sea fácil de ver los archivos de base de datos SQLite en el perfil actual.</span></span></li> <li><a class="external" href="http://www.sqlite.org/lang.html">SQLite Syntax</a> Query <span class="short_text" id="result_box"><span style="" title="">lengua que comprenda </span></span>SQLite</li> <li><a class="external" href="http://sqlitebrowser.sourceforge.net/">SQLite Database Browser</a><span class="medium_text" id="result_box"><span title="">es una herramienta capaz libre disponible para muchas plataformas. </span><span title="">Puede ser útil para examinar las bases de datos existentes y las pruebas sentencias SQL.</span></span> <span class="goog-zippy-collapsed" id="romanspan" class="hidden"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager Extension</a><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="">ayuda a administrar los archivos de base de datos SQLite en el equipo.</span></span> <span class="goog-zippy-collapsed" id="romanspan" class="hidden"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span> <div class="almost_half_cell" style=""> <div dir="ltr" style=""><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title=""><br> </span></span></div> </div> </li>
 </ul>
 <p> </p>
 <p>{{ languages( { "es": "es/Almacenamiento", "fr": "fr/Storage", "ja": "ja/Storage", "pl": "pl/Storage", "en": "en/Storage" } ) }}</p>
diff --git a/files/es/tools/page_inspector/how_to/work_with_animations/index.html b/files/es/tools/page_inspector/how_to/work_with_animations/index.html
index 2ad2d5afa1..2d855f1785 100644
--- a/files/es/tools/page_inspector/how_to/work_with_animations/index.html
+++ b/files/es/tools/page_inspector/how_to/work_with_animations/index.html
@@ -70,7 +70,7 @@ translation_of: Tools/Page_Inspector/How_to/Work_with_animations
  <li>Each element had two properties animated:
   <ul>
    <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> for the channel name</li>
-   <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> for the icon.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+   <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> for the icon.<span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></li>
   </ul>
  </li>
  <li>The <code>filter</code> property had a delay of 0.25 seconds applied to it.</li>
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