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/ru/web/api/audiobuffer/index.html            |  4 +-
 .../api/canvasrenderingcontext2d/arc/index.html    |  4 +-
 .../canvasrenderingcontext2d/beginpath/index.html  |  2 +-
 .../beziercurveto/index.html                       |  2 +-
 .../canvasrenderingcontext2d/clearrect/index.html  |  2 +-
 .../canvasrenderingcontext2d/drawimage/index.html  |  4 +-
 .../api/canvasrenderingcontext2d/fill/index.html   |  2 +-
 .../canvasrenderingcontext2d/fillrect/index.html   |  2 +-
 .../canvasrenderingcontext2d/filltext/index.html   |  2 +-
 .../canvasrenderingcontext2d/linejoin/index.html   |  2 +-
 .../api/canvasrenderingcontext2d/moveto/index.html |  2 +-
 .../api/canvasrenderingcontext2d/rect/index.html   |  2 +-
 .../api/canvasrenderingcontext2d/rotate/index.html |  2 +-
 .../api/canvasrenderingcontext2d/stroke/index.html |  2 +-
 .../canvasrenderingcontext2d/strokerect/index.html |  2 +-
 .../canvasrenderingcontext2d/stroketext/index.html |  2 +-
 files/ru/web/api/event/event/index.html            |  2 +-
 files/ru/web/api/htmltableelement/index.html       |  2 +-
 files/ru/web/css/background-blend-mode/index.html  |  5 +--
 files/ru/web/css/blend-mode/index.html             | 48 ++++++++--------------
 .../border-image_generator/index.html              |  2 +-
 .../border-radius_generator/index.html             |  2 +-
 .../box-shadow_generator/index.html                |  2 +-
 .../css/css_colors/color_picker_tool/index.html    |  2 +-
 .../stacking_without_z-index/index.html            |  2 +-
 .../using_css_transitions/index.html               | 24 +++++------
 files/ru/web/css/filter/index.html                 | 22 +++++-----
 files/ru/web/css/transition-duration/index.html    |  8 ++--
 .../web/css/using_css_custom_properties/index.html |  2 +-
 .../index.html                                     |  6 +--
 files/ru/web/html/element/a/index.html             |  6 +--
 files/ru/web/html/element/input/number/index.html  |  3 +-
 files/ru/web/http/index.html                       |  2 +-
 .../reference/errors/stmt_after_return/index.html  |  2 +-
 .../reference/global_objects/promise/index.html    |  6 +--
 files/ru/web/mathml/element/math/index.html        |  2 +-
 files/ru/web/media/formats/index.html              |  2 +-
 .../index.html                                     |  2 +-
 38 files changed, 86 insertions(+), 106 deletions(-)

(limited to 'files/ru/web')

diff --git a/files/ru/web/api/audiobuffer/index.html b/files/ru/web/api/audiobuffer/index.html
index 3cd5485a68..b2972a1f78 100644
--- a/files/ru/web/api/audiobuffer/index.html
+++ b/files/ru/web/api/audiobuffer/index.html
@@ -17,9 +17,9 @@ translation_of: Web/API/AudioBuffer
 
 <dl>
  <dt>{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}</dt>
- <dd><span style="display: none;"> </span>Создает и возвращает новый объект <code>AudioBuffer</code>.</dd>
+ <dd><span class="hidden"> </span>Создает и возвращает новый объект <code>AudioBuffer</code>.</dd>
  <dt>
- <h2 id="Свойства"><span style="display: none;"> </span>Свойства</h2>
+ <h2 id="Свойства"><span class="hidden"> </span>Свойства</h2>
  </dt>
  <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt>
  <dd>Возвращает число с плавающей точкой - частоту дискретизации (sample rate), хранящих в буфере данных ИКМ в звуковых фрагментах (samples) в секунду.</dd>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/arc/index.html b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html
index b6ab5c6600..80de2069c2 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/arc/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html
@@ -60,7 +60,7 @@ ctx.stroke();
 
 <p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени (убедитесь, что вы используете браузер, поддерживающий данное свойство - смотрите таблицу совместимости):</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;
@@ -106,7 +106,7 @@ window.addEventListener("load", drawCanvas);
 
 <p>В этом примере нарисованные разные формы чтобы показать возможности метода <code>arc()</code>.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="HTML_2">HTML</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
diff --git a/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html
index 2f6aa4c3e1..5b39c692a1 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -45,7 +45,7 @@ ctx.stroke();
 
 <p>Отредактируйте код ниже чтобы увидеть изменения в 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/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html
