aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-09-04 00:46:12 +0900
committerMasahiro FUJIMOTO <mfujimot@gmail.com>2021-09-04 00:46:12 +0900
commitfe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch)
tree51b7edfc370236684a203f4e69ae67bb7d24b549 /files/ru/web/css
parent04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff)
parenteeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff)
downloadtranslated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz
translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2
translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip
Merge branch 'main' into 20210818-Glossary/Type
Diffstat (limited to 'files/ru/web/css')
-rw-r--r--files/ru/web/css/background-blend-mode/index.html98
-rw-r--r--files/ru/web/css/background-blend-mode/index.md115
-rw-r--r--files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html (renamed from files/ru/web/css/css_background_and_borders/border-image_generator/index.html)3
-rw-r--r--files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html (renamed from files/ru/web/css/css_background_and_borders/border-radius_generator/index.html)4
-rw-r--r--files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html (renamed from files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html)4
-rw-r--r--files/ru/web/css/css_flow_layout/index.html2
-rw-r--r--files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html2
-rw-r--r--files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html2
-rw-r--r--files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html2
-rw-r--r--files/ru/web/css/css_grid_layout/grid_template_areas/index.html2
-rw-r--r--files/ru/web/css/css_grid_layout/index.html2
-rw-r--r--files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html2
-rw-r--r--files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html2
-rw-r--r--files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html2
-rw-r--r--files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html2
-rw-r--r--files/ru/web/css/grid-area/index.html2
-rw-r--r--files/ru/web/css/grid-auto-flow/index.html2
-rw-r--r--files/ru/web/css/grid-row-start/index.html2
-rw-r--r--files/ru/web/css/grid-template-areas/index.html2
-rw-r--r--files/ru/web/css/grid-template-columns/index.html2
-rw-r--r--files/ru/web/css/grid-template-rows/index.html2
-rw-r--r--files/ru/web/css/grid/index.html2
-rw-r--r--files/ru/web/css/minmax()/index.html2
-rw-r--r--files/ru/web/css/overscroll-behavior/index.html36
-rw-r--r--files/ru/web/css/position/index.html2
25 files changed, 158 insertions, 140 deletions
diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html
deleted file mode 100644
index 1bbc67d090..0000000000
--- a/files/ru/web/css/background-blend-mode/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: background-blend-mode
-slug: Web/CSS/background-blend-mode
-translation_of: Web/CSS/background-blend-mode
----
-<p>{{CSSRef()}}</p>
-
-<h2 id="Summary" name="Summary">Описание</h2>
-
-<p>Свойство <code>background-blend-mode</code> описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.</p>
-
-<p>Режимы наложения должны быть определены в том же порядке что CSS свойство {{cssxref("background-image")}}. Если длины списка режимов наложения и фоновых изображений не равны, он будет повторяться и/или сокращаться до совпадения длин.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">Синтаксис</h2>
-
-<pre class="twopartsyntaxbox"><code>Формальный синтаксис: {{csssyntax("background-blend-mode")}}</code></pre>
-
-<pre>background-blend-mode: normal; /* Одно значение */
-background-blend-mode: darken, luminosity; /* Два значение, по одному на каждый фон */
-
-background-blend-mode: initial;
-background-blend-mode: inherit;
-background-blend-mode: unset;
-</pre>
-
-<h3 id="Values" name="Values">Значения</h3>
-
-<dl>
- <dt><code>&lt;blend-mode&gt;</code></dt>
- <dd>{{cssxref("&lt;blend-mode&gt;")}} обозначающий режим наложения, который применён. Может быть несколько значений, разделённых запятыми.</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">Пример</h2>
-
-&lt;select id="select"&gt;
-    &lt;option&gt;normal&lt;/option&gt;
-    &lt;option&gt;multiply&lt;/option&gt;
-    &lt;option selected&gt;screen&lt;/option&gt;
-    &lt;option&gt;overlay&lt;/option&gt;
-    &lt;option&gt;darken&lt;/option&gt;
-    &lt;option&gt;lighten&lt;/option&gt;
-    &lt;option&gt;color-dodge&lt;/option&gt;
-    &lt;option&gt;color-burn&lt;/option&gt;
-    &lt;option&gt;hard-light&lt;/option&gt;
-    &lt;option&gt;soft-light&lt;/option&gt;
-    &lt;option&gt;difference&lt;/option&gt;
-    &lt;option&gt;exclusion&lt;/option&gt;
-    &lt;option&gt;hue&lt;/option&gt;
-    &lt;option&gt;saturation&lt;/option&gt;
-    &lt;option&gt;color&lt;/option&gt;
-    &lt;option&gt;luminosity&lt;/option&gt;
-&lt;/select&gt;</pre>
-
-<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" 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>
-
-<p>{{ EmbedLiveSample('Examples', "330", "330") }}</p>
-
-<h2 id="Specifications" name="Specifications">Спецификации</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Спецификация</th>
- <th scope="col">Статус</th>
- <th scope="col">Комментарий</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td>
- <td>{{ Spec2('Compositing') }}</td>
- <td>Первоначальная спецификация</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
-
-<p>{{Compat("css.properties.background-blend-mode")}}</p>
-
-<h2 id="See_also" name="See_also">Смотрите также</h2>
-
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("mix-blend-mode")}}</li>
-</ul>
diff --git a/files/ru/web/css/background-blend-mode/index.md b/files/ru/web/css/background-blend-mode/index.md
new file mode 100644
index 0000000000..63112f57d6
--- /dev/null
+++ b/files/ru/web/css/background-blend-mode/index.md
@@ -0,0 +1,115 @@
+---
+title: background-blend-mode
+slug: Web/CSS/background-blend-mode
+tags:
+ - CSS
+ - CSS-свойство
+ - Композиция и наложение
+ - recipe:css-property
+translation_of: Web/CSS/background-blend-mode
+browser-compat: css.properties.background-blend-mode
+---
+{{CSSRef()}}
+
+[CSS-свойство](/ru/docs/Web/CSS) **`background-blend-mode`** описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.
+
+{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
+
+Режимы наложения должны быть определены в том же порядке, что и CSS-свойство {{cssxref("background-image")}}. Если количество режимов наложения будет больше или меньше количества фоновых изображений, то последние режимы будут либо отброшены, либо повторены до совпадения количества соответственно.
+
+## Cинтаксис
+
+```css
+/* Одно значение */
+background-blend-mode: normal;
+
+/* Два значения, по одному на каждый фон */
+background-blend-mode: darken, luminosity;
+
+/* Глобальные значения */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: revert;
+background-blend-mode: unset;
+```
+
+### Значения
+
+- {{cssxref("&lt;blend-mode&gt;")}}
+ - : Применяемый режим наложения. Можно указать несколько значений, разделённых запятыми.
+
+## Формальное определение
+
+{{cssinfo}}
+
+## Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Простой пример
+
+```css
+.item {
+    width: 300px;
+    height: 300px;
+    background: url('image1.png'),url('image2.png');
+    background-blend-mode: screen;
+}
+```
+
+### Попробуйте разные режимы смешивания
+
+```html hidden
+<div id="div"></div>
+<select id="select">
+ <option>normal</option>
+ <option>multiply</option>
+ <option selected>screen</option>
+ <option>overlay</option>
+ <option>darken</option>
+ <option>lighten</option>
+ <option>color-dodge</option>
+ <option>color-burn</option>
+ <option>hard-light</option>
+ <option>soft-light</option>
+ <option>difference</option>
+ <option>exclusion</option>
+ <option>hue</option>
+ <option>saturation</option>
+ <option>color</option>
+ <option>luminosity</option>
+</select>
+```
+
+```css 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;
+}
+```
+
+```js hidden
+document.getElementById("select").onchange = function(event) {
+ document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));
+```
+
+{{ EmbedLiveSample('Примеры', "330", "350") }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("mix-blend-mode")}}
diff --git a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html
index 8e798f9292..ebd9771810 100644
--- a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html
+++ b/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -1,10 +1,11 @@
---
title: Генератор Border-image
-slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
tags:
- CSS
- Tools
translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
---
<p>Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.</p>
diff --git a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
index d8aafac807..103a3e0965 100644
--- a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html
+++ b/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -1,8 +1,8 @@
---
title: Border-radius генератор
-slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генератор
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
---
<p>С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.</p>
diff --git a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
index 4530073ad2..8252c21112 100644
--- a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ b/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
@@ -1,12 +1,12 @@
---
title: Генератор теней
-slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
tags:
- CSS3
- Тень
- инструменты
translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
---
<p>Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.</p>
diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html
index 3863c2862e..ee7162f19b 100644
--- a/files/ru/web/css/css_flow_layout/index.html
+++ b/files/ru/web/css/css_flow_layout/index.html
@@ -45,7 +45,7 @@ translation_of: Web/CSS/CSS_Flow_Layout
<li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index 0bf469ac46..4fd846a256 100644
--- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -665,7 +665,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
<p>В данной статье мы очень кратко рассмотрели спецификацию Grid Layout. Поиграйте с примерами кода и переходите  <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">к следующей части нашего гида, где мы детально покопаемся в недрах CSS Grid Layout</a>.</p>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
index 80d1ad38af..cce90b7f30 100644
--- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -644,7 +644,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
<p>Однако, если вы устанавливаете автоматические поля, используя <code>margin-right</code> или <code>margin-left</code>, или абсолютно позиционирующий элемент, используя <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.</p>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
index d94570b6f2..f7b2f65cb7 100644
--- a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
+++ b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
@@ -440,7 +440,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode
<p><a href="https://drafts.csswg.org/css-logical/">Спецификация логических свойств CSS</a> имеет целью изменить это и в будущем мы сможем использовать <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">логические эквиваленты</a> для свойств, такие как {{cssxref ("margin-left")}} и {{cssxref ("margin-right") }}, в нашем CSS. Firefox уже реализовал их, поэтому вы можете попробовать их прямо сейчас в Firefox. Я знаю в будущем, как только эти корабли повсюду, ваши знания «Блокировать и встроить» с помощью Grid означают, что вы точно знаете, как их использовать.</p>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html
index bdf9906212..830df019a4 100644
--- a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html
+++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html
@@ -471,7 +471,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области
<p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы ещё не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включённые в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html
index 4e6e70cf5f..bac225352c 100644
--- a/files/ru/web/css/css_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/index.html
@@ -177,7 +177,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
</tbody>
</table>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index 043d708e69..4d95530d74 100644
--- a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -434,7 +434,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
<p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнёте создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдёте свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
index 682f3051b8..8c8713b6b4 100644
--- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
+++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
@@ -594,7 +594,7 @@ original_slug: >-
<p>Также помните, что элементы на гриде могут перекрывать друг друга, если вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если вы некорректно задали начальные и конечные линии, результат может неприятно вас удивить. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> будет крайне полезен в процессе обучения, особенно, когда вы строите сложные гриды.</p>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
index 625700ca08..42a0ac6b0d 100644
--- a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -534,7 +534,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
<li>For additional common layout patterns see <em><a href="http://gridbyexample.com">Grid by Example</a></em>, where there are many smaller examples of grid layout and also some larger UI patterns and full page layouts.</li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index d92d33d0f7..1d3c710434 100644
--- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -567,7 +567,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<p>Как вы могли увидеть, CSS Grid Layout - это часть вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.</p>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html
index 2712892e54..eef3305724 100644
--- a/files/ru/web/css/grid-area/index.html
+++ b/files/ru/web/css/grid-area/index.html
@@ -140,7 +140,7 @@ grid-area: unset;
<li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html
index 226db2bb76..3d8b2e0892 100644
--- a/files/ru/web/css/grid-auto-flow/index.html
+++ b/files/ru/web/css/grid-auto-flow/index.html
@@ -150,7 +150,7 @@ grid-auto-flow: unset;
<li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html
index 5817eef381..b3e5722198 100644
--- a/files/ru/web/css/grid-row-start/index.html
+++ b/files/ru/web/css/grid-row-start/index.html
@@ -173,7 +173,7 @@ grid-row-start: unset;
<li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html
index 3e9a83e744..9930232eec 100644
--- a/files/ru/web/css/grid-template-areas/index.html
+++ b/files/ru/web/css/grid-template-areas/index.html
@@ -124,7 +124,7 @@ grid-template-areas: unset;
<li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html
index 546a42ed31..15278dec92 100644
--- a/files/ru/web/css/grid-template-columns/index.html
+++ b/files/ru/web/css/grid-template-columns/index.html
@@ -150,7 +150,7 @@ grid-template-columns: unset;
<li>Видео туториал: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html
index e4343f33b6..0a0d5ec229 100644
--- a/files/ru/web/css/grid-template-rows/index.html
+++ b/files/ru/web/css/grid-template-rows/index.html
@@ -139,7 +139,7 @@ grid-template-rows: unset;
<li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html
index f400457ae7..d46d0121c6 100644
--- a/files/ru/web/css/grid/index.html
+++ b/files/ru/web/css/grid/index.html
@@ -130,7 +130,7 @@ grid: unset;
<li>Руководство по разметке сетки: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><strong><a href="/en-US/docs/Web/CSS/Reference">CSS ссылки </a></strong></li>
diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html
index 5f9739d1ae..d4a4a37361 100644
--- a/files/ru/web/css/minmax()/index.html
+++ b/files/ru/web/css/minmax()/index.html
@@ -132,7 +132,7 @@ minmax(auto, 300px)
<li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></li>
</ul>
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html
index 58377262db..38acf1ffba 100644
--- a/files/ru/web/css/overscroll-behavior/index.html
+++ b/files/ru/web/css/overscroll-behavior/index.html
@@ -7,7 +7,7 @@ translation_of: Web/CSS/overscroll-behavior
---
<div>{{CSSRef}}</div>
-<p><span class="seoSummary">The <strong><code>overscroll-behavior</code></strong> CSS property is shorthand for the {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}} properties, which allow you to control the browser's scroll overflow behavior — what happens when the boundary of a scrolling area is reached.</span></p>
+<p><span class="seoSummary">CSS-свойство <strong><code>overscroll-behavior</code></strong> — это сокращение для свойств {{cssxref("overscroll-behavior-x")}} и {{cssxref("overscroll-behavior-y")}}, которые позволяют управлять поведением прокрутки при достижении границы области прокрутки.</span></p>
<pre class="brush:css no-line-numbers">/* Значения-ключевые слова */
overscroll-behavior: auto; /* по умолчанию */
@@ -23,40 +23,40 @@ overflow: initial;
overflow: unset;
</pre>
-<p>По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение её верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called <strong>scroll chaining</strong>.</p>
+<p>По умолчанию мобильные браузеры, как правило, обеспечивают эффект «отскока» или даже обновляют страницу при достижении её верхней или нижней части (или другой области прокрутки). Возможно, вы также замечали, что когда поверх страницы с прокруткой расположено диалоговое окно с прокруткой, то при достижении границы прокрутки диалогового окна нижележащая страница начинает прокручиваться. Это называется цепочкой прокрутки (scroll chaining, англ.)</p>
-<p>In some cases these behaviors are not desirable. you can use <code>overscroll-behavior</code> to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.</p>
+<p>В некоторых случаях такое поведение нежелательно. Вы можете использовать <code>overscroll-behavior</code>, чтобы избавиться от нежелательных цепочек прокрутки и поведения страниц браузера по принципу «потяните, чтобы обновить» (pull to refresh, англ.), характерного, например, для приложений Facebook и Twitter.</p>
<p>{{cssinfo}}</p>
-<h2 id="Syntax">Syntax</h2>
+<h2 id="Syntax">Синтаксис</h2>
-<p>The <code>overscroll-behavior</code> property is specified as one or two keywords chosen from the list of values below.</p>
+<p>Свойство <code>overscroll-behavior</code> задаётся в виде одного или двух ключевых слов, выбранных из списка значений ниже.</p>
-<p>Two keywords specifies the <code>overscroll-behavior</code> value on the <code>x</code> and <code>y</code> axes respectively. If only one value is specified, both x and y are assumed to have the same value.</p>
+<p>Два ключевых слова определяют значение <code>overscroll-behavior</code> по осям <code>x</code> и <code>y</code> соответственно. Если задано только одно значение, то предполагается, что и <code>x</code>, и <code>y</code> одинаковы.</p>
-<h3 id="Values">Values</h3>
+<h3 id="Values">Значения</h3>
<dl>
<dt><code>auto</code></dt>
- <dd>The default scroll overflow behavior occurs as normal.</dd>
+ <dd>Поведение по умолчанию.</dd>
<dt><code>contain</code></dt>
- <dd>Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.</dd>
+ <dd>Поведение для <code>overscroll-behavior</code> применяется внутри элемента, для которого установлено это значение (например, эффекты «отскока» или обновления), но не возникают цепочки прокрутки для соседних областей прокрутки, например, нижележащие элементы не будут прокручиваться.</dd>
<dt><code>none</code></dt>
- <dd>No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.</dd>
+ <dd>Не происходит цепочки прокрутки в соседних областях прокрутки, и по умолчанию предотвращается достижение границы области прокрутки.</dd>
</dl>
-<h3 id="Formal_syntax">Formal syntax</h3>
+<h3 id="Formal_syntax">Формальный синтаксис</h3>
{{csssyntax}}
-<h2 id="Examples">Examples</h2>
+<h2 id="Examples">Примеры</h2>
-<p>In our <a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior example</a> (see the <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">source code</a> also), we present a full-page list of fake contacts, and a dialog box containing a chat window. </p>
+<p>В нашем примере <a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-поведения</a> (см. также код по ссылке <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior"></a>) представлен полностраничный список поддельных контактов и диалоговое окно с чатом.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p>
-<p>Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> would also work) on the chat window, like this:</p>
+<p>Обе эти области прокручиваются; обычно, если вы прокручиваете окно чата до тех пор, пока не достигнете границы прокрутки, нижележащее окно контактов тоже начнёт прокручиваться, что нежелательно. Предотвратить такое поведение можно, используя <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> также подойдет) для окна чата, как показано ниже: </p>
<pre class="brush: css">.messages {
height: 220px;
@@ -64,16 +64,16 @@ overflow: unset;
overscroll-behavior-y: contain;
} </pre>
-<p>We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting <code>overscroll-behavior: none</code> on the {{htmlelement("body")}} element:</p>
+<p>Мы также хотим избавиться от стандартного overscroll-эффекта при прокрутке контактов вверх или вниз (например, Chrome на Android обновляет страницу при прокрутке за пределы верхней границы). Это можно предотвратить, установив для элемента {{htmlelement("body")}} значение <code>overscroll-behavior: none</code>:</p>
<pre class="brush: css">body {
margin: 0;
overscroll-behavior: none;
}</pre>
-<h2 id="Specifications">Specifications</h2>
+<h2 id="Specifications">Спецификации</h2>
-<p>Until the CSSWG publishes their own draft, the specification can only be found in its <a href="https://wicg.github.io/overscroll-behavior/">WICG Github Repository</a>.</p>
+<p>Пока CSSWG не опубликует свой собственный вариант, спецификация может быть найдена только<a href="https://wicg.github.io/overscroll-behavior/">на Github в репозитории WICG</a>.</p>
<table class="standard-table">
<thead>
@@ -98,7 +98,7 @@ overflow: unset;
<p>{{Compat("css.properties.overscroll-behavior")}}</p>
-<h2 id="See_also">See also</h2>
+<h2 id="See_also">См. также</h2>
<ul>
<li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects</a></li>
diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html
index b795b6435d..c75944e603 100644
--- a/files/ru/web/css/position/index.html
+++ b/files/ru/web/css/position/index.html
@@ -203,7 +203,7 @@ span {
<p>... позиционирует элемент с id "one" относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.</p>
<div>
-<p>Общее использование для липкого позиционирования - для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.</p>
+<p>Типичное использование для липкого позиционирования - для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.</p>
<p>Вы должны указать порог с по крайней мере одним из <span style="line-height: 1.5;"> {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}}, или {{cssxref('left')}}</span> для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования.</p>
</div>