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

47 files changed, 109 insertions, 129 deletions

diff --git a/files/ru/conflicting/glossary/chrome/index.html b/files/ru/conflicting/glossary/chrome/index.html
index eedafb7f55..bc6969d621 100644
--- a/files/ru/conflicting/glossary/chrome/index.html
+++ b/files/ru/conflicting/glossary/chrome/index.html
@@ -60,9 +60,9 @@ original_slug: Chrome
   . Существует три базовых типа провайдеров chrome:</dd>
  <dd>
   <ul>
-   <li><b><span id="cke_bm_101S" style="display: none;"> </span>Content</b>. Контент может состоять из файлов любого вида, видимых для Mozilla. В частности, ресурс <strong>content</strong>, как правило, состоит из набора <a href="en/XUL">XUL</a>, <a href="en/JavaScript">JavaScript</a> и сборочных файлов <a href="en/XBL">XBL</a>.</li>
+   <li><b><span id="cke_bm_101S" class="hidden"> </span>Content</b>. Контент может состоять из файлов любого вида, видимых для Mozilla. В частности, ресурс <strong>content</strong>, как правило, состоит из набора <a href="en/XUL">XUL</a>, <a href="en/JavaScript">JavaScript</a> и сборочных файлов <a href="en/XBL">XBL</a>.</li>
    <li><b>Locale</b>. Переводы для поддержки нескольких языков. Здесь два основных типа файлов:  <a href="en/XUL_Tutorial/Localization">DTD</a> файлы и java-подобные <a href="en/XUL_Tutorial/Property_Files">файлы свойств</a>.</li>
-   <li><b>Skin</b>. Ресурс <em>skin</em> предоставляет полные данные о внешнем виде UI. Состоит из <a href="en/CSS">CSS</a> файлов и изображений.<span id="cke_bm_101E" style="display: none;"> </span></li>
+   <li><b>Skin</b>. Ресурс <em>skin</em> предоставляет полные данные о внешнем виде UI. Состоит из <a href="en/CSS">CSS</a> файлов и изображений.<span id="cke_bm_101E" class="hidden"> </span></li>
   </ul>
  </dd>
 </dl>