index 209c19e523..635c849882 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html
@@ -76,7 +76,7 @@ ctx.fillRect(150, 70, 10, 10);</pre>
 
 <p>Вы можете редактировать код, представленный ниже, и внесенные вами изменения отобразятся на холсте в режиме реального времени:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
 &lt;div class="playable-buttons"&gt;
   &lt;input id="edit" type="button" value="Edit" /&gt;
diff --git a/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html
index 33e198ddec..70352dbe22 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -62,7 +62,7 @@ ctx.clearRect(10, 10, 100, 100);
 
 <p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</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/ru/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
index 881eb779d2..8a510de988 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
+++ b/files/ru/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>Отредактируйте код ниже и посмотрите, как ваши изменения отражаются на холсте:</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/ru/web/api/canvasrenderingcontext2d/fill/index.html b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html
index 25cc791848..d7ec3573d8 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/fill/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html
@@ -56,7 +56,7 @@ ctx.fill();
 
 <p>Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:</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/ru/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html
index 54a27df26c..806e126c78 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -55,7 +55,7 @@ ctx.fillRect(10, 10, 100, 100);
 
 <p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</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/ru/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
index 8a56e89043..112e89985f 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
@@ -52,7 +52,7 @@ ctx.fillText("Hello world", 50, 100);
 
 <p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
