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

1 files changed, 16 insertions, 32 deletions

diff --git a/files/ru/web/css/blend-mode/index.html b/files/ru/web/css/blend-mode/index.html
index 382af5dae0..40125081d4 100644
--- a/files/ru/web/css/blend-mode/index.html
+++ b/files/ru/web/css/blend-mode/index.html
@@ -24,9 +24,8 @@ translation_of: Web/CSS/blend-mode
   The effect is similar to two opaque pieces of paper overlapping.</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'),
@@ -44,9 +43,8 @@ translation_of: Web/CSS/blend-mode
   The effect is similar to two images printed on transparent film overlapping.</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'),
@@ -64,9 +62,8 @@ translation_of: Web/CSS/blend-mode
   The effect is similar to two images shone onto a projection screen.</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'),
@@ -81,9 +78,8 @@ translation_of: Web/CSS/blend-mode
  <dd>The final color is the result of <code>multiply</code> if the bottom color is darker, or <code>screen</code> if the bottom color is lighter.<br>
  This blend mode is equivalent to <code>hard-light</code> but with the layers swapped.
  <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'),
@@ -99,9 +95,8 @@ translation_of: Web/CSS/blend-mode
  <p>The final color is a color composed of the darkest values per color channel.</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'),
@@ -117,9 +112,8 @@ translation_of: Web/CSS/blend-mode
  <p>The final color is a color composed of the lightest values per color channel.</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'),
@@ -137,9 +131,8 @@ translation_of: Web/CSS/blend-mode
   This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to reach a fully lit color.</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'),
@@ -157,9 +150,8 @@ translation_of: Web/CSS/blend-mode
   This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.</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'),
@@ -177,9 +169,8 @@ translation_of: Web/CSS/blend-mode
   The effect is similar to shining a <em>harsh</em> spotlight on the backdrop.</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'),
@@ -197,9 +188,8 @@ translation_of: Web/CSS/blend-mode
   The effect is similar to shining a <em>diffused</em> spotlight on the backdrop<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'),
@@ -216,9 +206,8 @@ translation_of: Web/CSS/blend-mode
   A black layer has no effect, while a white layer inverts the other layer's color.</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'),
@@ -235,9 +224,8 @@ translation_of: Web/CSS/blend-mode
   As with <code>difference</code>,  a black layer has no effect, while a white layer inverts the other layer's color.</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'),
@@ -253,9 +241,8 @@ translation_of: Web/CSS/blend-mode
  <p>The final color has the <em>hue</em> of the top color, while using the <em>saturation</em> and <em>luminosity</em> of the bottom color.</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'),
@@ -272,9 +259,8 @@ translation_of: Web/CSS/blend-mode
   A pure gray backdrop, having no saturation, will have no effect.</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'),
@@ -291,9 +277,8 @@ translation_of: Web/CSS/blend-mode
   The effect preserves gray levels and can be used to colorize the foreground.</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'),
@@ -310,9 +295,8 @@ translation_of: Web/CSS/blend-mode
   This blend mode is equivalent to color, but with the layers swapped.</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'),