diff --git a/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html b/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html
index f66eb23b48..e005d04596 100644
--- a/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html
+++ b/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html
@@ -379,7 +379,7 @@ a.homepage:hover, a.homepage:focus, a.homepage:active {
   <table style="border: 2px outset #3366bb; padding: 1em;">
    <tbody>
     <tr>
-     <td><span class="short_text" id="result_box" lang="ru"><span>Перейдите к нашей</span></span> <a class="tutospecial" href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_started/Selectors#" title="Home page">Домашняя страница</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+     <td><span class="short_text" id="result_box" lang="ru"><span>Перейдите к нашей</span></span> <a class="tutospecial" href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_started/Selectors#" title="Home page">Домашняя страница</a><span class="hidden"> </span><span class="hidden"> </span></td>
     </tr>
    </tbody>
   </table>
diff --git a/files/ru/conflicting/web/api/push_api/index.html b/files/ru/conflicting/web/api/push_api/index.html
index 1a1de71329..d4c8ee1d29 100644
--- a/files/ru/conflicting/web/api/push_api/index.html
+++ b/files/ru/conflicting/web/api/push_api/index.html
@@ -70,7 +70,7 @@ original_slug: Web/API/Push_API/Using_the_Push_API
  <li>Поверх в сервис воркере настройте обработчик событий <code>push</code> для ответов на полученные push-сообщения.
   <ol>
    <li>Если вы хотите отвечать отправкой сообщения канала обратно основному контексту (смотри шаг 6), необходимо сначала получить ссылку на <code>port2,</code> который был отправлен контексту сервис воркера ({{domxref("MessagePort")}}). Это доступно в объекте  {{domxref("MessageEvent")}}, передаваемого обработчику <code>onmessage </code>({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Конкретнее, он находится в свойстве <code>ports</code>, индекс 0. Когда это сделано, вы можете отправить сообщение обратно <code>port1</code>, используя {{domxref("MessagePort.postMessage()")}}.</li>
-   <li>Если вы хотитет ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.<span id="cke_bm_307E" style="display: none;"> </span></li>
+   <li>Если вы хотитет ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.<span id="cke_bm_307E" class="hidden"> </span></li>
   </ol>
  </li>
 </ol>
diff --git a/files/ru/conflicting/web/http/csp/index.html b/files/ru/conflicting/web/http/csp/index.html
index df563abc30..a424fc49db 100644
--- a/files/ru/conflicting/web/http/csp/index.html
+++ b/files/ru/conflicting/web/http/csp/index.html
@@ -39,6 +39,6 @@ original_slug: Web/Security/CSP
  <li><a href="/docs/Apps/CSP">CSP restrictions for Open Web Apps</a></li>
 </ul>
 
-<div id="__if72ru4rkjahiuyi_once" style="display: none;"> </div>
+<div id="__if72ru4rkjahiuyi_once" class="hidden"> </div>
 
-<div id="__hggasdgjhsagd_once" style="display: none;"> </div>
+<div id="__hggasdgjhsagd_once" class="hidden"> </div>
diff --git a/files/ru/learn/css/styling_text/styling_lists/index.html b/files/ru/learn/css/styling_text/styling_lists/index.html
index 401cd7e6e1..dfd19f97e8 100644
--- a/files/ru/learn/css/styling_text/styling_lists/index.html
+++ b/files/ru/learn/css/styling_text/styling_lists/index.html
@@ -125,7 +125,7 @@ dd {
  <li>Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.</li>
  <li>Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.</li>
  <li>Правило 4 задает одинаковую высоту {{cssxref("line-height")}} в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.</li>
- <li>Правила 5 и 6 применяются к списку описаний — мы задаем одинаковую высоту <code>line-height</code> между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! <span class="tlid-translation translation" lang="ru"><span title="">Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.</span></span> <span id="cke_bm_126E" style="display: none;"> </span></li>
+ <li>Правила 5 и 6 применяются к списку описаний — мы задаем одинаковую высоту <code>line-height</code> между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! <span class="tlid-translation translation" lang="ru"><span title="">Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.</span></span> <span id="cke_bm_126E" class="hidden"> </span></li>
 </ul>
 
 <h2 id="Стили_специфичные_для_списков">Стили специфичные для списков</h2>
diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html
index 06759fe76d..65c138e103 100644
--- a/files/ru/learn/html/howto/index.html
+++ b/files/ru/learn/html/howto/index.html
@@ -151,4 +151,4 @@ original_slug: Learn/HTML/Рецепты
 </div>
 </div>
 
-<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
+<p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span> </p>
diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
index a6cd7e7730..d252a56e21 100644
--- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
+++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -355,9 +355,9 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
 <div id="SL_balloon_obj" style="display: block;">
 <div class="SL_ImTranslatorLogo" id="SL_button"></div>
 
-<div id="SL_shadow_translation_result2" style="display: none;"></div>
+<div id="SL_shadow_translation_result2" class="hidden"></div>
 
-<div id="SL_shadow_translator" style="display: none;">
+<div id="SL_shadow_translator" class="hidden">
 <div id="SL_planshet">
 <div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
 
@@ -369,7 +369,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
 <div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
 </div>
 
-<div id="SL_alert_bbl" style="display: none;">
+<div id="SL_alert_bbl" class="hidden">
 <div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"></div>
 
 <div id="SL_alert_cont"></div>
diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html
index f27e4c5398..89f5077314 100644
--- a/files/ru/learn/html/introduction_to_html/getting_started/index.html
+++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html
@@ -193,7 +193,7 @@ textarea.onkeyup = function(){
 
 <h3 id="Вложенные_элементы">Вложенные элементы</h3>
 
-<h3 id="Nesting_elements" style="display: none;">Nesting_elements</h3>
+<h3 id="Nesting_elements" class="hidden">Nesting_elements</h3>
 
 <p>Вы также можете вкладывать элементы внутрь других элементов — это называется <strong>вложенностью</strong>. Если мы хотим подчеркнуть, что наш кот <strong>очень</strong> сердитый, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который означает, что это слово крайне важно в данном контексте:</p>
 
@@ -207,7 +207,7 @@ textarea.onkeyup = function(){
 
 <h3 id="Блочные_и_строчные_элементы">Блочные и строчные элементы</h3>
 
-<h3 id="Block_versus_inline_elements" style="display: none;">Block versus inline elements</h3>
+<h3 id="Block_versus_inline_elements" class="hidden">Block versus inline elements</h3>
 
 <p>Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.</p>
 
@@ -241,7 +241,7 @@ textarea.onkeyup = function(){
 
 <h3 id="Пустые_элементы">Пустые элементы</h3>
 
-<h3 id="Empty_elements" style="display: none;">Empty elements</h3>
+<h3 id="Empty_elements" class="hidden">Empty elements</h3>
 
 <p>Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент {{htmlelement("img")}} вставляет картинку на страницу в том самом месте, где он расположен:</p>
 
@@ -273,7 +273,7 @@ textarea.onkeyup = function(){
 
 <h3 id="Активное_изучение_Добавление_атрибутов_в_элемент">Активное изучение: Добавление атрибутов в элемент</h3>
 
-<h3 id="Active_learning_Adding_attributes_to_an_element" style="display: none;">Active learning: Adding attributes to an element</h3>
+<h3 id="Active_learning_Adding_attributes_to_an_element" class="hidden">Active learning: Adding attributes to an element</h3>
 
 <p>Возьмём для примера элемент {{htmlelement("a")}} — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:</p>
 
@@ -410,7 +410,7 @@ textarea.onkeyup = function(){
 
 <h3 id="Булевые_атрибуты">Булевые атрибуты</h3>
 
-<h3 id="Boolean_attributes" style="display: none;">Boolean attributes</h3>
+<h3 id="Boolean_attributes" class="hidden">Boolean attributes</h3>
 
 <p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо.  Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмем атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p>
 
@@ -429,7 +429,7 @@ textarea.onkeyup = function(){
 
 <h3 id="Опускание_кавычек_вокруг_значений_атрибутов">Опускание кавычек вокруг значений атрибутов</h3>
 
-<h3 id="Omitting_quotes_around_attribute_values" style="display: none;">Omitting quotes around attribute values</h3>
+<h3 id="Omitting_quotes_around_attribute_values" class="hidden">Omitting quotes around attribute values</h3>
 
 <p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определенных условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p>
 
@@ -447,7 +447,7 @@ textarea.onkeyup = function(){
 
 <h3 id="Одинарные_или_двойные_кавычки">Одинарные или двойные кавычки?</h3>
 
-<h3 id="Single_or_double_quotes" style="display: none;">Single or double quotes?</h3>
+<h3 id="Single_or_double_quotes" class="hidden">Single or double quotes?</h3>
 
 <p>В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:</p>
 
@@ -503,7 +503,7 @@ textarea.onkeyup = function(){
 
 <h3 id="Активное_изучение_Добавление_элементов_в_ваш_HTML-документ">Активное изучение: Добавление элементов в ваш HTML-документ</h3>
 
-<h3 id="Active_learning_Adding_some_features_to_an_HTML_document" style="display: none;">Active learning: Adding some features to an HTML document</h3>
+<h3 id="Active_learning_Adding_some_features_to_an_HTML_document" class="hidden">Active learning: Adding some features to an HTML document</h3>
 
 <p>Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:</p>
 
@@ -660,7 +660,7 @@ textarea.onkeyup = function(){
 
 <h3 id="Пробелы_в_HTML">Пробелы в HTML</h3>
 
-<h3 id="Whitespace_in_HTML" style="display: none;">Whitespace in HTML</h3>
+<h3 id="Whitespace_in_HTML" class="hidden">Whitespace in HTML</h3>
 
 <p>Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:</p>
 
@@ -673,7 +673,7 @@ textarea.onkeyup = function(){
 
 <h2 id="Ссылки_на_сущности_Включение_специальных_символов_в_HTML">Ссылки на сущности: Включение специальных символов в HTML</h2>
 
-<h2 id="Entity_references_Including_special_characters_in_HTML" style="display: none;">Entity references: Including special characters in HTML</h2>
+<h2 id="Entity_references_Including_special_characters_in_HTML" class="hidden">Entity references: Including special characters in HTML</h2>
 
 <p>В HTML символы <code>&lt;</code>, <code>&gt;</code>, <code>"</code>, <code>'</code> и <code>&amp;</code> являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.</p>
 
@@ -726,7 +726,7 @@ textarea.onkeyup = function(){
 
 <h2 id="HTML_комментарии">HTML комментарии</h2>
 
-<h2 id="HTML_comments" style="display: none;">HTML comments</h2>
+<h2 id="HTML_comments" class="hidden">HTML comments</h2>
 
 <p>В HTML, как и в большинстве языков программирования, есть возможность писать комментарии в коде. Комментарии игнорируются обозревателем и не видны пользователю, их добавляют для того, чтобы пояснить, как работает написанный код, что делают отдельные его части и т. д. Такая практика полезна, если вы возвращаетесь к коду, который давно не видели или когда хотите передать его кому-то другому.</p>
 
diff --git a/files/ru/mozilla/add-ons/webextensions/user_interface/popups/index.html b/files/ru/mozilla/add-ons/webextensions/user_interface/popups/index.html
index 23541f5a60..a6e6746c07 100644
--- a/files/ru/mozilla/add-ons/webextensions/user_interface/popups/index.html
+++ b/files/ru/mozilla/add-ons/webextensions/user_interface/popups/index.html
@@ -12,7 +12,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups
 
 <p>When the user clicks the button, the popup is shown. When the user clicks anywhere outside the popup, the popup is closed. The popup can be closed programmatically by calling <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/close">window.close()</a></code> from a script running in the popup. However, you can't open the popup programmatically from an extension's JavaScript: it can only be opened in response to a user action.</p>
 
-<p>You can define a keyboard shortcut that opens the popup using the <code>"_execute_browser_action"</code> and <code>"_execute_page_action"</code> shortcuts. See the documentation for the manifest.json key <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commands</a></code><span style="display: none;"> </span>.</p>
+<p>You can define a keyboard shortcut that opens the popup using the <code>"_execute_browser_action"</code> and <code>"_execute_page_action"</code> shortcuts. See the documentation for the manifest.json key <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commands</a></code><span class="hidden"> </span>.</p>
 
 <h2 id="Specifying_a_popup">Specifying a popup</h2>
 
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>