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"

---
 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 +-
 16 files changed, 167 insertions(+), 184 deletions(-)

(limited to 'files/es/web/css')

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;
-- 
cgit v1.2.3-54-g00ecf