index afdeff96d3..4f42131284 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
@@ -130,7 +130,7 @@ for (let i = 0; i &lt; lineJoin.length; i++) {
 
 <ul>
  <li>
-  <p>В<span id="cke_bm_84C" style="display: none;"> </span> браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setLineJoin()</code>.</p>
+  <p>В<span id="cke_bm_84C" class="hidden"> </span> браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setLineJoin()</code>.</p>
  </li>
 </ul>
 
diff --git a/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html
index e0ea2d18b0..7e2e0231e4 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html
@@ -51,7 +51,7 @@ ctx.stroke();
 
 <p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</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/ru/web/api/canvasrenderingcontext2d/rect/index.html b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html
index d5b1d4415f..532fdf1fdc 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/rect/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html
@@ -52,7 +52,7 @@ ctx.fill();
 
 <p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</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/ru/web/api/canvasrenderingcontext2d/rotate/index.html b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html
index ea206a5d1f..d750bcdee3 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html
@@ -48,7 +48,7 @@ ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 <p>Отредактируйте приведенный ниже код и посмотрите, как обновляются ваши изменения на холсте:</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/ru/web/api/canvasrenderingcontext2d/stroke/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html
index 1ac7882a57..4f5e3a7386 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -45,7 +45,7 @@ ctx.stroke();
 
 <p>Отредактируйте приведенный ниже код и посмотрите, как обновляется рисунок на холсте:</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/ru/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html
index e211be454f..c03edf6b41 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html
@@ -53,7 +53,7 @@ ctx.strokeRect(10, 10, 100, 100);
 
 <p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</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/ru/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html
index e0e98fbc0a..8df446d693 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html
@@ -49,7 +49,7 @@ ctx.strokeText("Hello world", 50, 100);
 
 <p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</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/ru/web/api/event/event/index.html b/files/ru/web/api/event/event/index.html
index ac31f2ee21..c18a0ab884 100644
--- a/files/ru/web/api/event/event/index.html
+++ b/files/ru/web/api/event/event/index.html
@@ -25,7 +25,7 @@ translation_of: Web/API/Event/Event
  <ul>
   <li><code>"bubbles"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение ({{jsxref("Boolean")}}) указывающее – будет ли событие всплывающим. По умолчанию <code>false</code>.</li>
   <li><code>"cancelable"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение ({{jsxref("Boolean")}}) указывает, может ли событие быть отменено. По умолчанию <code>false</code>.</li>
-  <li><code>"composed"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение {{jsxref("Boolean")}} указывающее – будет ли событие всплывать наружу за пределы shadow root. По умолчанию <code>false</code>.<span style="display: none;"> </span></li>
+  <li><code>"composed"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение {{jsxref("Boolean")}} указывающее – будет ли событие всплывать наружу за пределы shadow root. По умолчанию <code>false</code>.<span class="hidden"> </span></li>
  </ul>
  </dd>
 </dl>
diff --git a/files/ru/web/api/htmltableelement/index.html b/files/ru/web/api/htmltableelement/index.html
index 31bfff1ca8..6817ae949d 100644
--- a/files/ru/web/api/htmltableelement/index.html
+++ b/files/ru/web/api/htmltableelement/index.html
@@ -197,4 +197,4 @@ translation_of: Web/API/HTMLTableElement
  <li>Элемент HTML, реализующий данный интерфейс: {{HTMLElement("table")}}.</li>
 </ul>
 
-<p><span id="cke_bm_222C" style="display: none;"> </span></p>
+<p><span id="cke_bm_222C" class="hidden"> </span></p>
diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html
index bfcdd98ff3..e55a99aa83 100644
--- a/files/ru/web/css/background-blend-mode/index.html
+++ b/files/ru/web/css/background-blend-mode/index.html
@@ -34,7 +34,6 @@ background-blend-mode: unset;
 
 <h2 id="Examples" name="Examples">Пример</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;
@@ -54,14 +53,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/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'),
diff --git a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html
index 750bbe96f3..8e798f9292 100644
--- a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html
+++ b/files/ru/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
 ---
 <p>Этот инструмент можно использовать, чтобы генерировать 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>
diff --git a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html
index 0dbb391c06..d8aafac807 100644
--- a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html
+++ b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -6,7 +6,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генерато
 ---
 <p>С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
 
 <h3 id="HTML_Content">HTML Content</h3>
diff --git a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html
index a26dbc165d..4530073ad2 100644
--- a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator
 ---
 <p>Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="box-shadow_generator" name="box-shadow_generator">Генератор box-shadow generator</h2>
 
 <h3 id="HTML_Content">HTML Content</h3>
diff --git a/files/ru/web/css/css_colors/color_picker_tool/index.html b/files/ru/web/css/css_colors/color_picker_tool/index.html
index 105c608af3..499aa260fd 100644
--- a/files/ru/web/css/css_colors/color_picker_tool/index.html
+++ b/files/ru/web/css/css_colors/color_picker_tool/index.html
@@ -6,7 +6,7 @@ tags:
   - инструменты
 translation_of: Web/CSS/CSS_Colors/Color_picker_tool
 ---
-<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/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
index 4ed7e1686d..7ab14098a2 100644
--- a/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
+++ b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
@@ -127,7 +127,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index
  <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
- <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" class="hidden"> </span></li>
 </ul>
 
 <div class="originaldocinfo">
diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html
index 2e75865c4d..fe9483eea9 100644
--- a/files/ru/web/css/css_transitions/using_css_transitions/index.html
+++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html
@@ -73,7 +73,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
  <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;
@@ -138,7 +138,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;
@@ -203,7 +203,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;
@@ -268,7 +268,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;
@@ -337,7 +337,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: ease</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -400,7 +400,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: linear</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -463,7 +463,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: step-end</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -526,7 +526,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: steps(4, end)</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -593,7 +593,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 0.5s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -665,7 +665,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;
@@ -737,7 +737,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;
@@ -809,7 +809,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/ru/web/css/filter/index.html b/files/ru/web/css/filter/index.html
index ba55a20e4a..63fa97d156 100644
--- a/files/ru/web/css/filter/index.html
+++ b/files/ru/web/css/filter/index.html
@@ -95,7 +95,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;
@@ -190,7 +190,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;
@@ -286,7 +286,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;
@@ -397,7 +397,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;
@@ -515,7 +515,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;
@@ -599,7 +599,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;
@@ -686,7 +686,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;
@@ -770,7 +770,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;
@@ -852,7 +852,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;
@@ -933,7 +933,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;
@@ -1017,7 +1017,7 @@ table.standard-table td {
 
 <pre class="brush: css">filter: contrast(175%) brightness(103%)</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/ru/web/css/transition-duration/index.html b/files/ru/web/css/transition-duration/index.html
index f40f16a273..7389a9a6f0 100644
--- a/files/ru/web/css/transition-duration/index.html
+++ b/files/ru/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/ru/web/css/using_css_custom_properties/index.html b/files/ru/web/css/using_css_custom_properties/index.html
index db7a1674bd..905cbffe8d 100644
--- a/files/ru/web/css/using_css_custom_properties/index.html
+++ b/files/ru/web/css/using_css_custom_properties/index.html
@@ -138,7 +138,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties
 
 </pre>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html">&lt;div&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
diff --git a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
index fb9f4a9e19..f659c44aa3 100644
--- a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
+++ b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
@@ -339,7 +339,7 @@ var createMenuItem = function(id, lang, label) {
 <div class="SL_BL_LABLE_OFF" 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=""> </div>
 
 <div id="SL_alert_cont"> </div>
@@ -357,7 +357,7 @@ var createMenuItem = function(id, lang, label) {
    <td class="SL_td"><select><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bn">Bengali</option><option value="bs">Bosnian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="ha">Hausa</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="ig">Igbo</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="jw">Javanese</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="mg">Malagasy</option><option value="ms">Malay</option><option value="ml">Malayalam</option><option value="mt">Maltese</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongolian</option><option value="my">Myanmar (Burmese)</option><option value="ne">Nepali</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="pa">Punjabi</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="st">Sesotho</option><option value="si">Sinhala</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="so">Somali</option><option selected value="es">Spanish</option><option value="su">Sundanese</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="tg">Tajik</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="uz">Uzbek</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select></td>
    <td class="SL_td"> </td>
    <td class="SL_td">
-    <div id="SL_TTS_voice" style="display: none;" title="Listen to the translation"> </div>
+    <div id="SL_TTS_voice" class="hidden" title="Listen to the translation"> </div>
    </td>
    <td class="SL_td">
     <div class="SL_copy_hand" id="SL_copy" style="" title="Copy translation"> </div>
@@ -385,7 +385,7 @@ var createMenuItem = function(id, lang, label) {
 
 <div id="SL_player2" style="display: none; height: 0px;"> </div>
 
-<div id="SL_alert100" style="display: none;">Text-to-speech function is limited to 200 characters</div>
+<div id="SL_alert100" class="hidden">Text-to-speech function is limited to 200 characters</div>
 
 <div id="SL_Balloon_options" style="background: rgb(239, 239, 239);">
 <div id="SL_arrow_down" style="display: block; left: 123px;"> </div>
diff --git a/files/ru/web/html/element/a/index.html b/files/ru/web/html/element/a/index.html
index 57a577fb38..49ad727381 100644
--- a/files/ru/web/html/element/a/index.html
+++ b/files/ru/web/html/element/a/index.html
@@ -45,17 +45,17 @@ translation_of: Web/HTML/Element/a
 <dl>
  <dt><strong><code>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</code></strong></dt>
  <dd>Этот атрибут сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный. Если у этого атрибута есть значение, оно будет использовано как заполненное название файла в Окне сохранения, которое открывается, когда пользователь нажимает на ссылку (пользователь может поменять название перед сохранением файла). Ограничений на позволенные значения нет (хотя оно будет конвертировано в нижние подчёркивания, предотвращая специфичные пути), но стоит обратить внимание, что у большинства файловых систем есть ограничения на то, какие знаки препинания поддерживаются файловой системой, и браузеры регулируют названия согласно ограничениям.</dd>
- <dd><span style="display: none;"> </span></dd>
+ <dd><span class="hidden"> </span></dd>
 </dl>
 
 <div class="note">
 <p><strong>Примечание:</strong></p>
 
 <ul>
- <li>Атрибут может быть использован вместе с <a href="/ru/docs/Web/API/URL/createObjectURL">blob: URLs</a> и <code>data: URLs</code>, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью <span style="display: none;"> </span>JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).</li>
+ <li>Атрибут может быть использован вместе с <a href="/ru/docs/Web/API/URL/createObjectURL">blob: URLs</a> и <code>data: URLs</code>, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью <span class="hidden"> </span>JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).</li>
  <li>Если представлен HTTP-заголовок <code>Content-Disposition:,</code> и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.</li>
  <li>Если этот атрибут установлен и <code>Content-Disposition:</code> установлен на <code>inline</code>, Firefox отдаёт преимущество <code>Content-Disposition</code>, но в тоже время Chrome отдаёт преимущество атрибуту <code>download</code>.</li>
- <li>Этот атрибут соблюдается только на ресурсах с тем же<span style="display: none;"> </span> доменом.</li>
+ <li>Этот атрибут соблюдается только на ресурсах с тем же<span class="hidden"> </span> доменом.</li>
 </ul>
 </div>
 
diff --git a/files/ru/web/html/element/input/number/index.html b/files/ru/web/html/element/input/number/index.html
index 93f1fb2525..0ee9046649 100644
--- a/files/ru/web/html/element/input/number/index.html
+++ b/files/ru/web/html/element/input/number/index.html
@@ -289,7 +289,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;
@@ -308,7 +307,7 @@ input:valid+span:after {
 
 <p>You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the <code>step</code> value to <code>0.01</code>, so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.</p>
 
-<p>We've hidden the feet and inches inputs initially using <code>style="display: none;"</code> so that meters is the default entry type.</p>
+<p>We've hidden the feet and inches inputs initially using <code>class="hidden"</code> so that meters is the default entry type.</p>
 
 <p>Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:</p>
 
diff --git a/files/ru/web/http/index.html b/files/ru/web/http/index.html
index 2cbcb5bc68..aec0b6c893 100644
--- a/files/ru/web/http/index.html
+++ b/files/ru/web/http/index.html
@@ -67,7 +67,7 @@ translation_of: Web/HTTP
   <li>{{HTTPMethod("PATCH")}}</li>
   <li>другие</li>
  </ul>
- <span style="display: none;"> </span><span style="display: none;"> </span></dd>
+ <span class="hidden"> </span><span class="hidden"> </span></dd>
  <dt><a href="/en-US/docs/Web/HTTP/Status">Коды ответа (HTTP response codes)</a></dt>
  <dd>Коды ответа HTTP указывают на результат выполнения определенного HTTP-запроса. Ответы сгруппированы в пять категорий: информационные ответы, удачные ответы, перенаправления, ошибки клиента и ошибки сервера.</dd>
  <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">Директивы CSP</a></dt>
diff --git a/files/ru/web/javascript/reference/errors/stmt_after_return/index.html b/files/ru/web/javascript/reference/errors/stmt_after_return/index.html
index fa7d1fe660..c1d429253b 100644
--- a/files/ru/web/javascript/reference/errors/stmt_after_return/index.html
+++ b/files/ru/web/javascript/reference/errors/stmt_after_return/index.html
@@ -81,4 +81,4 @@ function f() {
  <li>{{jsxref("Statements/return", "Automatic Semicolon Insertion", "#Automatic_Semicolon_Insertion", 1)}}</li>
 </ul>
 
-<div id="dc_vk_code" style="display: none;"> </div>
+<div id="dc_vk_code" class="hidden"> </div>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/index.html b/files/ru/web/javascript/reference/global_objects/promise/index.html
index c4577ab151..0c730018b3 100644
--- a/files/ru/web/javascript/reference/global_objects/promise/index.html
+++ b/files/ru/web/javascript/reference/global_objects/promise/index.html
@@ -131,7 +131,7 @@ new Promise(function(resolve, reject) { ... });</pre>
 
 <h3 id="Простой_пример">Простой пример</h3>
 
-<pre class="brush: html" style="display: none;">Создать промис!
+<pre class="brush: html" class="hidden">Создать промис!
 </pre>
 
 <pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) =&gt; {
@@ -151,7 +151,7 @@ myFirstPromise.then((successMessage) =&gt; {
 
 <h3 id="Продвинутый_пример">Продвинутый пример</h3>
 
-<pre class="brush: html" style="display: none;">Создать промис!
+<pre class="brush: html" class="hidden">Создать промис!
 </pre>
 
 <div id="log">
@@ -203,7 +203,7 @@ function testPromise() {
 }
 </pre>
 
-<pre class="brush:js" style="display: none;">if ("Promise" in window) {
+<pre class="brush:js" class="hidden">if ("Promise" in window) {
   btn = document.getElementById("btn");
    btn.addEventListener("click",testPromise);
 }
diff --git a/files/ru/web/mathml/element/math/index.html b/files/ru/web/mathml/element/math/index.html
index a10a11cb22..d38e0232ad 100644
--- a/files/ru/web/mathml/element/math/index.html
+++ b/files/ru/web/mathml/element/math/index.html
@@ -204,7 +204,7 @@ translation_of: Web/MathML/Element/math
 </table>
 </div>
 
-<div id="compat-mobile" style="display: none;">
+<div id="compat-mobile" class="hidden">
 <table class="compat-table">
  <tbody>
   <tr>
diff --git a/files/ru/web/media/formats/index.html b/files/ru/web/media/formats/index.html
index 9d4f181ae7..b11ddc3580 100644
--- a/files/ru/web/media/formats/index.html
+++ b/files/ru/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/ru/web/svg/applying_svg_effects_to_html_content/index.html b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html
index db88faea3f..337add0202 100644
--- a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html
+++ b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html
@@ -179,7 +179,7 @@ pre.target:hover { filter:url(#f3); }
 
 <p>{{EmbedLiveSample('Example_Filtering', 650, 200)}}</p>
 
-<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
+<p class="hidden"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
 
 <h3 id="Пример_размытый_текст">Пример: размытый текст</h3>
 
-- 
cgit v1.2.3-54-g00ecf