initial commit

361 files changed, 71851 insertions, 0 deletions

diff --git a/files/ru/web/css/--_star_/index.html b/files/ru/web/css/--_star_/index.html
new file mode 100644
index 0000000000..541d7ab62e
--- /dev/null
+++ b/files/ru/web/css/--_star_/index.html
@@ -0,0 +1,14 @@
+---
+title: Переменные (--*)
+slug: Web/CSS/--*
+tags:
+  - CSS
+  - CSS Variables
+  - Property
+translation_of: Web/CSS/--*
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>Имена свойств с префиксом <code>--</code>, типа <code>--example-name</code>, представляют собой <em>свои свойства</em>, содержащие значение, которое можно использовать по всему документу, используя ({{cssxref("var()")}}).</p>
+
+<p>Свои свойства участвуют в каскаде: каждое из них может появляться несколько раз, а значение переменной соответствует значению определённому в своём свойстве по алгоритму каскадирования.</p>
diff --git a/files/ru/web/css/-moz-binding/index.html b/files/ru/web/css/-moz-binding/index.html
new file mode 100644
index 0000000000..e9c8b29c44
--- /dev/null
+++ b/files/ru/web/css/-moz-binding/index.html
@@ -0,0 +1,115 @@
+---
+title: '-moz-binding'
+slug: Web/CSS/-moz-binding
+translation_of: Archive/Web/CSS/-moz-binding
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header(57)}}</div>
+
+<p>The <strong><code>-moz-binding</code></strong> CSS property is used by Mozilla-based applications to attach an <a href="/en-US/docs/XBL">XBL</a> binding to a DOM element.</p>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;url&gt; value */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Global values */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;url&gt;")}}</dt>
+ <dd>The URL for the XBL binding (including the fragment identifier).</dd>
+ <dt><code>none</code></dt>
+ <dd>No XBL binding is applied to the element.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: css">.exampleone {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="bc-old">
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <thead>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Basic support {{Deprecated_Inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} <sup><a href="compatNote_1">[1]</a></sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <thead>
+  <tr>
+   <th>Feature</th>
+   <th>WebView Android</th>
+   <th>Chrome Android</th>
+   <th>Edge Mobile</th>
+   <th>Firefox Android</th>
+   <th>Opera Android</th>
+   <th>Safari iOS</th>
+   <th>Samsung Internet Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Basic support {{Deprecated_Inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}} <sup><a href="compatNote_1">[1]</a></sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p id="compatNote_1">1. XBL is deprecated and being removed (See {{bug(1397874)}}).</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">XBL Reference: Binding Attachment and Detachment</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Introduction_to_XBL">XUL Tutorial: Introduction to XBL</a></li>
+</ul>
diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.html b/files/ru/web/css/@counter-style/additive-symbols/index.html
new file mode 100644
index 0000000000..97570d3e45
--- /dev/null
+++ b/files/ru/web/css/@counter-style/additive-symbols/index.html
@@ -0,0 +1,125 @@
+---
+title: additive-symbols
+slug: Web/CSS/@counter-style/additive-symbols
+translation_of: Web/CSS/@counter-style/additive-symbols
+---
+<h2 id="Описание">Описание</h2>
+
+<p>Дескриптор аддитивных символов аналогичен дескриптору <span class="seoSummary"> {{cssxref('symbols')}} </span>и позволяет пользователю указывать символы которые будут использоваться для представлений счетчика, когда значение дескриптора<span class="seoSummary"> {{cssxref('system')}}  <em>адиктивное</em>. Дескриптор <code>additive-symbols</code> </span>определяет так называемые аддитивные кортежи<span class="seoSummary">, </span>каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес<span class="seoSummary">.</span> Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.</p>
+
+<p>Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор <code>symbols</code> используется вместо аддитивных символов для указания символов счетчика.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="html prettyprint" id="htmlOutput">&lt;ul class="list"&gt;
+   &lt;li&gt;One&lt;/li&gt;
+   &lt;li&gt;Two&lt;/li&gt;
+   &lt;li&gt;Three&lt;/li&gt;
+   &lt;li&gt;Four&lt;/li&gt;
+   &lt;li&gt;Five&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</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('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, функциональная запись, создающая анонимные стили счетчиков.</li>
+</ul>
diff --git a/files/ru/web/css/@counter-style/index.html b/files/ru/web/css/@counter-style/index.html
new file mode 100644
index 0000000000..d93ef88d12
--- /dev/null
+++ b/files/ru/web/css/@counter-style/index.html
@@ -0,0 +1,196 @@
+---
+title: '@counter-style'
+slug: Web/CSS/@counter-style
+tags:
+  - CSS CSS At-rule CSS Counter Styles Reference
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/CSS/@counter-style
+---
+<p style="">{{CSSRef}}</p>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p>The<strong> <code>@counter-style</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> lets authors define specific counter styles that are not part of the predefined set of styles. A <code>@counter-style</code> rule defines how to convert a counter value into a string representation.</p>
+
+<p style="">Initial version of CSS defined a set of useful counter styles. Although more styles where added to this set of predefined styles over the years, this restrictive way proved unable to fulfill the needs of worldwide typography. The <code>@counter-style</code> at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.</p>
+
+<h2 id="Syntax" name="Syntax" style="">Синтаксис</h2>
+
+<h3 id="Дескрипторы" style="">Дескрипторы</h3>
+
+<p>Each <code>@counter-style</code> is identified by a name and has a set of descriptors.</p>
+
+<dl>
+ <dt>{{cssxref("@counter-style/system", "system")}}</dt>
+ <dd>Specifies the algorithm to be used for converting the integer value of a counter to a string representation.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/negative", "negative")}}</dt>
+ <dd>Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt>
+ <dd>Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt>
+ <dd>Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.</dd>
+</dl>
+
+<dl style="">
+ <dt style="">{{cssxref("@counter-style/range", "range")}}</dt>
+ <dd>Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/pad", "pad")}}</dt>
+ <dd>Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt>
+ <dd>Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.</dd>
+</dl>
+
+<dl style="">
+ <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt>
+ <dd style="">Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.<br>
+ <br>
+ The below @counter-style rule uses images instead of character symbols.<br>
+
+ <pre class="brush: css">@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}</pre>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt>
+ <dd>While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on <em>additive tuples</em> described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt>
+ <dd>Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис" style="">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры" style="">Примеры</h2>
+
+<pre class="brush: css">@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}</pre>
+
+<p>The above counter style rule can be applied to lists like this:</p>
+
+<pre class="brush: css">.items {
+   list-style: circled-alpha;
+}
+</pre>
+
+<p style="">Which will produce lists like this:</p>
+
+<p style="">Ⓐ One<br>
+ Ⓑ Two<br>
+ Ⓒ Three<br>
+ Ⓓ Four<br>
+ Ⓔ FIve<br>
+ ....<br>
+ ...<br>
+ Ⓨ Twenty Five<br>
+ Ⓩ Twenty Six</p>
+
+<p>27 Twenty Seven<br>
+ 28 Twenty Eight<br>
+ 29 Twenty Nine<br>
+ 30 Thirty</p>
+
+<p>Checkout more examples on the <a href="https://mdn.github.io/css-counter-style-demo/">demo page</a>.</p>
+
+<h2 id="Specifications" name="Specifications" style="">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="">
+   <td>{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td style="">Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами" style="">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также" style="">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.</li>
+</ul>
diff --git a/files/ru/web/css/@document/index.html b/files/ru/web/css/@document/index.html
new file mode 100644
index 0000000000..f62bddfb79
--- /dev/null
+++ b/files/ru/web/css/@document/index.html
@@ -0,0 +1,82 @@
+---
+title: '@document'
+slug: Web/CSS/@document
+translation_of: Web/CSS/@document
+---
+<div>{{SeeCompatTable}}</div>
+
+<p><strong><code>@document</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a>  <span id="result_box" lang="ru"><span>ограничивает правила стиля, содержащиеся в нем, на основе URL-адреса документа.</span> <span>Он разработан в основном для пользовательских таблиц стилей, хотя он также может использоваться в авторских таблицах стилей.</span></span></p>
+
+<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+</pre>
+
+<h2 id="Синтаксис"><span class="short_text" id="result_box" lang="ru"><span>Синтаксис</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>Правило</span></span> <code>@document</code> <span id="result_box" lang="ru"><span>может указывать одну или несколько подходящих функций.</span> <span>Если какая-либо из функций применяется к данному URL-адресу, это правило вступит в силу для этого URL-адреса.</span> <span>Доступны следующие функции:</span></span></p>
+
+<ul>
+ <li><code>url()</code>, <span class="short_text" id="result_box" lang="ru"><span>который соответствует точному URL-адресу.</span></span></li>
+ <li><code>url-prefix()</code>, <span id="result_box" lang="ru"><span>который совпадает, если URL-адрес документа начинается с указанного значения.</span></span></li>
+ <li><code>domain()</code>, <span id="result_box" lang="ru"><span>который совпадает, если URL-адрес документа находится в предоставленном домене (или его субдомене).</span></span></li>
+ <li><code>media-document()</code>,<span class="short_text" id="result_box" lang="ru"><span>с параметром видео, изображения, плагина или всего.</span></span></li>
+ <li><code>regexp()</code>, <span id="result_box" lang="ru"><span>который совпадает, если URL-адрес документа сопоставляется с предоставленным</span></span> <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">регулярным выражением</a>. <span id="result_box" lang="ru"><span>Выражение должно соответствовать всему URL-адресу.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="ru"><span>Значения, предоставляемые функциям </span></span> <code>url()</code>, <code>url-prefix()</code>, <code>domain()</code>, и <code>media-document()</code> <span id="result_box" lang="ru"><span>могут быть необязательно заключены в одинарные или двойные кавычки.</span> <span>Значения, предоставляемые функции</span></span> <code>regexp()</code> <span id="result_box" lang="ru"><span> должны быть заключены в кавычки.</span></span> .</p>
+
+<p><span id="result_box" lang="ru"><span>Экранированные значения, предоставляемые функции</span></span> <code>regexp()</code> <span id="result_box" lang="ru"><span>акже должны быть экранированы из CSS</span></span>. <span id="result_box" lang="ru"><span>Например,</span></span> <code>.</code> (период) <span id="result_box" lang="ru"><span>соответствует любому символу в регулярных выражениях</span></span>. <span id="result_box" lang="ru"><span>Чтобы соответствовать буквальному периоду, вам сначала нужно избежать этого, используя правила регулярных выражений</span></span> (<code>\.</code>), <span id="result_box" lang="ru"><span> А затем убежать от этой строки с помощью правил CSS </span></span> (<code>\\.</code>).</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: <span id="result_box" lang="ru"><span>Существует версия -moz-prefixed этого свойства </span></span>— <code>@-moz-document</code>. <span id="result_box" lang="ru"><span>Это было ограничено использованием только в пользовательских и UA-листах в Firefox 59 в Nightly and Beta - эксперименте, предназначенном для смягчения потенциальных атак с помощью CSS-инъекций</span></span> ({{bug(1035091)}}).</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@document url(http://www.w3.org/),
+          url-prefix(http://www.w3.org/Style/),
+          domain(mozilla.org),
+          media-document(video),
+          regexp("https:.*") {
+  /* CSS rules here apply to:
+     - The page "http://www.w3.org/"
+     - Any page whose URL begins with "http://www.w3.org/Style/"
+     - Any page whose URL's host is "mozilla.org"
+       or ends with ".mozilla.org"
+     - Any standalone video
+     - Any page whose URL starts with "https:" */
+
+  /* Make the above-mentioned pages really ugly */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Initially</a> in {{SpecName('CSS3 Conditional')}}, <code>@document</code> has been <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">postponed</a> to Level 4.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.document")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li>
+</ul>
+
+<div>{{CSSRef}}</div>
diff --git a/files/ru/web/css/@font-face/font-display/index.html b/files/ru/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..e2e0876cc0
--- /dev/null
+++ b/files/ru/web/css/@font-face/font-display/index.html
@@ -0,0 +1,143 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Дескриптор <code>font-display</code> определяет то, как шрифт, подключенный через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.</p>
+
+<h3 id="Временная_шкала_отображения_шрифтов">Временная шкала отображения шрифтов</h3>
+
+<p>Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта.  Эта временная шкала разделена на три отрезка, приведенных ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.</p>
+
+<dl>
+ <dt>Период блокировки шрифта (Font block period)</dt>
+ <dd>Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен с невидимым запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.</dd>
+ <dt>Период подмены шрифта (Font swap period)</dt>
+ <dd>Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.</dd>
+ <dt>Период отказа шрифта (Font failure period)</dt>
+ <dd>Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css;">/* Значения свойства */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>auto</dt>
+ <dd>Стратегию загрузки шрифта определяет пользовательский агент.</dd>
+ <dt>block</dt>
+ <dd>Для шрифта задается короткий период блокировки и бесконечный период подмены.</dd>
+ <dt>swap</dt>
+ <dd>Для шрифта не задается период блокировки и задается бесконечный период подмены.</dd>
+ <dt>fallback</dt>
+ <dd>Для шрифта задается очень короткий период блокировки и короткий период подмены.</dd>
+ <dt>optional</dt>
+ <dd>Для шрифта задается очень короткий период блокировки и не задается период подмены.</dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css; highlight[7]">@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Font Rendering', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS Font Rendering')}}</td>
+   <td>Исходное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("46.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36)}}<sup>[1]</sup></td>
+   <td>{{CompatSafari(11.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("46.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(37)}}<sup>[1]</sup></td>
+   <td>{{CompatSafari(11.1)}}</td>
+   <td>{{CompatChrome(59.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] За флагом.</p>
+
+<p>[2] Эта возможность доступна, начиная с версии Firefox 46 с настрокой <code>layout.css.font-display.enabled</code>, по умолчанию <code>false</code>.  См. ({{bug(1157064)}}).</p>
diff --git a/files/ru/web/css/@font-face/font-family/index.html b/files/ru/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..39fc326e69
--- /dev/null
+++ b/files/ru/web/css/@font-face/font-family/index.html
@@ -0,0 +1,67 @@
+---
+title: font-family
+slug: Web/CSS/@font-face/font-family
+tags:
+  - Шрифты
+  - дескрипторы
+translation_of: Web/CSS/@font-face/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS дескриптор <strong><code>font-family</code></strong> позволяет авторам указывать font family для шрифта, указанного в правиле {{cssxref("@font-face")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* &lt;string&gt; значения */
+font-family: "font family";
+font-family: 'another font family';
+
+/* &lt;custom-ident&gt; значение */
+font-family: examplefont;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>Указывает имя font family.</dd>
+</dl>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Fonts', '#font-family-desc', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face.font-family")}}</p>
diff --git a/files/ru/web/css/@font-face/index.html b/files/ru/web/css/@font-face/index.html
new file mode 100644
index 0000000000..7ae73142db
--- /dev/null
+++ b/files/ru/web/css/@font-face/index.html
@@ -0,0 +1,206 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - '@font-face'
+  - At-rule
+  - CSS
+  - CSS Fonts
+  - NeedsTranslation
+  - Reference
+  - типографика
+translation_of: Web/CSS/@font-face
+---
+<div><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> <font>позволяет указать </font><font>шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция </font><code>local()</code>, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции <code>url()</code>.</div>
+
+<div> </div>
+
+<div><code>@font-face</code> позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом. </div>
+
+<div> </div>
+
+<div>Распространенным случаем является одновременное использование <code>url()</code> и <code>local()</code>, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.</div>
+
+<div> </div>
+
+<div><font>Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого </font> <a href="/en-US/docs/CSS/At-rule">@-правила</a>.</div>
+
+<pre class="brush: css no-line-numbers">@font-face {
+ font-family: "Open Sans";
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>Значение {{cssxref("font-stretch")}}.</dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>Значение {{cssxref("font-style")}}.</dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>Значение {{cssxref("font-weight")}}.</dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>Значение {{cssxref("font-variant")}}.</dd>
+ <dt>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>Позволяет контролировать другие расширенные особенности OpenType-шрифтов.</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd><font>Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.<br>
+ <br>
+ Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции <code>format()</code>:</font><br>
+
+ <pre><code>src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("opentype");</code>
+</pre>
+
+ <p>Список доступных форматов: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, и <code>"svg"</code>.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>Диапазон Unicode кодов, который будет использоваться в шрифте.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Смотреть живой пример</a></p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold"; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием "MgOpenModernaBold.ttf":</p>
+
+<pre class="brush: css">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="MIME-типы_шрифтов">MIME-типы шрифтов</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>Формат</th>
+   <th>MIME-тип</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TrueType</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td>OpenType</td>
+   <td><code>font/otf</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format 2</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Заметки">Заметки</h2>
+
+<ul>
+ <li>Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью <a href="/ru/docs/Словарь/CORS">CORS</a>.</li>
+ <li>@font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
+  <pre class="brush: css; example-bad">.className {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+        url(MgOpenModernaBold.ttf);
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>Спецификация нового формата шрифта с новым алгоритмом сжатия</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Спецификация формата шрифта</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WOFF">About WOFF</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+</ul>
+
+<p>{{CSSRef}}</p>
diff --git a/files/ru/web/css/@font-feature-values/index.html b/files/ru/web/css/@font-feature-values/index.html
new file mode 100644
index 0000000000..5b47c95373
--- /dev/null
+++ b/files/ru/web/css/@font-feature-values/index.html
@@ -0,0 +1,88 @@
+---
+title: '@font-feature-values'
+slug: Web/CSS/@font-feature-values
+translation_of: Web/CSS/@font-feature-values
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule" title="At-rule">правило</a> <strong><code>@font-feature-values</code></strong> позволяет использовать общее имя в свойстве {{cssxref("font-variant-alternates")}} для функций, которые по разному активируются в OpenType. Это может помочь упростить ваш CSS при использовании нескольких шрифтов.</p>
+
+<pre class="brush: css">/* Правило для "хорошего стиля" в Font One */
+@font-feature-values Font One {
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+/* Правило для "хорошего стиля" в Font Two */
+@font-feature-values Font Two {
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+
+/* Применение правилоа с единственым объявлением */
+.nice-look {
+  font-variant-alternates: styleset(nice-style);
+}
+</pre>
+
+<p>Правило <code>@font-feature-values</code> может использоваться как на вернем уровне вашего CSS так и внутри любого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">условного CSS правила</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Блоки_значений_функций">Блоки значений функций</h3>
+
+<dl>
+ <dt><a name="@swash"><code>@swash</code></a></dt>
+ <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "swash()", "#swash()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции swash допускает только одно значение: <code>ident1: 2</code> является действительным, но <code>ident2: 2 4</code> нет.</dd>
+ <dt><a name="@annotation"><code>@annotation</code></a></dt>
+ <dd>Устанавливает имя фунции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции допускает только одно значение: <code>ident1: 2</code> действительным , но <code>ident2: 2 4</code> нет.</dd>
+ <dt><a name="@ornaments"><code>@ornaments</code></a></dt>
+ <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции ornaments допускает только одно значение: <code>ident1: 2</code> является действительным, но <code>ident2: 2 4</code> нет.</dd>
+ <dt><a name="@stylistic"><code>@stylistic</code></a></dt>
+ <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylistic feature value definition allows only one value: <code>ident1: 2</code> is valid, but <code>ident2: 2 4</code> isn't.</dd>
+ <dt><a name="@styleset"><code>@styleset</code></a></dt>
+ <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylset feature value definition allows an unlimited number of values: <code>ident1: 2 4 12 1</code> maps to the OpenType values <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, and <code>ss01</code>. Note that values higher than <code>99</code> are valid, but don't map to any OpenType values and are ignored.</dd>
+ <dt><a name="@character-variant"><code>@character-variant</code></a></dt>
+ <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} functional notation of {{cssxref("font-variant-alternates")}}. A character-variant feature value definition allows either one or two values: <code>ident1: 3</code> maps to <code>cv03=1</code>, and <code>ident2: 2 4</code> maps to <code>cv02=4</code>, but <code>ident2: 2 4 5</code> is invalid.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксиси">Формальный синтаксиси</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.at-rules.font-feature-values")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определенные этим правилом.</li>
+</ul>
diff --git a/files/ru/web/css/@media/index.html b/files/ru/web/css/@media/index.html
new file mode 100644
index 0000000000..93f12082be
--- /dev/null
+++ b/files/ru/web/css/@media/index.html
@@ -0,0 +1,384 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+translation_of: Web/CSS/@media
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>At-правило <code>@media</code> в <a href="/ru/docs/Web/CSS">CSS</a> связывает набор операторов, ограниченных фигурными скобками, в CSS блок, применяется при соблюдении условия одного или нескольких <a href="/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиазапросов</a>.</p>
+
+<div class="blockIndicator note">
+<p>В JavaScript, at-правило <code>@media</code> может быть получено с помощью {{domxref("CSSMediaRule")}}, интерфейса объектной модели CSS.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>At-правило <code>@media</code> можно разместить не только на верхнем уровне CSS, но и внутри любого фрагмента <a href="/ru/docs/Web/CSS/At-rule#Conditional_group_rules">условной группы-правил</a>.</p>
+
+<pre class="brush: css"><code>/* На верхнем уровне кода */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Вложено в другое условное at-правило */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}</code></pre>
+
+<p>Для рассмотрения синтаксиса медиазапросов, см. <a href="/ru/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">Использование медиазапросов</a>.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>A <code>&lt;media-query&gt;</code> is composed of a optional media type and/or a number of media features.</p>
+
+<h2 id="Media_types" name="Media_types">Типы</h2>
+
+<dl>
+ <dt>all</dt>
+ <dd>Подходит для всех устройств.</dd>
+ <dt>print</dt>
+ <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd>
+ <dt>screen</dt>
+ <dd>Предназначен в первую очередь для цветных компьютерных экранов.</dd>
+ <dt>speech</dt>
+ <dd>Предназначен для синтезаторов речи.</dd>
+</dl>
+
+<div class="note"><strong>Примечание:</strong> CSS2.1 и Media Queries 3 определили несколько дополнительных зачений (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), но они устарели в <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> и не рекомендуется к использованию.</div>
+
+<h2 id="Media_features" name="Media_features">Media Features</h2>
+
+<p>Each <em>media feature</em> tests for one specific feature of the browser or device.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Имя</th>
+   <th>Summary</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
+   <td>Viewport width</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
+   <td>Viewport height</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
+   <td>Width-to-height aspect ratio of the viewport</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
+   <td>Orientation of the viewport</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
+   <td>Pixel density of the output device</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
+   <td>Scanning process of the output device</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
+   <td>Is the device a grid or bitmap?</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
+   <td>How quickly (if at all) can the output device modify the appearance of the content</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
+   <td>How does the output device handle content that overflows the viewport along the block axis?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
+   <td>Can content that overflows the viewport along the inline axis be scrolled?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
+   <td>Number of bits per color component of the output device, or zero if the device isn't color.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
+   <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td>
+   <td>The display mode of the application, as specified in the web app manifest's <a href="/en-US/docs/Web/Manifest#display">display member</a>.</td>
+   <td>Defined in the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
+   <td>Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
+   <td>Is the user agent or underlying OS inverting colors?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
+   <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
+   <td>Does the primary input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
+   <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
+   <td>Does any available input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
+   <td>Current ambient light level</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
+   <td>Is scripting (e.g. JavaScript) available?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
+   <td>Width of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
+   <td>Height of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
+   <td>Width-to-height aspect ratio of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
+   <td>Number of physical device pixels per CSS pixel</td>
+   <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 3D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit/Blink-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 2D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("transition")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("animation")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('Compat', '#css-media-queries', 'CSS Media Queries')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Стандартизация <code>-webkit-device-pixel-ratio</code> и <code>-webkit-transform-3d</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Определяет базовый синтаксис правила <code>@media</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p>Добавлены <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code> и <code>overflow-inline</code>.<br>
+     Исключены все media типы за исключением <code>screen</code>, <code>print</code>, <code>speech</code>, и <code>all</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Нет изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка(<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>6.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.2</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(47) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
+ <li>The CSSOM {{ domxref("CSSMediaRule") }} associated with this at-rule.</li>
+</ul>
diff --git a/files/ru/web/css/@media/inverted-colors/index.html b/files/ru/web/css/@media/inverted-colors/index.html
new file mode 100644
index 0000000000..f56c90108b
--- /dev/null
+++ b/files/ru/web/css/@media/inverted-colors/index.html
@@ -0,0 +1,83 @@
+---
+title: inverted-colors
+slug: Web/CSS/@media/inverted-colors
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Reference
+  - media feature
+translation_of: Web/CSS/@media/inverted-colors
+---
+<div>{{cssref}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <code><strong>inverted-colors</strong></code> может использоваться для проверки, инвертирует ли {{glossary("user agent")}} или ОС цвета.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>inverted-colors</code> указана в качестве значения ключевого слова, выбранного из списка ниже.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Цвета отображаются нормально.</p>
+ </dd>
+ <dt><code>inverted</code></dt>
+ <dd>Все пиксели в отображаемой области были инвертированы.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия желтого по черному). Если нет, он должен быть красным на светло-сером.&lt;/p&gt;
+&lt;p&gt;Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Отложено до Media Queries Level 5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.inverted-colors")}}</p>
diff --git a/files/ru/web/css/@media/orientation/index.html b/files/ru/web/css/@media/orientation/index.html
new file mode 100644
index 0000000000..723c964b8f
--- /dev/null
+++ b/files/ru/web/css/@media/orientation/index.html
@@ -0,0 +1,90 @@
+---
+title: Ориентация
+slug: Web/CSS/@media/orientation
+translation_of: Web/CSS/@media/orientation
+---
+<div>{{cssref}}</div>
+
+<p><a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">медиа-функции</a> <strong><code>orientation</code></strong> может использоваться для проверки ориентации области {{glossary("просмотра")}} (или поля страницы для <a href="/en-US/docs/Web/CSS/Paged_media">медийных страниц</a>).</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Эта функция не соответствует ориентации <em>устройства</em>. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведет к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>orientation</code> указывается в качестве значения ключевого слова, выбранного из списка ниже.</p>
+
+<h3 id="Значения_ключевых_слов">Значения ключевых слов</h3>
+
+<dl>
+ <dt><code>portrait</code></dt>
+ <dd>Окно просмотра находится в портретной ориентации, то есть высота больше или равна ширине.</dd>
+ <dt><code>landscape</code></dt>
+ <dd>Окно просмотра находится в альбомной ориентации, то есть ширина больше высоты.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Вставка 1&lt;/div&gt;
+&lt;div&gt;Вставка 2&lt;/div&gt;
+&lt;div&gt;Вставка 3&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Характеристики">Характеристики</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('CSS4 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Бе изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.orientation")}}</p>
diff --git a/files/ru/web/css/@media/prefers-color-scheme/index.html b/files/ru/web/css/@media/prefers-color-scheme/index.html
new file mode 100644
index 0000000000..d857696181
--- /dev/null
+++ b/files/ru/web/css/@media/prefers-color-scheme/index.html
@@ -0,0 +1,96 @@
+---
+title: prefers-color-scheme
+slug: Web/CSS/@media/prefers-color-scheme
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - prefers-color-scheme
+translation_of: Web/CSS/@media/prefers-color-scheme
+---
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <strong><code>prefers-color-scheme</code></strong> может использоваться для определения того, светлую или тёмную тему использует пользователь в операционной системе.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Указывает, что пользователь не сделал никаких предпочтений, известных системе. Значение этого ключевого слова оценивается как <code>false</code> в <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context">логическом контексте</a>.</dd>
+ <dt><code><dfn>light</dfn></code></dt>
+ <dd>Указывает, что пользователь выбрал светлую тему в операционной системе.</dd>
+ <dt><code><dfn>dark</dfn></code></dt>
+ <dd>Указывает, что пользователь выбрал тёмную тему в операционной системе.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В этом примере используется элемент с черным фоном и белым текстом, если пользователь выбрал светлую тему в операционной системе, то цвета будут инвертированы.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="day"&gt;Day (initial)&lt;/div&gt;
+&lt;div class="day light-scheme"&gt;Day (changes in light scheme)&lt;/div&gt;
+&lt;div class="day dark-scheme"&gt;Day (changes in dark scheme)&lt;/div&gt; &lt;br&gt;
+
+&lt;div class="night"&gt;Night (initial)&lt;/div&gt;
+&lt;div class="night light-scheme"&gt;Night (changes in light scheme)&lt;/div&gt;
+&lt;div class="night dark-scheme"&gt;Night (changes in dark scheme)&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Примеры")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</p>
+   </td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Редизайн вашего продукта и сайта для тёмного режима</a>(en)</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>
diff --git a/files/ru/web/css/@media/prefers-reduced-motion/index.html b/files/ru/web/css/@media/prefers-reduced-motion/index.html
new file mode 100644
index 0000000000..b7f007c5a9
--- /dev/null
+++ b/files/ru/web/css/@media/prefers-reduced-motion/index.html
@@ -0,0 +1,158 @@
+---
+title: prefers-reduced-motion
+slug: Web/CSS/@media/prefers-reduced-motion
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Reference
+  - media feature
+translation_of: Web/CSS/@media/prefers-reduced-motion
+---
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <code><strong>prefers-reduced-motion</strong></code> может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Указывает, что пользователь не сделал никаких предпочтений, известных системе.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>Указывает, что пользователь уведомил ОС, что он предпочитает интерфейс, который минимизирует количество движения или анимации, предпочтительно до точки, где удаляются все несущественные движения.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В этом примере присутствует раздражающая анимация, если вы не включите «Уменьшить движение» в настройках доступности.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+    -webkit-animation: none;
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">.animation {
+  background-color: rebeccapurple;
+  color: #fff;
+  font: 1.2em Helvetica, arial, sans-serif;
+  width: 200px;
+  padding: 1em;
+  border-radius: 1em;
+  text-align: center;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2018-9-2 13:47:0
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation vibrate-1
+ * ----------------------------------------
+ */
+@-webkit-keyframes vibrate {
+  0% {
+    -webkit-transform: translate(0);
+            transform: translate(0);
+  }
+  20% {
+    -webkit-transform: translate(-2px, 2px);
+            transform: translate(-2px, 2px);
+  }
+  40% {
+    -webkit-transform: translate(-2px, -2px);
+            transform: translate(-2px, -2px);
+  }
+  60% {
+    -webkit-transform: translate(2px, 2px);
+            transform: translate(2px, 2px);
+  }
+  80% {
+    -webkit-transform: translate(2px, -2px);
+            transform: translate(2px, -2px);
+  }
+  100% {
+    -webkit-transform: translate(0);
+            transform: translate(0);
+  }
+}
+@keyframes vibrate {
+  0% {
+    -webkit-transform: translate(0);
+            transform: translate(0);
+  }
+  20% {
+    -webkit-transform: translate(-2px, 2px);
+            transform: translate(-2px, 2px);
+  }
+  40% {
+    -webkit-transform: translate(-2px, -2px);
+            transform: translate(-2px, -2px);
+  }
+  60% {
+    -webkit-transform: translate(2px, 2px);
+            transform: translate(2px, 2px);
+  }
+  80% {
+    -webkit-transform: translate(2px, -2px);
+            transform: translate(2px, -2px);
+  }
+  100% {
+    -webkit-transform: translate(0);
+            transform: translate(0);
+  }
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
+
+<h2 id="See_also" name="See_also"><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight#See_also">Смотрите также</a></h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An introduction to the reduced motion media query</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>
diff --git a/files/ru/web/css/@media/scripting/index.html b/files/ru/web/css/@media/scripting/index.html
new file mode 100644
index 0000000000..92fcbf3192
--- /dev/null
+++ b/files/ru/web/css/@media/scripting/index.html
@@ -0,0 +1,83 @@
+---
+title: scripting
+slug: Web/CSS/@media/scripting
+translation_of: Web/CSS/@media/scripting
+---
+<div>{{cssref}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <code><strong>scripting</strong></code> может использоваться для проверки доступности скриптов (таких как JavaScript)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code><strong>scripting</strong></code> указывается в качестве значения ключевого слова, выбранного из списка ниже.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Скрипты полностью недоступны в текущем документе.</dd>
+ <dt><code>initial-only</code></dt>
+ <dd>Скрипты включаются во время начальной загрузки страницы, но не после.</dd>
+ <dt><code>enabled</code></dt>
+ <dd>Скрипты поддерживаются и активны в текущем документе.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="script-none"&gt;You do not have scripting available. :-(&lt;/p&gt;
+&lt;p class="script-initial-only"&gt;Your scripting is only enabled during the initial page load. Weird.&lt;/p&gt;
+&lt;p class="script-enabled"&gt;You have scripting enabled! :-)&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Отложено до Media Queries Level 5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.scripting")}}</p>
diff --git a/files/ru/web/css/@namespace/index.html b/files/ru/web/css/@namespace/index.html
new file mode 100644
index 0000000000..bf0f745263
--- /dev/null
+++ b/files/ru/web/css/@namespace/index.html
@@ -0,0 +1,131 @@
+---
+title: '@namespace'
+slug: Web/CSS/@namespace
+tags:
+  - Неймспейсы
+  - Пространства имён
+translation_of: Web/CSS/@namespace
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>@namespace</code> - это правила (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a>) определяющие <a href="https://developer.mozilla.org/en-US/docs/Namespaces">пространства имён XML</a>, которые будут использованы в <a href="https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet">таблице стилей</a>. Они применяются чтобы ограничить CSS селекторы только элементами принадлежащими конкретному пространству имён. Namespace'ы полезны, в основном, когда идёт взаимодействие с документами содержащими множество неймспейсов, такими как HTML5 со встроенным SVG, MathML или XML.</p>
+
+<pre class="brush: css"><code>@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* This matches all XHTML &lt;a&gt; elements, as XHTML is the default unprefixed namespace */
+a {}
+
+/* This matches all SVG &lt;a&gt; elements */
+svg|a {}
+
+/* This matches both XHTML and SVG &lt;a&gt; elements */
+*|a {}</code></pre>
+
+<p>Любое <code>@namespace</code> правило обязано следовать всем <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%40charset">@charset</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%40import">@import</a> правилам, а так же всем <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration">описаниям стилей</a> в таблице стилей.</p>
+
+<p><code>@namespace</code> может быть использован для определения стандартного пространства имён для конкретной таблице стилей. Когда стандартное пространство имён определено, все селекторы (но не атрибуты селекторов, смотрите заметку ниже) применяются только к элементам в этом неймспейсе.</p>
+
+<p><code>@namespace</code> правила можно использовать для определения префиксов имён. Когда селектор имеет префикс, он будет выбирать элементы совпадающие по неймспейсу и именам или атрибутам.</p>
+
+<p>В <a href="/ru/docs/HTML/HTML5">HTML5</a> существуют <a href="https://html.spec.whatwg.org/#foreign-elements">сторонние элементы</a> которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML элементы будут действовать так, как если бы они находились в пространстве имён (<code>http://www.w3.org/1999/xhtml</code>), также если они не имеют <code>xmlns</code> аттрибута где-либо в документе, то такие элементы как <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/SVG">&lt;svg&gt;</a> и <a href="/ru/docs/Web/MathML/Element/math">&lt;math&gt;</a> будут ассоциироваться с их стандартными пространствами имён (<code>http://www.w3.org/2000/svg</code> and <code>http://www.w3.org/1998/Math/MathML</code>).</p>
+
+<div class="blockIndicator note">
+<p>Заметка: В XML, если префикс отличается от атрибута (Например, <code>xlink:href</code>), то аттрибут не будет иметь неймспейса. Другими словами, аттрибуты не могут наследовать пространство имён элемента в котором они находятся.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css"><code>/* Default namespace */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* Prefixed namespace */
+@namespace prefix url(XML-namespace-URL);
+@namespace prefix "XML-namespace-URL";</code></pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="brush: css">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
+   <td>{{Spec2('CSS3 Namespaces')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>9.0</td>
+   <td>8.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Namespace selector (|)</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>9.0</td>
+   <td>8.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/@page/index.html b/files/ru/web/css/@page/index.html
new file mode 100644
index 0000000000..31ac993dba
--- /dev/null
+++ b/files/ru/web/css/@page/index.html
@@ -0,0 +1,103 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - Верстка
+  - печать
+  - страница
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<p>Правило CSS <strong><code>@page</code></strong> используется для модификации некоторых свойств CSS при печати документа.<strong> </strong>Вы не можете изменить все CSS свойства с <code>@page</code>. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.</p>
+
+<pre class="brush: css no-line-numbers">@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}</pre>
+
+<p>Правило <code>@page</code> доступно через интерфейс объектной модели CSS {{domxref("CSSPageRule")}}.</p>
+
+<div class="note"><strong>Примечание:</strong> В W3C iобсуждают, как обрабатывать связанные с областью просмотра единицы {{cssxref("&lt;length&gt;")}} такие как, <code>vh</code>, <code>vw</code>, <code>vmin</code>, и <code>vmax</code>. Тем временем не используя их с правилом <code>@page</code>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Дескрипторы">Дескрипторы</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>Указывает целевой размер и ориентацию полей страницы, содержащихся в блоке. В общем случае, когда одно поле страницы отображается на одном листе страницы, он также определяет размер и ориентацию листа страницы.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
+ <dd>Добавляет обрезку и/или регистрационные отметки в документ.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>Определяет степень заступа за пределы поля страницы, при котором отображаемая область страницы отрезается.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Пожалуйста, обратитесь к различным <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">плевдоклассам</a> <code>@page</code> для примеров.</p>
+
+<ul>
+ <li>{{Cssxref(":blank")}}</li>
+ <li>{{Cssxref(":first")}}</li>
+ <li>{{Cssxref(":left")}}</li>
+ <li>{{Cssxref(":right")}}</li>
+ <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Добавлены селекторы страницы <code>:recto</code> и <code>:verso</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Нет изменений для {{SpecName('CSS2.1')}}, хотя больше правил CSS можно использовать внутри <code>@page</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.at-rules.page")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Смотрите тикет <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> в Bugzilla для отслеживания прогресса по теме (базовый страничный счетчик, и т.д.)</li>
+</ul>
diff --git a/files/ru/web/css/@supports/index.html b/files/ru/web/css/@supports/index.html
new file mode 100644
index 0000000000..98af6f9d2f
--- /dev/null
+++ b/files/ru/web/css/@supports/index.html
@@ -0,0 +1,192 @@
+---
+title: '@supports'
+slug: Web/CSS/@supports
+translation_of: Web/CSS/@supports
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p style="">The <code>@supports</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a <em>supports condition</em>.</p>
+
+<p style=""><code>@supports</code> gives CSS the ability to perform a <em>feature query</em>.</p>
+
+<p>The <code>@supports</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> and can be accessed via the CSS object model interface {{domxref("CSSSupportsRule")}}.</p>
+
+<h2 id="Syntax" name="Syntax" style="">Синтаксис</h2>
+
+<p style="">A supports condition consists of one or several declarations combined by different logical operators. Precedence of operators can be overruled by using parentheses.</p>
+
+<h3 id="Синтаксис_объявления" style=""><span class="short_text" id="result_box" lang="ru"><span class="hps">Синтаксис объявления</span></span></h3>
+
+<p>The simplest expression is a CSS declaration, that is a CSS property name followed by a value, separated by a colon. The following expression</p>
+
+<pre class="brush:css">( transform-origin: 5% 5% )</pre>
+
+<p>returns true if the {{ cssxref("transform-origin") }} implements a syntax considering <code>5% 5%</code> as valid.</p>
+
+<p>A CSS declaration is always surrounded by parentheses.</p>
+
+<h3 id="Оператор_not" style="">Оператор not</h3>
+
+<p>The <code>not</code> operator can precede any expression to create a new expression, resulting in the negation of the original expression. The following expression</p>
+
+<pre class="brush:css">not ( transform-origin: 10em 10em 10em )</pre>
+
+<p>returns true if {{ cssxref("transform-origin") }} doesn't implement a syntax considering <code>10em 10em 10em</code> as valid.</p>
+
+<p>Like any operator, the <code>not</code> operator can be applied to a declaration of any complexity. The following examples are all valid expressions:</p>
+
+<pre class="brush:css">not ( not ( transform-origin: 2px ) )
+(display: flexbox) and ( not (display: inline-grid) )</pre>
+
+<div class="note style-wrap">
+<p style=""><strong>Предупреждение:</strong> there is no need to enclose the <code>not</code> operator between two parentheses when at the top level. To combine it with other operators, like <code>and</code> and <code>or</code>, the parentheses are required.</p>
+</div>
+
+<h3 id="Оператор_and" style="">Оператор and</h3>
+
+<p style="">From two expressions, the <code>and</code> operator creates a new expression consisting in the conjunction of the two original ones; the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:</p>
+
+<pre class="brush:css">(display: table-cell) and (display: list-item)</pre>
+
+<p>Several conjunctions can be juxtaposed without the need of more parentheses:</p>
+
+<pre class="brush:css">(display: table-cell) and (display: list-item) and (display:run-in)</pre>
+
+<p>is equivalent to:</p>
+
+<pre class="brush:css">(display: table-cell) and ((display: list-item) and (display:run-in))</pre>
+
+<h3 id="Оператор_or" style="">Оператор or</h3>
+
+<p>From two expressions, the <code>or</code> operator creates a new expression consisting in the disjunction of the two original ones; the resulting expression is true if one, or both, of the original expressions also resolves to true. In this example, the complete expression resolves to true if at least one of the two expressions is true:</p>
+
+<pre class="brush:css;">( transform-style: preserve ) or ( -moz-transform-style: preserve )</pre>
+
+<p>Several disjunctions can be juxtaposed without the need of more parentheses:</p>
+
+<pre class="brush:css">( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )</pre>
+
+<p>is equivalent to:</p>
+
+<pre class="brush:css">( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
+(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))</pre>
+
+<div class="note style-wrap">
+<p style=""><strong>Предупреждение</strong>: when using both <code>and</code> and <code>or</code> operators, the parentheses must be used in order to define the order in which they apply. If not, the condition is invalid leading to the whole at-rule to be ignored.</p>
+</div>
+
+<h3 id="Формальный_синтаксис" style="">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры" style="">Примеры</h2>
+
+<h3 id="Тестирование_заданного_свойства" style="">Тестирование заданного свойства</h3>
+
+<pre class="brush:css;">@supports (animation-name: test) {
+    … /* specific CSS applied when animations are supported unprefixed */
+    @keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */
+      …
+    }
+}
+</pre>
+
+<h3 id="Тестирование_заданного_свойства_или_его_версии_с_префиксом" style="">Тестирование заданного свойства или его версии с префиксом</h3>
+
+<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* specific CSS applied when 3D transforms, eventually prefixed, are supported */
+}
+</pre>
+
+<h3 id="Тестирование_неподдерживаемого_или_специфического_свойства" style="">Тестирование неподдерживаемого или специфического свойства</h3>
+
+<pre class="brush:css;">@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* specific CSS applied to simulate text-align-last:justify */
+}</pre>
+
+<h2 id="Спецификации" style="">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="">
+   <td>{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}</td>
+   <td style="">{{ Spec2('CSS3 Conditional') }}</td>
+   <td style="">Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(28.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoDesktop("22") }} [1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.1</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("22") }} [1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.1</td>
+   <td>9</td>
+   <td>{{CompatChrome(28.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 17 to Gecko 21 supported this feature only if the user enables it by setting the config value <code>layout.css.supports-rule.enabled</code> to <code>true</code>.</p>
+
+<h2 id="Смотрите_также" style="">Смотрите также</h2>
+
+<ul>
+ <li>The CSSOM class {{ domxref("CSSSupportsRule") }}, and the {{ domxref("CSS.supports") }} method that allows to perform the same check via JavaScript.</li>
+</ul>
diff --git a/files/ru/web/css/@viewport/index.html b/files/ru/web/css/@viewport/index.html
new file mode 100644
index 0000000000..68a306a547
--- /dev/null
+++ b/files/ru/web/css/@viewport/index.html
@@ -0,0 +1,162 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - Adaptation
+  - At-rule
+  - CSS
+  - Device
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/@viewport
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p><strong><code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> cсодержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Коэффициент масштабирования, равный 1,0 или 100%, соответствует отсутствию масштабирования. Увеличьте масштаб больших значений. Меньшие значения уменьшаются</p>
+
+<h3 id="Дескриптор">Дескриптор</h3>
+
+<p>Браузеры должны игнорировать непризнанные дескрипторы.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>Используется при определении ширины видового экрана при первом отображении документа.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>Используется при определении ширины видового экрана при первом отображении документа.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd>Сокращенный дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd>Сокращенный дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>Устанавливает начальный коэффициент масштабирования.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>Устанавливает минимальный коэффициент масштабирования.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>Устанавливает максимальный коэффициент масштабирования.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>Управляет тем, должен ли пользователь иметь возможность изменять коэффициент масштабирования.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dt>Управляет ориентацией документа.</dt>
+ <dd></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример:</h2>
+
+<pre class="eval" style="font-size: 14px;">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<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('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами:</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>29 (behind a flag) [4]</td>
+   <td>{{CompatNo()}} [2]</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>10{{property_prefix("-ms")}}[1]</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] существует ошибка в IE Mobile 10 и на более старых версиях Windows Phone 8, где<code>device-width</code>, при использовании внутри <code>@-ms-viewport</code>, оценивает ширину экрана в физических пикселях, а не в нормализованных CSS-пикселях, что неверно в соответствии со спецификацией. Однако, при использовании в<code>viewport</code> {{HTMLElement("meta")}} тэг, <code>device-width</code> оценивает правильно. По данным Microsoft, эта ошибка была исправлена в <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Windows Phone 8 Update 3 (a.k.a. GDR3)</a>, хотя есть некоторые сообщения о том, что <a href="http://www.nokia.com/us-en/windows-phone-black-update/">Lumia Black</a> Обновление GDR3 не исправило ошибку (по крайней мере, на Lumia 920). Для получения более подробной информации и обходного пути, <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">see Tim Kadlec's blog post "Windows Phone 8 and Device-Width"</a>.</p>
+
+<p>[2]: See {{bug(747754, 'summary')}}</p>
+
+<p>[3]: See {{webkitbug(95959)}}</p>
+
+<p>[4]: See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=235457">Chromium issue #235457: Enable @viewport on all platforms</a></p>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
+</ul>
diff --git a/files/ru/web/css/@viewport/user-zoom/index.html b/files/ru/web/css/@viewport/user-zoom/index.html
new file mode 100644
index 0000000000..5da0d1ec96
--- /dev/null
+++ b/files/ru/web/css/@viewport/user-zoom/index.html
@@ -0,0 +1,105 @@
+---
+title: user-zoom
+slug: Web/CSS/@viewport/user-zoom
+translation_of: Web/CSS/@viewport
+---
+<div>{{ CSSRef }}</div>
+
+<h2 id="Summary" name="Summary">Введение</h2>
+
+<p>The <code>user-zoom</code> <a href="/en-US/docs/Web/CSS">CSS</a> descriptor controls whether or not the user should be able to change the zoom factor of a document defined by {{cssxref("@viewport")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Keyword values */
+user-zoom: zoom;
+user-zoom: fixed;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>zoom</code></dt>
+ <dd>The user can zoom in or out.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>The user cannot zoom in or out.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/css/_colon_-moz-focusring/index.html b/files/ru/web/css/_colon_-moz-focusring/index.html
new file mode 100644
index 0000000000..02c26e1b68
--- /dev/null
+++ b/files/ru/web/css/_colon_-moz-focusring/index.html
@@ -0,0 +1,94 @@
+---
+title: ':-moz-focusring'
+slug: 'Web/CSS/:-moz-focusring'
+tags:
+  - Фокус
+  - псевдокласс
+translation_of: 'Web/CSS/:-moz-focusring'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Псевдокласс <strong>:-moz-focusring</strong> является расширением браузера Mozilla, которое подобно псевдоклассу {{cssxref (":focus")}}, но взаимодействует только с элементом при наличии у него фокуса. При этом рамка фокуса или другой индикатор располагается вокруг элемента.</p>
+
+<p>Если :-moz-focusring распознается конкретной платформой, то и <strong>:focus</strong> тоже. Однако обратное не всегда верно и зависит от того, активированы ли пользовательские настройки для отрисовки фокуса и как именно действует фокус по отношению к этому элементу. Независимо от того, имеют ли место пользовательские настройки отрисовки фокуса, многое также зависит от настроек операционной системы и других факторов. В связи с этим точное поведение этого псевдокласса может варьироваться от платформы к платформе.</p>
+
+<blockquote>
+<p><strong>Примечание.</strong> Разработчики склонны использовать псевдокласс      <strong>:-moz-focusring</strong> для различия между состояниями фокуса, когда пользователь активирует фокусировку с помощью мыши и клавиатуры. Это также потенциально полезно при создании пользовательского элемента с последующим намерением изменить его стиль на основе его поведения.</p>
+</blockquote>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">:-moz-focusring</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Для определения внешнего вида элемента во время фокусировки на нем можно использовать этот псевдоселектор следующим образом:</p>
+
+<pre class="brush: css">mybutton:-moz-focusring {
+  outline: 2px dotted;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Этот псевдокласс пока еще не определен ни в одной спецификации, хотя и прошел этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.</p>
+
+<h2 id="Совметимость_с_браузерами">Совметимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{bug("418521")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_-moz-only-whitespace/index.html b/files/ru/web/css/_colon_-moz-only-whitespace/index.html
new file mode 100644
index 0000000000..af4a49d63a
--- /dev/null
+++ b/files/ru/web/css/_colon_-moz-only-whitespace/index.html
@@ -0,0 +1,90 @@
+---
+title: ':blank'
+slug: 'Web/CSS/:-moz-only-whitespace'
+tags:
+  - ':blank'
+  - CSS
+  - Псевдо-класс
+  - Экспериментальное
+  - селектор
+translation_of: 'Web/CSS/:-moz-only-whitespace'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS псевдо класс</a>  <strong><code>:blank</code></strong> находит элементы, у которых либо вообще нет дочерних узлов, либо только пустые текстовые узлы, либо только текстовые узлы, содержащие только пробельные символы.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;div&gt; &lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css;">:root {
+  overflow: hidden;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+div {
+  background-color: #ccc;
+  box-sizing: border-box;
+  height: 100vh;
+  min-height: 16px;
+  min-height: 1rem;
+}
+
+:-moz-only-whitespace {
+  border-color: lime;
+}</pre>
+</div>
+
+<pre class="brush: css;">div {
+  border: 4px solid red;
+}
+
+:blank {
+  border-color: lime;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", "50")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Определен впервые</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите содействовать в пополнении данных, пройдите по ссылке <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("css.selectors.blank")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":empty")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_active/index.html b/files/ru/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..f5915b631f
--- /dev/null
+++ b/files/ru/web/css/_colon_active/index.html
@@ -0,0 +1,120 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - Псевдоклассы
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">Псевдокласс</a> <strong><code>:active</code></strong> соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.</p>
+
+<pre class="brush: css">/*  Любой элемент &lt;a&gt;, который будет активирован */
+a:active {
+  color: red;
+}</pre>
+
+<p>Также псевдокласс <code>:active</code> срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов {{HTMLElement("a")}} и {{HTMLElement("button")}}, но может применяться и к другим элементам.</p>
+
+<p>Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как <span style="line-height: 1.5;">{{cssxref(":link")}}, {{cssxref(":hover")}} и {{cssxref(":visited")}}, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило </span><code style="font-style: normal; line-height: 1.5;">:active</code><span style="line-height: 1.5;"> после всех других правил, относящихся к ссылке, как определено правилом </span><em>LVHA-порядком</em><span style="line-height: 1.5;">: </span><code style="font-style: normal; line-height: 1.5;">:link</code><span style="line-height: 1.5;"> — </span><code style="font-style: normal; line-height: 1.5;">:visited</code><span style="line-height: 1.5;"> — </span><code style="font-style: normal; line-height: 1.5;">:hover</code><span style="line-height: 1.5;"> — </span><code style="font-style: normal; line-height: 1.5;">:active</code><span style="line-height: 1.5;">.</span></p>
+
+<div class="note"><strong>Примечание:</strong> В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс <code>:active</code> должен применяться только к первой кнопке; для праворуких мышей - это обычно самая левая кнопка.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="Активные_ссылки">Активные ссылки</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Этот абзац содержит ссылку:
+&lt;a href="#"&gt;Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.&lt;/a&gt;
+У абзаца фон станет серым при нажатии на него или на ссылку. &lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a:link { color: blue; }          /* Непосещённые ссылки */
+a:visited { color: purple; }     /* Посещённые ссылки */
+a:hover { background: yellow; }  /* Ссылки при наведении */
+a:active { color: red; }         /* Активные ссылки */
+
+p:active { background: #eee; }   /* Активные абзацы */</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Активные_ссылки')}}</p>
+
+<h3 id="Активные_элементы_формы">Активные элементы формы</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="my-button"&gt;Моя кнопка: &lt;/label&gt;
+  &lt;button id="my-button" type="button"&gt;Попробуй Нажать Меня или Мою подсказку!&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Активные_элементы_формы')}}</p>
+
+<h2 id="Спецификации"><span>Спецификации</span></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('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("css.selectors.active")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Псевдоклассы, связанные с ссылками: {{cssxref(":link")}}, {{cssxref(":visited")}} и {{cssxref(":hover")}}.</li>
+</ul>
diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html
new file mode 100644
index 0000000000..f54ff3c46b
--- /dev/null
+++ b/files/ru/web/css/_colon_any-link/index.html
@@ -0,0 +1,93 @@
+---
+title: ':any-link'
+slug: 'Web/CSS/:any-link'
+tags:
+  - ':any-link'
+  - CSS
+  - Web
+  - Верстка
+  - Гиперссылки
+  - Справка
+  - Ссылки
+  - Экспериментальное
+  - псевдокласс
+  - селектор
+translation_of: 'Web/CSS/:any-link'
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<p>Селектор <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдокласса</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:any-link</code></strong> представляет собой элемент, который действует как исходный якорь гиперссылки, независимо от того, была ли она посещена. Другими словами, он соответствует всем элементам {{HTMLElement("a")}}, {{HTMLElement("area")}}, или {{HTMLElement("link")}}, которые имеют атрибут <code>href</code>. Таким образом, он соответствует всем элементам, которые используют {{cssxref(":link")}} или {{cssxref(":visited")}}.</p>
+
+<pre class="brush: css no-line-numbers  language-css notranslate"><code class="language-css"><span class="selector token"><span class="pseudo-class token">/* Выбирает любой элемент, который будет соответствовать:link или :visited */
+:any-link</span> </span><span class="punctuation token">{</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;a href="https://example.com"&gt;External link&lt;/a&gt;&lt;br&gt;
+&lt;a href="#"&gt;Internal target link&lt;/a&gt;&lt;br&gt;
+&lt;a&gt;Placeholder link (won't get styled)&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* WebKit browsers */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.selectors.any-link")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
+ <li>Cоответствует HTML элементам: <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/area">&lt;area&gt;</a></code> и <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a></code> с атрибутом {{htmlattrxref("href", "a")}}</li>
+ <li>Похожие CSS селекторы:
+  <ul>
+   <li><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/:visited">:visited</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/:link">:link</a></code></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/css/_colon_any/index.html b/files/ru/web/css/_colon_any/index.html
new file mode 100644
index 0000000000..875677e274
--- /dev/null
+++ b/files/ru/web/css/_colon_any/index.html
@@ -0,0 +1,189 @@
+---
+title: ':any'
+slug: 'Web/CSS/:any'
+tags:
+  - CSS
+  - Experimental
+  - Псевдоклассы
+  - Руководство
+  - Экспериментальное
+translation_of: 'Web/CSS/:is'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="CSS/Pseudo-classes">Псевдокласс</a> <code>:any()</code> дает возможность быстрого конструирования наборов похожих селекторов путем составления групп, в которых каждый из входящих элементов будет комбинироваться с элементами из других групп. Это альтернатива для прописывания комбинаций селекторов для одного элемента, который может находится в разных родителях.</p>
+
+<div class="note"><strong>Замечание: </strong>Этот псевдо-класс все еще находится в процессе стандартизации в <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS селекторах уровня 4</em></a> под именем <code>:matches()</code>. Вполне вероятно, что синтаксис и имя <code>:-<em>vendor</em>-any() </code>будут изменены в ближайшем будущем, чтобы соответствовать спецификации.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">:-moz-any( <em>selector</em>[, <em>selector</em>]* ) :-webkit-any( selector[, selector]* )</pre>
+
+<h3 id="Values" name="Values">Параметры</h3>
+
+<dl>
+ <dt><code>selector</code></dt>
+ <dd>Селектор. Это может быть просто селектор или несколько селекторов, состоящих из <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 простых селекторов</a> и может включать комбинацию потомков.</dd>
+</dl>
+
+<div class="note"><strong>Замечание:</strong> Селекторы <strong>не</strong> могут содержать псевдо-элементы, допускается только комбинирование потомков.</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Например, следующий CSS:</p>
+
+<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>Может быть записано, как:</p>
+
+<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<p>Однако, не нужно использовать это так: (Смотрите <a href="#Issues_with_performance_and_specificity">раздел о производительности</a> ниже.)</p>
+
+<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Особенно полезен при работе с <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">разделами и заголовками</a> в HTML5 . Теги {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут быть вложенными, без <code>:any()</code> стилизация их соответствия друг другу может быть сложной.</p>
+
+<p>Например, без <code>:any()</code>, стилизация всех элементов {{HTMLElement("h1")}} на разной глубине будет очень сложна:</p>
+
+<pre class="brush: css">/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Уровень 3 */
+/* ... даже не думайте о нём*/
+</pre>
+
+<p>При использовании <code>:-any()</code>, это становится намного проще:</p>
+
+<pre class="brush: css">/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Проблемы с производительностью и особенности</h3>
+
+<p>{{ bug("561154") }} в Gecko, где специфика <code>:-moz-any()</code> не корректна. Текущая реализация (как в Firefox 12) ставит <code>:-moz-any()</code> в категорию универсальных правил, что означает, что использование его в качестве селектора справа будет медленнее, чем использование селекторов по ID, классу, или тегу.</p>
+
+<p>Например:</p>
+
+<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
+</pre>
+
+<p>медленнее, чем:</p>
+
+<pre class="brush: css">.a &gt; .b, .a &gt; .c
+</pre>
+
+<p>а следующее быстрее:</p>
+
+<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td>
+   <td>12.0 (534.30){{property_prefix("-webkit")}}</td>
+   <td> </td>
+   <td> </td>
+   <td>
+    <p>5<br>
+     {{property_prefix("-webkit")}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5<br>
+    {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/_colon_checked/index.html b/files/ru/web/css/_colon_checked/index.html
new file mode 100644
index 0000000000..66316fe2d2
--- /dev/null
+++ b/files/ru/web/css/_colon_checked/index.html
@@ -0,0 +1,232 @@
+---
+title: ':checked'
+slug: 'Web/CSS/:checked'
+tags:
+  - CSS
+  - Макет
+  - Псевдоклассы
+  - Руководство
+translation_of: 'Web/CSS/:checked'
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Псевдо-классы" title="Псевдоклассы">псевдоклассы</a> <strong><code>:checked</code></strong> CSS находит любые элементы <strong>radio </strong>(<code>&lt;input type="radio"&gt;</code>), <strong>checkbox </strong>(<code>&lt;input type="checkbox"&gt;</code>) или <strong>option</strong> ({{ HTMLElement("option") }} внутри {{ HTMLElement("select") }}), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае <code>:checked</code> повторно не применится к элементу, а сохранится.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css">input:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+</pre>
+
+<h3 id="Examples" name="Examples">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">element:checked { стили }</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_selectors" name="Example_selectors">Примеры селекторов</h3>
+
+<pre class="brush: css">/* любой "кликабельный" элемент */
+:checked {
+  width: 50px;
+  height: 50px;
+}
+
+/* только радиокнопки */
+input[type="radio"]:checked {
+  margin-left: 25px;
+}
+
+/* только чекбоксы */
+input[type="checkbox"]:checked {
+  display: none;
+}
+
+/* только элементы option */
+option:checked {
+  color: red;
+}
+</pre>
+
+<dl>
+ <dt><code>input[type="radio"]:checked</code></dt>
+ <dd>Находит, все отмеченные на странице, радиокнопки</dd>
+</dl>
+
+<dl>
+ <dt><code>input[type="checkbox"]:checked</code></dt>
+ <dd>Находит все отмеченные чекбоксы</dd>
+ <dt><code>option:checked</code></dt>
+ <dd>Находит все отмеченные option</dd>
+</dl>
+
+<h3 id="Использование_скрытых_чекбоксов_чтобы_хранить_некоторые_булевские_значения_в_CSS">Использование скрытых чекбоксов, чтобы хранить некоторые булевские значения в CSS</h3>
+
+<p>Пседокласс <code>:checked</code> применяется к скрытым чекбоксам в начале вашей страницы, которые могут использоваться, чтобы хранить некоторые динамические значения, используемые в CSS правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">открыть это демо</a>).</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8" /&gt;
+&lt;title&gt;Расширяемые элементы&lt;/title&gt;
+&lt;style&gt;
+#expand-btn {
+    margin: 0 3px;
+    display: inline-block;
+    font: 12px / 13px "Lucida Grande", sans-serif;
+    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+    padding: 3px 6px;
+    border: 1px solid rgba(0, 0, 0, 0.6);
+    background-color: #969696;
+    cursor: default;
+    border-radius: 3px;
+    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
+}
+
+#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
+    background: #B5B5B5;
+    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
+}
+
+#isexpanded, .expandable {
+    display: none;
+}
+
+#isexpanded:checked ~ * tr.expandable {
+    display: table-row;
+    background: #cccccc;
+
+}
+
+#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
+    display: block;
+    background: #cccccc;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;input type="checkbox" id="isexpanded" /&gt;
+
+&lt;h1&gt;Расширяемые элементы&lt;/h1&gt;
+&lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;&lt;th&gt;Колонка #1&lt;/th&gt;&lt;th&gt;Колонка #2&lt;/th&gt;&lt;th&gt;Колонка #3&lt;/th&gt;&lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;p&gt;[какой-то текст примера]&lt;/p&gt;
+&lt;p&gt;&lt;label for="isexpanded" id="expand-btn"&gt;Показать скрытые элементы&lt;/label&gt;&lt;/p&gt;
+&lt;p class="expandable"&gt;[другой текст для примера]&lt;/p&gt;
+&lt;p&gt;[какой-то текст примера]&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Использование_скрытых_чекбоксов_чтобы_хранить_некоторые_булевские_значения_в_CSS', '', '', '', 'Web/CSS/:checked') }}</p>
+
+<h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values">Использование скрытых радиокнопок, чтобы хранить некоторые булевские значения в CSS</h3>
+
+<p>Также вы можете псевдокласс <code>:checked</code>, чтобы скрывать радиокнопки для того, чтобы создать, например, <strong>галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши</strong>. Загрузите <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">это демо</a> как вариант решения.</p>
+
+<div class="note"><strong>Замечание:</strong> Для аналагично эффекта, но основанного на псевдоклассе <a class="internal" href="/ru/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> и без скрытых радиокнопок, смотрите <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">это демо</a>, взятое со страницы <a class="internal" href="/ru/docs/CSS/:hover" title="CSS/:hover">:hover</a>.</div>
+
+<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('HTML WHATWG', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Ссылается к Селекторам Уровня 3.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Определяет псевдокласс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/css/_colon_default/index.html b/files/ru/web/css/_colon_default/index.html
new file mode 100644
index 0000000000..58e14d2db5
--- /dev/null
+++ b/files/ru/web/css/_colon_default/index.html
@@ -0,0 +1,137 @@
+---
+title: ':default'
+slug: 'Web/CSS/:default'
+translation_of: 'Web/CSS/:default'
+---
+<div>{{CSSRef}}</div>
+
+<p> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Псевдо-классы">псевдо-класс</a> <strong><code>:default</code></strong> находит элемент формы, установленный по умолчанию для группы связаных элементов.</p>
+
+<p>Этот селектор используется для  элементов: {{htmlelement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>, и {{htmlelement("option")}} .</p>
+
+<pre class="brush: css no-line-numbers">/* Выбрать установленный по умолчанию среди &lt;input&gt; */
+input:default {
+  background-color: lime;
+}</pre>
+
+<p>Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс <code>:default</code> найдет <em>все</em> эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><strong><code>:default</code></strong>
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="radio" name="season" id="spring"&gt;
+&lt;label for="spring"&gt;Spring&lt;/label&gt;
+
+&lt;input type="radio" name="season" id="summer" checked&gt;
+&lt;label for="summer"&gt;Summer&lt;/label&gt;
+
+&lt;input type="radio" name="season" id="fall"&gt;
+&lt;label for="fall"&gt;Fall&lt;/label&gt;
+
+&lt;input type="radio" name="season" id="winter"&gt;
+&lt;label for="winter"&gt;Winter&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Определяет связанную семантику HTML и проверку ограничений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Первоначальное определение, но не определяет семантику </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая потдержка</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая потдержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/_colon_defined/index.html b/files/ru/web/css/_colon_defined/index.html
new file mode 100644
index 0000000000..301da9aa0c
--- /dev/null
+++ b/files/ru/web/css/_colon_defined/index.html
@@ -0,0 +1,114 @@
+---
+title: ':defined'
+slug: 'Web/CSS/:defined'
+translation_of: 'Web/CSS/:defined'
+---
+<div>{{ CSSRef }}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдо-класс</a> <strong><code>:defined</code></strong> находит любой элемент, который был определён, включая любой стандартный встроенные в браузер элемент и <a href="/ru/docs/Web/Web_Components/Использование_пользовательских_элементов">пользовательские элементы</a> (то есть определённые с помощью метода {{domxref("CustomElementRegistry.define()")}}).</span></p>
+
+<pre class="brush: css no-line-numbers">/* Находит любой элемент, который был определён */
+:defined {
+  font-style: italic;
+}
+
+/* Выбирает все элементы simple-custom, если пользовательский элемент simple-custom был определён */
+simple-custom:defined {
+  display: block;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот пример включает скрипт, определяющий <a href="/ru/docs/Web/Web_Components/Использование_пользовательских_элементов">пользовательский элемент</a> <code>&lt;simple-custom&gt;</code>:</p>
+
+<pre class="brush: js">customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})</pre>
+
+<p>Затем мы используем короткий HTML код с элементом <code>&lt;simple-custom&gt;</code> и стандартным элементом {{htmlelement("p")}}:</p>
+
+<pre class="brush: html">&lt;simple-custom text="Текст пользовательского элемента"&gt;&lt;/simple-custom&gt;
+
+&lt;p&gt;Пример текста стандартного параграфа&lt;/p&gt;</pre>
+
+<p>Теперь немного CSS. Здесь мы определяем цвета фона для разных элементов и используем селектор <code>:defined</code>, чтобы поменять шрифт всех определённых элементов на курсив.</p>
+
+<pre class="brush: css">/* Определение разных фонов для разных элементов */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  background: cyan;
+}
+
+/* И пользовательский, и встроенныйэлементы будет отображены курсивом */
+:defined {
+  font-style: italic;
+}</pre>
+
+<p>Наконец, мы добавляем следующие два правила, чтобы спрятать наш пользовательский элемент, если он не был определён или показать в обратном случае:</p>
+
+<pre class="brush: css">simple-custom:not(:defined) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}</pre>
+
+<p>Это полезно, если у вас есть сложный пользовательский элемент, который требует какое-то время для загрузки — возможно, вы захотите спрятать его до определения, чтобы на странице не появились искажения или не тилизованные элементы.</p>
+
+<h3 id="результат">результат</h3>
+
+<p>Вот результат выполнения представленного выше кода:</p>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{Compat("css.selectors.defined")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="ru/docs/Web/Web_Components">Веб-компоненты</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host()")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_dir/index.html b/files/ru/web/css/_colon_dir/index.html
new file mode 100644
index 0000000000..6dbd620eaf
--- /dev/null
+++ b/files/ru/web/css/_colon_dir/index.html
@@ -0,0 +1,104 @@
+---
+title: ':dir()'
+slug: 'Web/CSS/:dir'
+translation_of: 'Web/CSS/:dir'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>:dir()</code></strong> — это <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдо-класс</a> <a href="/en-US/docs/Web/CSS">CSS</a>, который выбирает элементы на основе направления текста в них.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает все элементы с текстом справа-налево */
+:dir(rtl) {
+  background-color: red;
+}</pre>
+
+<p><code>:dir()</code> учитывает только <em>семантическое </em>направление, т.е. заданное в самом документе. Он не учитывает <em>стилизованное </em>направление, т.е. заданное CSS-правилами, например {{cssxref("direction")}}.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong>  помните о том, что псевдокласс <code>:dir()</code> <strong>не эквивалентен</strong> <a href="/ru/docs/Web/CSS/Attribute_selectors">выбору по атрибуту</a> <code>[dir=…]</code>. Последний применяется только к тем элементам HTML, у которых есть атрибут {{htmlattrxref("dir")}}, игнорируя те, у которых он не задан — даже если они унаследовали его значение. (Похожим образом <code>[dir=rtl]</code> и<code>[dir=ltr]</code> не будут включать <code>auto</code>.) <code>:dir()</code>, же, напротив, соостветсвует значению вычисленному {{glossary("user agent")}}, даже унаследованному.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание:</strong> В HTML, направление задается атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p><code>:dir()</code> требует одного параметра, представляющего желаемое направление.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>Выбирает элементы с направлением текста слева-направо.</dd>
+ <dt><code>rtl</code></dt>
+ <dd>Выбирает элементы с направлением текста справа-налево.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;div dir="rtl"&gt;
+  &lt;span&gt;test1&lt;/span&gt;
+  &lt;div dir="ltr"&gt;test2
+    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.dir")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Языково-специфичные селекторы CSS: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_disabled/index.html b/files/ru/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..0335cad5fe
--- /dev/null
+++ b/files/ru/web/css/_colon_disabled/index.html
@@ -0,0 +1,162 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - Псевдо-класс
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:disabled</code> находит любой отключенный элемент. Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_селекторов">Пример селекторов</h3>
+
+<dl>
+ <dt>input:disabled</dt>
+ <dd>Выберет все отключенные поля ввода</dd>
+ <dt>select.country:disabled</dt>
+ <dd>Найдёт все отключенные <code>select</code> элементы с классом <code>country</code></dd>
+</dl>
+
+<h3 id="Пример_использования">Пример использования</h3>
+
+<p>Следующий CSS:</p>
+
+<pre class="brush: css">input[type="text"]:disabled { background: #ccc; }
+</pre>
+
+<p>Применим к этому HTML5 фрагменту:</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Адрес доставки&lt;/legend&gt;
+    &lt;input type="text" placeholder="Имя"&gt;
+    &lt;input type="text" placeholder="Адрес"&gt;
+    &lt;input type="text" placeholder="Почтовый индекс"&gt;
+  &lt;/fieldset&gt;
+  &lt;fieldset id="billing"&gt;
+    &lt;legend&gt;Адрес оплаты&lt;/legend&gt;
+    &lt;label for="billing_is_shipping"&gt;Такой же как адрес доставки:&lt;/label&gt;
+    &lt;input type="checkbox" onchange="javascript:toggleBilling()" checked&gt;
+    &lt;br /&gt;
+    &lt;input type="text" placeholder="Имя" disabled&gt;
+    &lt;input type="text" placeholder="Адрес" disabled&gt;
+    &lt;input type="text" placeholder="Почтовый индекс" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<p>Добавим немного javascript:</p>
+
+<pre class="brush: js">function toggleBilling() {
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+</pre>
+
+<p>Результатом будет отключение всех полей в группе адреса оплаты и окраска их в серый цвет.</p>
+
+<p>{{EmbedLiveSample('Пример_использования', '300px', '250px', '', 'Web/CSS/:disabled')}}</p>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Определяет семантику HTML и форм.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Отсылка к Селекторам Уровня 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>
+  <p>{{Cssxref(":enabled")}}</p>
+ </li>
+</ul>
diff --git a/files/ru/web/css/_colon_empty/index.html b/files/ru/web/css/_colon_empty/index.html
new file mode 100644
index 0000000000..5fae40fa2e
--- /dev/null
+++ b/files/ru/web/css/_colon_empty/index.html
@@ -0,0 +1,69 @@
+---
+title: ':empty'
+slug: 'Web/CSS/:empty'
+tags:
+  - CSS
+  - CSS Pseudo-class
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:empty'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>{{ Cssxref("pseudo-classes", "Псевдокласс") }} <code>:empty</code> находит любой элемент, у которого нет потомков. Учитываются элементы и текст (включая пробелы). Комментарии не повлияют на то, что элемент будет рассматриваться как не пустой.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">&lt;element&gt;:empty { <em>/* стили</em> */ }
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css notranslate">.box {
+  background: red;
+  height: 200px;
+  width: 200px;
+}
+
+.box:empty {
+  background: lime;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;!-- Я буду лаймовым --&gt;&lt;/div&gt;
+&lt;div class="box"&gt;Я буду красным&lt;/div&gt;
+&lt;div class="box"&gt;
+    &lt;!-- Я буду красным, так как перед комментарием стоят пробелы --&gt;
+&lt;/div&gt;</pre>
+
+<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('CSS4 Selectors', '#empty-pseudo', ':empty') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("css.selectors.empty")}}</p>
diff --git a/files/ru/web/css/_colon_enabled/index.html b/files/ru/web/css/_colon_enabled/index.html
new file mode 100644
index 0000000000..0425ffaeda
--- /dev/null
+++ b/files/ru/web/css/_colon_enabled/index.html
@@ -0,0 +1,136 @@
+---
+title: ':enabled'
+slug: 'Web/CSS/:enabled'
+translation_of: 'Web/CSS/:enabled'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:enabled</code> находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий пример делает цвет текста средне-зелёного оттенка, когда поле включено, и серым, когда отключено. Это позволяет понимать пользователю какие элементы интерактивны, а какие нет.</p>
+
+<div id="Enabled_Disabled_Inputs_Example">
+<p>Следующий HTML...</p>
+
+<pre class="brush:html">    &lt;form action="url_of_form"&gt;
+      &lt;label for="FirstField"&gt;Первое поле (включено):&lt;/label&gt; &lt;input type="text" id="FirstField" value="Lorem"&gt;&lt;br /&gt;
+      &lt;label for="SecondField"&gt;Второе поле (отключено):&lt;/label&gt; &lt;input type="text" id="SecondField" value="Ipsum" disabled="disabled"&gt;&lt;br /&gt;
+      &lt;input type="button" value="Submit" /&gt;
+    &lt;/form&gt;
+  </pre>
+
+<p>...используем со следующим CSS...</p>
+
+<pre class="brush:css; highlight:[1,4]">input:enabled {
+  color: #22AA22;
+}
+input:disabled {
+  color: #D9D9D9;
+}
+  </pre>
+
+<p>...результат:</p>
+
+<div>{{EmbedLiveSample("Enabled_Disabled_Inputs_Example",550,95)}}</div>
+
+<div>Заметьте, цвет текста кнопки также зелёный, так как она тоже включена.</div>
+</div>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Определяет семантику HTML и форм.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Отсылка к Селекторам Уровня 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Определён псевдо-класс, без семантики.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref(":disabled")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_first-child/index.html b/files/ru/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..e31fc0391d
--- /dev/null
+++ b/files/ru/web/css/_colon_first-child/index.html
@@ -0,0 +1,133 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>{{cssxRef('', 'CSS')}} {{cssxRef('Pseudo-classes', 'псевдо-класс')}} <strong><code>:first-child</code></strong> находит любой элемент, являющийся первым в своём родителе.</p>
+
+<pre class="brush: css no-line-numbers">&gt;
+/* Выбирает любой &lt;p&gt;, который является первым элементом
+   среди своих братьев и сестер */
+p:first-child {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Как изначально определено, выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это больше не требуется.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;This text is selected!&lt;/p&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;This text isn't selected: it's not a `p`.&lt;/h2&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p><span>{{EmbedLiveSample('Простой_пример', 500, 200)}}</span></p>
+
+<h3 id="Стилизация_списка">Стилизация списка</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3
+    &lt;ul&gt;
+      &lt;li&gt;Item 3.1&lt;/li&gt;
+      &lt;li&gt;Item 3.2&lt;/li&gt;
+      &lt;li&gt;Item 3.3&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Стилизация_списка')}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Соответствующие элементы не обязательно должны иметь родителя</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+
+
+<p>{{Compat("css.selectors.first-child")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_first-of-type/index.html b/files/ru/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..4a43ca3ca1
--- /dev/null
+++ b/files/ru/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,118 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - Псевдоклассы
+translation_of: 'Web/CSS/:first-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:first-of-type</code> находит первого потомка своего типа среди детей родителя.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element:first-of-type { <em>/* стили</em> */ }
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример показывает, как применится универсальный селектор, если простой селектор не написан.</p>
+
+<pre class="brush: css">div :first-of-type {
+  background-color: lime;
+}</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Это span первый!&lt;/span&gt;
+  &lt;span&gt;Это span нет. :(&lt;/span&gt;
+  &lt;span&gt;что насчёт этого &lt;em&gt;вложенного элемента&lt;/em&gt;?&lt;/span&gt;
+  &lt;strike&gt;Это другой тег&lt;/strike&gt;
+  &lt;span&gt;Грустно, это тоже нет...&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>...сработает так:</p>
+
+<div>{{EmbedLiveSample('Пример','100%', '120')}}</div>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-of-type")}}, {{Cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_first/index.html b/files/ru/web/css/_colon_first/index.html
new file mode 100644
index 0000000000..b67ccdff29
--- /dev/null
+++ b/files/ru/web/css/_colon_first/index.html
@@ -0,0 +1,102 @@
+---
+title: ':first'
+slug: 'Web/CSS/:first'
+tags:
+  - '@page'
+  - CSS
+  - Псевдо-класс
+  - Разметка
+translation_of: 'Web/CSS/:first'
+---
+<div></div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">псевдокласс</a> <strong><code>:first</code></strong> используется с @-правилом  {{cssxref("@page")}}, представляя первую страницу документа при печати.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выбирает первую страницу при печати */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}</pre>
+
+<div class="note">
+<p><strong>Обратите внимани:</strong> Вы можете изменять не все CSS свойства в этом псевдо-классе. Вы можете изменять только внешние отступы, {{cssxref("orphans")}}, {{cssxref("widows")}}, и разбитие документа на страницы. Более того, вы можете использовать только <a href="/en-US/docs/Web/CSS/размер#Абсолютные_единицы_измерения_размера">абсолютные единицы измерения</a>, определяя внешние отступы. Все остальные правила будут проигнорированы.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Первая страница.&lt;/p&gt;
+&lt;p&gt;Вторая страница.&lt;/p&gt;
+&lt;button&gt;Напечатать&lt;/button&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">document.querySelector("button").onclick = function () {
+  window.print();
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Нажмите кнопку "Напечатать", чтобы напечатать пример. Слова на первой странице должны быть примерно в центре, тогда как на остальных страницах надписи будут на своих обычных местах.</p>
+
+<p>{{ EmbedLiveSample('Example', '80%', '150px') }}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Paged Media', '#left-right-first', ':first')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.selectors.first")}}</p>
+
+
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("@page")}}</li>
+ <li>Другие связанные псевдо-классы: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html
new file mode 100644
index 0000000000..3859888faa
--- /dev/null
+++ b/files/ru/web/css/_colon_focus-visible/index.html
@@ -0,0 +1,126 @@
+---
+title: ':focus-visible'
+slug: 'Web/CSS/:focus-visible'
+translation_of: 'Web/CSS/:focus-visible'
+---
+<div>Псевдокласс <strong><code>:focus-visible</code></strong> применяется, в то время как элемент соответствует псевдоклассу <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">:focus</span></font>, и UA ({{glossary("User Agent")}}) определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента.</div>
+
+<p>Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры).</p>
+
+<p>Обратите внимание, что Firefox поддерживает аналогичную функциональность через старый псевдокласс с префиксом <code>:-moz-focusring</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щелкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p>
+
+<pre class="brush: html notranslate">&lt;input value="Default styles"&gt;&lt;br&gt;
+&lt;button&gt;Default styles&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
+&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
+&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
+
+<pre class="brush: css highlight[9] notranslate">input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Basic_example", "100%", 300)}}</p>
+
+<h3 id="Выборочное_отображение_индикатора_фокусировки">Выборочное отображение индикатора фокусировки</h3>
+
+<p>Пользовательский элемент управления, такой как кнопка <a href="/en-US/docs/User:Andreas_Wuest/Custom_Elements">настраиваемого элемента</a>, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как {{htmlelement ("button")}}.</p>
+
+<pre class="brush: html notranslate">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</pre>
+
+<pre class="brush: css highlight[13, 19] notranslate">custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Обеспечьте резервный стиль для бразеров,
+которые не поддреживают: focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}</pre>
+
+<p>{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>You can polyfill <code>:focus-visible</code> using <a href="https://github.com/WICG/focus-visible">focus-visible.js</a>.</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<h3 id="Low_vision">Low vision</h3>
+
+<p>Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> requires that the visual focus indicator be at least 3 to 1.</p>
+
+<ul>
+ <li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
+</ul>
+
+<h3 id="Cognition">Cognition</h3>
+
+<p>It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.selectors.focus-visible")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_focus-within/index.html b/files/ru/web/css/_colon_focus-within/index.html
new file mode 100644
index 0000000000..139fc9216e
--- /dev/null
+++ b/files/ru/web/css/_colon_focus-within/index.html
@@ -0,0 +1,89 @@
+---
+title: ':focus-within'
+slug: 'Web/CSS/:focus-within'
+translation_of: 'Web/CSS/:focus-within'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-класс</a> <strong><code>:focus-within</code></strong> соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу {{CSSxRef(":focus")}} либо имеет потомка, который соответствует <code>:focus</code>. (Включая потомков в <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow trees</a>.)</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выделяет &lt;div&gt; когда один из его потомков находится в фокусе */
+div:focus-within {
+  background: cyan;
+}</pre>
+
+<p>Этот селектор может оказаться полезным, например, для подсвечивания всего контейнера {{HTMLElement("form")}}, когда пользователь устанавливает фокус на одном из его полей ввода {{HTMLElement("input")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере форма раскрашивается при помощи специального правила стилей, когда один из её дочерних полей для ввода находится в фокусе.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Try typing into this form.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;label for="given_name"&gt;Given Name:&lt;/label&gt;
+  &lt;input id="given_name" type="text"&gt;
+  &lt;br&gt;
+  &lt;label for="family_name"&gt;Family Name:&lt;/label&gt;
+  &lt;input id="family_name" type="text"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[7] notranslate">form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+</pre>
+
+<h3 id="Итог">Итог</h3>
+
+<p>{{EmbedLiveSample("Example", 500, 150)}}</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если у вас есть желание внести свой вклад в наполнение данных, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пул-реквест.</div>
+
+<p>{{Compat("css.selectors.focus-within")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_focus/index.html b/files/ru/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..fb2ecaf22e
--- /dev/null
+++ b/files/ru/web/css/_colon_focus/index.html
@@ -0,0 +1,115 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Веб
+  - Псевдо-классы
+  - Раскладка
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <strong><code>:focus</code></strong> применяется, когда элемент (такой как input формы) получает фокус. Обычно он активируется при клике мышью пользователем или при выборе элемента с использованием клавиши "tab" на клавиатуре.</p>
+
+<pre class="brush: css no-line-numbers">/* Selects any &lt;input&gt; when focused */
+input:focus {
+  color: red;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Этот псевдо-класс применяется только тогда, когда в фокусе находится сам элемент. Используйте {{CSSxRef(":focus-within")}}, если вы хотите выбрать элемент, в котором находится сфокусорованный элемент.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input class="red-input" value="Я буду красным, если на меня попадёт фокус"&gt;
+&lt;input class="lime-input" value="Я буду лаймовым при фокусе"&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.red-input:focus {
+  color: red;
+}
+
+.lime-input:focus {
+  color: lime;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', '100%', 40)}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> (<em>WCAG 2.1 SC 1.4.11 Нетекстовой контраст</em>) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1.</p>
+
+<ul>
+ <li>Доступность визуальных индикаторов фокуса: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Добавьте на ваш сайт фокус! Советы по разработке полезных и удобных индикаторов фокуса</a></li>
+</ul>
+
+<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3>
+
+<p><strong>Никогда</strong> не удаляйте фокусный outline (видимый индикатор фокуса), не заменяя его фокусным контуром подходящим под требования <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a></p>
+
+<ul>
+ <li>Небольшой совет: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Никогда не удаляйте CSS контуры</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Определяет HTML семантику</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("css.selectors.focus")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_fullscreen/index.html b/files/ru/web/css/_colon_fullscreen/index.html
new file mode 100644
index 0000000000..68ce93e4cc
--- /dev/null
+++ b/files/ru/web/css/_colon_fullscreen/index.html
@@ -0,0 +1,92 @@
+---
+title: ':fullscreen'
+slug: 'Web/CSS/:fullscreen'
+tags:
+  - Верстка
+  - полноэкранный режим
+  - псевдокласс
+  - экран
+translation_of: 'Web/CSS/:fullscreen'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">Псевдокласс</a>  <strong><code>:fullscreen</code></strong> соответствует элементу, который в данный момент находится в полноэкранном режиме. Если в полноэкранном режиме находятся несколько элементов, то выбираются все они. </span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>Псевдокласс <code>:fullscreen</code> позволяет настроить ваши таблицы стилей для автоматического регулирования размера, стилю или шаблона содержимого, когда элемент переключается между полноэкранным режимом и традиционным представлением.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере, цвет кнопки меняется в зависимости от того, находится ли документ в полноэкранном режиме. Он выполнен без принудительного изменения стиля посредством JavaScript.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML выглядит так:</p>
+
+<pre class="brush: html">&lt;h1&gt;MDN Web Docs Demo: :fullscreen pseudo-class&lt;/h1&gt;
+
+&lt;p&gt;This demo uses the &lt;code&gt;:fullscreen&lt;/code&gt; pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.&lt;/p&gt;
+
+&lt;button id="fs-toggle"&gt;Toggle Fullscreen&lt;/button&gt;</pre>
+
+<p>{{HTMLElement("button")}} с ID <code>"fs-toggle"</code> будет изменятся между бледно-красный и бледно-зеленый в зависимости от того, находится ли документ в полноэкранном режиме.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Магия происходит в CSS. Используются два правила. Первое устанавливает цвет фона кнопки на "Toggle Full-screen Mode", когда элемент не находится в полноэкранном режиме. Для этого используется ключ <code>:not(:fullscreen)</code>, который выглядит как элемент, не имеющий установленного псевдокласса <code>:fullscreen</code>.</p>
+
+<pre class="brush: css">#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+</pre>
+
+<p>Когда документ находится в полноэкранном режиме, применяется следующее правило CSS, устанавливающее цвет фона на оттенок бледно-красного.</p>
+
+<pre class="brush: css">#fs-toggle:fullscreen {
+  background-color: #faa;
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.fullscreen")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API </a></li>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li>
+ <li>{{cssxref(":not")}}</li>
+ <li>{{cssxref("::backdrop")}}</li>
+ <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}} attribute</li>
+</ul>
diff --git a/files/ru/web/css/_colon_has/index.html b/files/ru/web/css/_colon_has/index.html
new file mode 100644
index 0000000000..d88e2b9dd9
--- /dev/null
+++ b/files/ru/web/css/_colon_has/index.html
@@ -0,0 +1,60 @@
+---
+title: ':has()'
+slug: 'Web/CSS/:has'
+tags:
+  - CSS
+  - Псевдоклассы
+  - Селекторы
+  - Справка
+  - Экспериментальная
+translation_of: 'Web/CSS/:has'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS <a href="/Web/CSS/Псевдо-классы">псевдокласс </a><a href="/ru/docs/Web/CSS/Псевдо-классы"> </a><strong><code>:has()</code></strong>  отображает элемент в том случае, если любой из селекторов, переданный в качестве параметра (относительно {{cssxref(":scope")}}), соответствует хотя бы одному элементу.</span></p>
+
+<p>Псведокласс <code>:has()</code> берет соотвествующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, <code>:has</code> имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: {{domxref("document.querySelector()")}} (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает любой тег &lt;a&gt;, если следом за ним находится дочерний элемент &lt;img&gt; */
+/* Отмечу, что это не поддерживается ни одним из браузеров */
+var test = document.querySelector('a:has(&gt; img)');</pre>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Следующий селектор находит только те теги {{HTMLElement("a")}}, которые непосредственно содержат дочерний элемент {{HTMLElement("img")}}:</p>
+
+<pre>a:has(&gt; img)
+</pre>
+
+<p>Следующий селектор находит только те теги {{HTMLElement("h1")}}, при условии, что следом за ними находится элемент {{htmlelement("p")}}:</p>
+
+<pre>h1:has(+ p)</pre>
+
+<h2 id="Спецификации">Спецификации</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("CSS4 Selectors", "#relational", ":has()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("css.selectors.has")}}</p>
diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html
new file mode 100644
index 0000000000..c570b027a1
--- /dev/null
+++ b/files/ru/web/css/_colon_host()/index.html
@@ -0,0 +1,87 @@
+---
+title: ':host()'
+slug: 'Web/CSS/:host()'
+translation_of: 'Web/CSS/:host()'
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> функция-<a href="/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">псевдокласс</a>  <strong><code>:host()</code></strong> выбирает shadow хоста (носителя) <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) </span>— но<span class="seoSummary"> только если селектор, переданный как параметр функции, соответствует shadow хосту.</span></p>
+
+<p>Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа {{CSSxRef(":host-context()")}}.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Псевдокласс не имеет эффекта вне shadow DOM.</p>
+</div>
+
+<pre class="brush: css; no-line-numbers notranslate">/* Выбирает хоста shadow root, только
+  если он соответствует аргументу селектора */
+:host(.special-custom-element) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Селективная_стилизация_shadow_хостов">Селективная стилизация shadow хостов</h3>
+
+<p>Следующие ниже фрагменты взяты из нашего примера <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors">host-selectors</a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">также смотрите вживую</a>).</p>
+
+<p>В этом примере у нас есть простой пользовательский элемент — <code>&lt;context-span&gt;</code> — который мы оборачиваем вокруг текста:</p>
+
+<pre class="brush: html; notranslate">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>Внутри конструктора элемента мы создаём элементы <code>style</code> и <code>span</code>, заполняем <code>span</code> контентом пользовательского элемента и заполняем элемент <code>style</code> CSS правилами:</p>
+
+<pre class="brush: js; notranslate">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p>Правило <code>:host(.footer) { color : red; }</code> стилизует все экземпляры элемента <code>&lt;context-span&gt;</code> (shadow хост в данном случае) в документе, которые имеют класс <code>footer</code> — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет.</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS Scope', '#host-selector', ':host()')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{Compat("css.selectors.hostfunction")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/Web_Components">Веб-компоненты</a></li>
+ <li>{{CSSxRef(":host")}}</li>
+ <li>{{CSSxRef(":host-context()")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_hover/index.html b/files/ru/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..71e25b7e1b
--- /dev/null
+++ b/files/ru/web/css/_colon_hover/index.html
@@ -0,0 +1,194 @@
+---
+title: ':hover'
+slug: 'Web/CSS/:hover'
+tags:
+  - CSS
+  - Псевдоклассы
+  - Руководство
+translation_of: 'Web/CSS/:hover'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:hover</code> срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":visited") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило <code>:hover</code> до правил <code>:link</code> и <code>:visited</code>, но после <code>:active</code>, как определено в <em>LVHA-порядке</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<p>Псевдокласс <code>:hover</code> может применяться к любому <a href="/ru/docs/Web/CSS/pseudo-elements" title="Pseudo-classes">псевдоэлементу</a>. {{experimental_inline}}</p>
+
+<p>Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.</p>
+
+<div class="note"><strong>Замечания по использованию</strong>: на сенсорных экранах <code>:hover</code> проблемный или не работает. В зависимости от браузера, псевдокласс <code>:hover</code> может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">:link:hover { outline: dotted red; }
+
+.foo:hover { background: gold; }
+</pre>
+
+<h3 id="Выпадающее_меню">Выпадающее меню</h3>
+
+<p>С псевдоклассом <code>:hover</code> вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать <strong>выпадающие меню на чистом CSS</strong> (только на CSS, без использования <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). Сущность этой техники - создание правил, типа следуюшего:</p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>применим к HTML структуре типа следующей:</p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Меню&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Ссылка&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Подменю&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Подменю&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Смотрите наш полный <a class="internal" href="/@api/deki/files/6238/=css_dropdown_menu.html" title="css_dropdown_menu.html">пример выпадающего меню, основанный на CSS</a>.</p>
+
+<h3 id="Галерея_полноразмерных_изображений_и_превью">Галерея полноразмерных изображений и превью</h3>
+
+<p>Вы можете использовать псевдокласс <code>:hover</code>, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">это демо</a>.</p>
+
+<div class="note"><strong>Замечания:</strong> Для аналагичного эффекта, но основанного на псевдоклассе<a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked"><code>:checked</code></a> (применяется к скрытым радиокнопкам), смотрите <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">это демо</a>, взятое со страницы <a class="internal" href="/ru/docs/Web/CSS/:checked" title="ru/CSS/:checked">ru/CSS/:checked</a>.</div>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Может применяться к любым псевдоэлементам.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>для <code>&lt;a&gt;</code> элементов</td>
+   <td>0.2</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>2.0.4 (419)<br>
+    <font size="2"><span style="line-height: 19.5px;">различные ошибки до этой версии</span></font></td>
+  </tr>
+  <tr>
+   <td>для всех элементов</td>
+   <td>0.2</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>7.0</td>
+   <td>7.0</td>
+   <td>2.0.4 (419)<br>
+    <font size="2"><span style="line-height: 19.5px;">различные ошибки до этой версии</span></font></td>
+  </tr>
+  <tr>
+   <td>для псевдоэлементов</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(28) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>В IE8-11, наведя курсор на элемент, прокручивая вверх/вниз, без перемещения курсора, элемент останется в состоянии <code>:hover</code>, пока курсор не передвинут. Смотрите <a href="https://connect.microsoft.com/IE/feedbackdetail/view/926665">IE баг 926665</a>.</p>
+
+<p>В IE9 (и возможно ранее), если у {{HTMLElement("table")}} есть родитель с {{cssxref("width")}}, установленной не в <code>auto</code> и {{cssxref("overflow-x")}}<code>: auto;</code>, а у {{HTMLElement("table")}} столько контента, что он переполняет родителя по горизонтали, а также есть {{cssxref(":hover")}} стили, установленные на элементы в таблице, то при наведении на указанные элементы будет увеличиваться высота {{HTMLElement("table")}}. <a href="http://jsbin.com/diwiqe">Вот живой пример, которой иллюстрирует этот баг.</a> Один из способов исправления, установление <code>min-height: 0%;</code> на родителя таблицы (должны быть указаны %, <code>0</code> и <code>0px</code> не работают). Баг подняли в <a href="http://bugs.jquery.com/ticket/10854">jQuery ticket #10854</a>, но его закрыли, так как это не ошибка jQuery.</p>
+
+<p>На Safari Mobile for iOS 7.1.2, нажатие на <a href="/ru/docs/Web/Events/click#Safari_Mobile">кликабельный элемент</a> вызывает переход элемента в состояние <code>:hover</code>,  и элемент остаётся в нём, пока другой элемент не войдёт в состояние <code>:hover</code>.</p>
+
+<p>Смотрите также:</p>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium баг #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium баг #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_in-range/index.html b/files/ru/web/css/_colon_in-range/index.html
new file mode 100644
index 0000000000..ed0fc29cf4
--- /dev/null
+++ b/files/ru/web/css/_colon_in-range/index.html
@@ -0,0 +1,138 @@
+---
+title: ':in-range'
+slug: 'Web/CSS/:in-range'
+tags:
+  - CSS
+  - Псевдоклассы
+  - Руководство
+translation_of: 'Web/CSS/:in-range'
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:in-range</code> находит элементы, значение которых соответствует указанному для них диапазону ограничений. Он позволяет странице показывать, когда значение элемента находится в допустимом диапазоне.</p>
+
+<div class="note"><strong>Замечание:</strong> этот псевдокласс применяется только к элементам с заданным диапазоном ограничений. При отсутствии такого ограничения, элемент не может быть ни "в зоне допустимых значений", ни "вне диапазона".</div>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
+    &lt;ul&gt;Приминаются значения между 1 и 10.
+        &lt;li&gt;
+            &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;
+            &lt;label for="value1"&gt;Ваше значение &lt;/label&gt;
+        &lt;/li&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[5]">li {
+    list-style: none;
+    margin-bottom: 1em;
+}
+input {
+    border: 1px solid black;
+}
+input:in-range {
+    background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+    background-color: rgba(255, 0, 0, 0.25);
+    border: 2px solid red;
+}
+input:in-range + label::after {
+    content:' НОРМАЛЬНОЕ';
+}
+input:out-of-range + label::after {
+    content:'вне диапозона!';
+}</pre>
+</div>
+
+<div>{{EmbedLiveSample('Пример',600,140)}}</div>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Определяет, когда <code>:in-range</code> находит элементы вHTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Поддержка &lt;input&gt;</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>11.0</td>
+   <td>5.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Поддержка &lt;input&gt;</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":out-of-range")}}</li>
+ <li><a href="/ru/docs/Web/Guide/HTML/Forms/Data_form_validation">Руководство валидации данных в формах</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_indeterminate/index.html b/files/ru/web/css/_colon_indeterminate/index.html
new file mode 100644
index 0000000000..d131eb3888
--- /dev/null
+++ b/files/ru/web/css/_colon_indeterminate/index.html
@@ -0,0 +1,130 @@
+---
+title: ':indeterminate'
+slug: 'Web/CSS/:indeterminate'
+tags:
+  - CSS
+  - Псевдо-класс
+  - Разметка
+translation_of: 'Web/CSS/:indeterminate'
+---
+<p>{{CSSRef}}</p>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a><a href="/ru/docs/Web/CSS/Псевдо-классы"> псевдо-класс</a> <strong><code>:indeterminate</code></strong> находит элементы в неопределённом состоянии.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает все элементы &lt;input&gt;, которые находятся в неопределенном состоянии */
+input:indeterminate {
+  background: lime;
+}</pre>
+
+<p>Селектор находит следующие элементы:</p>
+
+<ul>
+ <li>Элементы <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, свойство <code>indeterminate</code> которых было установлено в <code>true</code> через <a href="/en-US/docs/Web/JavaScript">JavaScript</a></li>
+ <li>Элементы <code><a href="/en-US/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>, когда все радио переключатели в одной группе (с одинаковым атрибутом <code>name</code>) невыбраны</li>
+ <li>Элементы {{HTMLElement("progress")}} в неопределённом состоянии</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Чекбокс_и_радио_переключатели">Чекбокс и радио переключатели</h3>
+
+<p>В этом примере специальные стили применяются к меткам, которые привязаны к неопределенным полям формы.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;input type="checkbox" id="checkbox"&gt;
+  &lt;label for="checkbox"&gt;Эта метка будет зелёной.&lt;/label&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;input type="radio" id="radio"&gt;
+  &lt;label for="radio"&gt;Эта метка будет зелёной.&lt;/label&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">input:indeterminate + label {
+  background: lime;
+}
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i &lt; inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p>
+
+<h3 id="Полоса_прогресса">Полоса прогресса</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;progress&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Определение семантики HTML и проверки.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Нет изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Определён псевдо-класс, но не семантика.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.selectors.indeterminate")}}</p>
+</div>
diff --git a/files/ru/web/css/_colon_invalid/index.html b/files/ru/web/css/_colon_invalid/index.html
new file mode 100644
index 0000000000..3c8c6c3051
--- /dev/null
+++ b/files/ru/web/css/_colon_invalid/index.html
@@ -0,0 +1,186 @@
+---
+title: ':invalid'
+slug: 'Web/CSS/:invalid'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:invalid'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:invalid</code> находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых не проходит <a href="/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">валидацию</a>, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.</p>
+
+<p>По умолчанию, Gecko не применяет стили к псевдо-классу <code>:invalid</code>. Однако, применяет стили (красное "свечение", используя свойство {{ Cssxref("box-shadow") }}) к псевдо-классу {{ Cssxref(":-moz-ui-invalid") }}, который применяется в подгруппе случаев для <code>:invalid</code>.</p>
+
+<p>Вы можете отключить свечение, используя следующий CSS или полностью изменить внешний вид некорректных полей.</p>
+
+<pre class="brush: css">:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow:none;
+}
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<h4 id="Радиокнопки">Радиокнопки</h4>
+
+<p>Если любая из радиокнопок в группе (т.е., с одинаковым атрибутом <code>name</code>) имеет атрибут <code>required</code>, псевдо-класс <code>:invalid</code> применяется ко всем из них, если ни одна из кнопок группы не выбрана.</p>
+
+<h2 id="Example2" name="Example2">Пример</h2>
+
+<p>Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label&gt;Введите URL:&lt;/label&gt;
+  &lt;input type="url" /&gt;
+  &lt;br /&gt;
+  &lt;br /&gt;
+  &lt;label&gt;Введите эл. почту:&lt;/label&gt;
+  &lt;input type="email" required/&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}</pre>
+
+<p>{{ EmbedLiveSample('Example2',600,150) }}</p>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', '#selector-invalid', ':invalid') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-invalid', ':invalid') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':invalid') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка ({{ HTMLElement("input") }})</td>
+   <td>10.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>Применяется к {{ HTMLElement("form") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("13") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>Применяется к {{ HTMLElement("form") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("13") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":valid") }}</li>
+ <li>{{ cssxref(":-moz-submit-invalid") }}</li>
+ <li>{{ cssxref(":required") }}</li>
+ <li>{{ cssxref(":optional") }}</li>
+</ul>
+
+<p>{{ languages( { "fr": "fr/CSS/:invalid" }) }}</p>
diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html
new file mode 100644
index 0000000000..57985074be
--- /dev/null
+++ b/files/ru/web/css/_colon_is/index.html
@@ -0,0 +1,249 @@
+---
+title: ':is() (:matches(), :any())'
+slug: 'Web/CSS/:is'
+translation_of: 'Web/CSS/:is'
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> <code>:matches()</code> был переименован в <code>:is()</code> в <a href="https://github.com/w3c/csswg-drafts/issues/3258" style="white-space: nowrap;">CSSWG issue #3258</a>.</p>
+</div>
+
+<p><strong><code>:is()</code></strong> это функция <a href="/ru/docs/Web/CSS">псевдо-класс CSS</a> принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.</p>
+
+<p>Заметьте, что в данный момент бразуеры поддерживают ее функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдо-класс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что  <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Пример приведенный выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Обратно-совместимая версия с:-*-any() и :matches()
+   (Это невозможно сгруппировать селекторы в одно правило,
+    так как присутствие одного неверного селектора аннулирует все правило.) */
+:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Кроссбраузерный_пример">Кроссбраузерный пример</h3>
+
+<pre class="brush: html notranslate">&lt;header&gt;
+  &lt;p&gt;Это мой параграф в шапке&lt;/p&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;p&gt;Это первый&lt;/p&gt;&lt;p&gt;пункт списка&lt;/p&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;p&gt;Это второй&lt;/p&gt;&lt;p&gt;пункт списка&lt;/p&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;Это мой параграф в подвале&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<pre class="brush: css notranslate">:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<pre class="brush: js notranslate">let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
+      }
+    }
+  }
+}
+
+matchedItems.forEach(applyHandler);
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
+  });
+}</pre>
+
+<p>{{EmbedLiveSample("Cross-browser_example", "100%", 300)}}</p>
+
+<h3 id="Упрощение_списка_селекторов">Упрощение списка селекторов</h3>
+
+<p>Псевдо-класс <code>:is()</code> может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:</p>
+
+<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>... можно заменить на:</p>
+
+<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Упрощение_селекторов_разделов">Упрощение селекторов разделов</h3>
+
+<p>Псевдо-класс <code>:is()</code>  особенно полезен  при работе с <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">заголовками и разделами</a> HTML5. C тех пор как {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} обычно используют вместе, без <code>:is()</code>, стилизовать их, чтобы они соответствовали друг друг, может быть не просто.</p>
+
+<p>К примеру, без <code>:is()</code>, стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:</p>
+
+<pre class="brush: css notranslate">/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+/* ... даже не смей думать об этом! */
+</pre>
+
+<p>Используя <code>:is()</code>, как видно, это гораздо легче:</p>
+
+<pre class="brush: css notranslate">/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h3 id="Как_избежать_аннулирования_списка_селекторов">Как избежать аннулирования списка селекторов</h3>
+
+<p>В отличие от <a href="/ru/docs/Web/CSS/Selector_list">списка селекторов</a>, псевдо-класс <code>:is()</code> не аннулируется, когда из селекторов, попавший туда не поддерживается бразуером.</p>
+
+<pre class="brush: css notranslate">:is(:valid, :unsupported) {
+  ...
+}</pre>
+
+<p>Будет по прежнему определяться правильно и соответствовать <code>:valid</code> даже в браузерах, которые не поддерживают <code>:unsupported</code>, в то время как:</p>
+
+<pre class="brush: css notranslate">:valid, :unsupported {
+  ...
+}</pre>
+
+<p>Будет проигнорировано бразуерами, которые не поддерживают <code>:unsupported</code> даже если они поддерживают <code>:valid</code>.</p>
+
+<h3 id="Разница_между_is_и_where">Разница между :is() и :where()</h3>
+
+<p>Разница между этими двумя, в том что <code>:is()</code> учитывает спецификацию общего селектора (он принимает специфику своего самого конкретного аргумента), в то же время <code><a href="/en-US/docs/Web/CSS/:where">:where()</a></code> имеет значение спецификации равное 0. Это можно увидеть на <a href="/en-US/docs/Web/CSS/:where#Examples">примере на странице документации <code>:where()</code> </a>.</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS4 Selectors", "#matches-pseudo", ":is()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("css.selectors.is")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - Like <code>:is()</code>, but with 0 <a href="/en-US/docs/Web/CSS/Specificity">specificity</a>.</li>
+ <li><a href="/ru/docs/Web/CSS/Selector_list">Список селекторов</a></li>
+ <li><a href="/ru/docs/Web/Web_Components">Веб компоненты</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_lang/index.html b/files/ru/web/css/_colon_lang/index.html
new file mode 100644
index 0000000000..69b48325b0
--- /dev/null
+++ b/files/ru/web/css/_colon_lang/index.html
@@ -0,0 +1,100 @@
+---
+title: ':lang()'
+slug: 'Web/CSS/:lang'
+tags:
+  - CSS
+  - Псевдо-класс
+translation_of: 'Web/CSS/:lang'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-класс</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:lang()</code></strong> выбирает элементы основываясь на языке, на котором они определены.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает все &lt;p&gt;, что на английском (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> В HTML язык определяется комбинацией атрибута {{htmlattrxref("lang")}}, элемента {{HTMLElement("meta")}} и иногда информацией из протокола (такой, как заголовки HTTP ). Для других типов документов могут быть другие методы определения языка.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Параметр">Параметр</h3>
+
+<dl>
+ <dt><code>&lt;language-code&gt;</code></dt>
+ <dd>{{cssxref("&lt;string&gt;")}}, представляющая язык, который вы хотите отобрать. Допустимые значения указаны в документации <a href="/en-US/docs/Web/HTML">HTML</a>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>In this example, the <code>:lang()</code> pseudo-class is used to match the parents of quote elements ({{htmlElement("q")}}) using <a href="/en-US/docs/Web/CSS/Child_selectors">child combinators</a>. Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that {{glossary("Unicode")}} values are used to specify some of the special quote characters.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div lang="en"&gt;&lt;q&gt;This English quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="fr"&gt;&lt;q&gt;This French quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="de"&gt;&lt;q&gt;This German quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) &gt; q { quotes: '« ' ' »'; }
+:lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', 350)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Adds wildcard language matching and comma-separated list of languages.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.lang")}}</p>
+</div>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li>Language-related pseudo-classes: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+ <li>HTML {{htmlattrxref("lang")}} attribute</li>
+ <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Tags for Identifying Languages</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_last-child/index.html b/files/ru/web/css/_colon_last-child/index.html
new file mode 100644
index 0000000000..cc691def67
--- /dev/null
+++ b/files/ru/web/css/_colon_last-child/index.html
@@ -0,0 +1,114 @@
+---
+title: ':last-child'
+slug: 'Web/CSS/:last-child'
+translation_of: 'Web/CSS/:last-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдо-класс</a> <code>:last-child</code> находит любой элемент, являющийся последним в его родителе.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element:last-child { <em>style properties</em> }</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Этот элемент не лаймовый.&lt;/li&gt;
+  &lt;li&gt;И этот тоже.&lt;/li&gt;
+  &lt;li&gt;А этот да! :)&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li:last-child {
+  background-color: lime;
+}</pre>
+
+<p>{{EmbedLiveSample('Пример', '100%', 100)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":first-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_last-of-type/index.html b/files/ru/web/css/_colon_last-of-type/index.html
new file mode 100644
index 0000000000..d0c82884e0
--- /dev/null
+++ b/files/ru/web/css/_colon_last-of-type/index.html
@@ -0,0 +1,111 @@
+---
+title: ':last-of-type'
+slug: 'Web/CSS/:last-of-type'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <strong><code>:last-of-type</code></strong> находит последнего потомка с заданным тегом в списке детей родительского элемента.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает &lt;p&gt;, являющийся последним элементом
+   среди элементов своего типа среди своих соседей */
+p:last-of-type {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Стилизация_последнего_параграфа">Стилизация последнего параграфа</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Заголовок&lt;/h2&gt;
+&lt;p&gt;Параграф 1&lt;/p&gt;
+&lt;p&gt;Параграф 2&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:last-of-type {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Стилизация_последнего_параграфа')}}</p>
+
+<h3 id="Вложенные_элементы">Вложенные элементы</h3>
+
+<p>Этот пример показывает как можно обратиться к вложенным элементам. Заметим, что в случаях когда не указано ни одного простого селектора, подразумевается <a href="/ru/docs/Web/CSS/Universal_selectors">универсальный селектор</a> (<code>*</code>).</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div&gt;Этот `div` первый.&lt;/div&gt;
+  &lt;div&gt;Этот &lt;span&gt;вложенный `span` является последним&lt;/span&gt;!&lt;/div&gt;
+  &lt;div&gt;Этот &lt;em&gt;вложенный `em` первый&lt;/em&gt;, а этот &lt;em&gt;вложенный `em` последний&lt;/em&gt;!&lt;/div&gt;
+  &lt;b&gt;Этот `b` будет выбран!&lt;/b&gt;
+  &lt;div&gt;Это последний `div`!&lt;/div&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">article :last-of-type {
+  background-color: pink;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Вложенные_элементы', 500)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Теперь выбранные элементы не обязательно должны иметь родителя.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.last-of-type")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html
new file mode 100644
index 0000000000..aa35096aff
--- /dev/null
+++ b/files/ru/web/css/_colon_left/index.html
@@ -0,0 +1,72 @@
+---
+title: ':left'
+slug: 'Web/CSS/:left'
+tags:
+  - Верстка
+  - Псевдоклассы
+translation_of: 'Web/CSS/:left'
+---
+<div>{{ CSSRef() }}</div>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдокласс</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:left</code></strong> используется с <a href="/en-US/docs/Web/CSS/At-rule">at-правилом</a> {{cssxref("@page")}}, предоставляет все левые страницы печатного документа.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выбирает все левые страницы при печати */
+@page :left {
+  margin: 2in 3in;
+}</pre>
+
+<p>Является ли данная страница "левой" или "правой" определяется основным направлением документа. Например, если первая страница имеет основное направление слева направо, то это будет страница с page {{Cssxref(":right")}} ; если первая страница имеет основное направление справа налево, то это будет страница с page <code>:left</code>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Этот псевдокласс можно использовать только для изменений следующих свойств элементов страницы: {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, и{{ Cssxref("background") }} . Все остальные свойства будут игнорироваться; изменены будут только свойства элементов страницы без изменения содержимого документа.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Выставляем_отступы_для_левых_страниц">Выставляем отступы для левых страниц</h3>
+
+<pre class="brush: css notranslate">@page :left {
+  margin: 2in 3in;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Paged Media', '#left-right-first', ':left') }}</td>
+   <td>{{ Spec2('CSS3 Paged Media') }}</td>
+   <td>Без изменения</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создана из структурированных данных.  Если вы желаете что-то добавить в эти данные, пожалуйста перейдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</p>
+
+<p>{{Compat("css.selectors.left")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ Cssxref("@page") }}</li>
+ <li>Другие псевдоклассы, связанные с @page: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_link/index.html b/files/ru/web/css/_colon_link/index.html
new file mode 100644
index 0000000000..76b0a4d894
--- /dev/null
+++ b/files/ru/web/css/_colon_link/index.html
@@ -0,0 +1,116 @@
+---
+title: ':link'
+slug: 'Web/CSS/:link'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:link'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:link</code> позволяет вам выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, используя селекторы с другими, относящимися к ссылкам, псевдо-классам типа {{ cssxref(":hover") }}, {{ cssxref(":active") }} или {{ cssxref(":visited") }}. Чтобы стилизовать ссылки должным образом, вам нужно вставлять правила <code>:link</code> до других, как определено <em>LVHA-порядком</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. Псевдо-класс {{ cssxref(":focus") }} обычно размещается прямо перед или сразу после <code>:hover</code>, в зависимости от ожидаемого эффекта.</p>
+
+<div class="note">
+<p><strong>Замечание</strong><strong>:</strong> Используйте {{cssxref(":any-link")}} чтобы выбрать ссылку, независимо от того, была она посещена или нет.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">a:link {color: slategray;}
+.external:link {background-color: lightblue;}</pre>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Появилось ограничение применять только для элемента {{ HTMLElement("a") }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.5</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_not/index.html b/files/ru/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..26721ae7b7
--- /dev/null
+++ b/files/ru/web/css/_colon_not/index.html
@@ -0,0 +1,132 @@
+---
+title: ':not()'
+slug: 'Web/CSS/:not'
+translation_of: 'Web/CSS/:not'
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><strong>Отрицательный </strong><a href="/ru/docs/CSS/Pseudo-classes" title="Pseudo-classes">CSS псевдо-класс</a>, <code>:not(X)</code> - функция, принимающая простой селектор <var>X</var> в качестве аргумента. Он находит элементы, не соответствующие селектору. <var>X</var> не должен содержать других отрицательных селекторов.</p>
+
+<div class="note"><strong>Замечания:</strong>
+
+<ul>
+ <li>С этого псевдокласса можно написать бесполезные селекторы. Например, <code>:not(*)</code> найдёт любой элемент, являющийся не любым, то есть правило не применится ни к одному элементу.</li>
+ <li>Возможно переписать другие правила. Например <code>foo:not(bar)</code> найдёт тот же элемент, что и простой <code>foo</code>. Тем не менее <a href="/ru/docs/CSS/Specificity" title="Specificity">специфичность</a> первого выше.</li>
+ <li><code>:not(foo){} </code>найдёт что угодно, что не <code>foo</code>, <strong>включая {{HTMLElement("html")}} и {{HTMLElement("body")}}.</strong></li>
+ <li>Это селектор применяется только к одному элементу. Вы не можете использовать его, чтобы исключить всех родителей. Например, <code>body :not(table) a</code> применится к ссылкам внутри таблицы, тогда как {{HTMLElement("tr")}} будет соответствовать <code>:not()</code> части селектора.</li>
+</ul>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">:not(selector) { <em>style properties</em> }</pre>
+
+<h2 id="Examples" name="Examples">Пример</h2>
+
+<pre class="brush: css">p:not(.classy) { color: red; }
+body :not(p) { color: green; }</pre>
+
+<p>CSS выше и HTML ниже...</p>
+
+<pre class="brush: html">&lt;p&gt;Некоторый текст.&lt;/p&gt;
+&lt;p class="classy"&gt;Какой-то другой текст.&lt;/p&gt;
+&lt;span&gt;Ещё текст&lt;span&gt;
+</pre>
+
+<p>Выведет это:</p>
+
+<p>{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:not') }}</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('CSS4 Selectors', '#negation', ':not()') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Аргумент расширен до поддержки нескольких непростых селекторов.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>Расширенные аргументы</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>Расширенные аргументы</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/css/_colon_nth-child/index.html b/files/ru/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..140087f56a
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-child/index.html
@@ -0,0 +1,184 @@
+---
+title: ':nth-child'
+slug: 'Web/CSS/:nth-child'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:nth-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс</a>  <strong><code>:nth-child()</code></strong> находит один или более элементов, основываясь на их позиции среди группы соседних элементов.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает каждый четвёртый элемент
+   среди любой группы соседних элементов */
+:nth-child(4n) {
+  color: lime;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>Псевдокласс <code>nth-child</code> указывается с единственным аргументом, описывающим паттерн для выбирания элементов.</p>
+
+<h3 id="Ключевые_слова">Ключевые слова</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.</dd>
+ <dt><code>even</code></dt>
+ <dd>Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.</dd>
+</dl>
+
+<h3 id="Функциональная_запись">Функциональная запись</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>Описывает элементы среди группы соседних с номерами, соответствующими паттерну <code>An+B</code> (для каждого целого числа n &gt;= 0). Нумерация элементов начинается с единицы. Значения <code>A</code> и <code>B</code> должны быть {{cssxref("&lt;integer&gt;")}}s.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_selectors" name="Example_selectors">Примеры селекторов</h3>
+
+<dl>
+ <dt><code>tr:nth-child(odd)</code> или <code>tr:nth-child(2n+1)</code></dt>
+ <dd>Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.</dd>
+ <dt><code>tr:nth-child(even)</code> or <code>tr:nth-child(2n)</code></dt>
+ <dd>Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.</dd>
+ <dt><code>:nth-child(7)</code></dt>
+ <dd>Описывает седьмой элемент.</dd>
+ <dt><code>:nth-child(5n)</code></dt>
+ <dd>Описывает элементы с номерами 5, 10, 15, и т. д.</dd>
+ <dt><code>:nth-child(3n+4)</code></dt>
+ <dd>Описывает элементы с номерами 4, 7, 10, 13, и т. д.</dd>
+ <dt><code>:nth-child(-n+3)</code></dt>
+ <dd>Описывает первые три элемента среди группы соседних элементов.</dd>
+ <dt><code>p:nth-child(n)</code></dt>
+ <dd>Описывает каждый элемент<code>&lt;p&gt;</code> среди группы соседних элементов. Эквивалентно простому селектору <code>p</code>.</dd>
+ <dt><code>p:nth-child(1)</code> или <code>p:nth-child(0n+1)</code></dt>
+ <dd>Описывает каждый элемент <code>&lt;p&gt;</code>, являющийся первым среди группы соседних элементов. Эквивалентно селектору {{cssxref(":first-child")}}.</dd>
+</dl>
+
+<h3 id="Подробный_пример">Подробный пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, БЕЗ элемента
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; в группе элементов-потомков.&lt;/h3&gt;
+&lt;p&gt;Элементы 1, 3, 5 и 7 будут выбраны.&lt;/p&gt;
+&lt;div class="first"&gt;
+  &lt;span&gt;Span 1!&lt;/span&gt;
+  &lt;span&gt;Span 2&lt;/span&gt;
+  &lt;span&gt;Span 3!&lt;/span&gt;
+  &lt;span&gt;Span 4&lt;/span&gt;
+  &lt;span&gt;Span 5!&lt;/span&gt;
+  &lt;span&gt;Span 6&lt;/span&gt;
+  &lt;span&gt;Span 7!&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, С элементом
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; в группе элементов-потомков.&lt;/h3&gt;
+&lt;p&gt;Элементы 1, 5 и 7 будут выбраны.&lt;br&gt;
+   3 используется в подсчёте потому что это элемент-потомок,
+   но он не выбран потому что он не &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+&lt;div class="second"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;Это `em`.&lt;/em&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, С элементом
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; в группе элементов-потомков.&lt;/h3&gt;
+&lt;p&gt;Элементы 1, 4, 6 и 8 будут выбраны.&lt;br&gt;
+   3 не используется в подсчёте и не выбран, потому что это &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
+   но не &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, а &lt;code&gt;nth-of-type&lt;/code&gt; выбирает только
+   потомков этого типа. Элемент &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; полностью пропускается и игнорируется.&lt;/p&gt;
+&lt;div class="third"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;Это `em`.&lt;/em&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Подробный_пример', 550, 550)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Добавление синтаксиса <code>of &lt;selector&gt;</code>, также теперь выбранные элементы не обязательно должны иметь родителя.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.nth-child")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_nth-last-child/index.html b/files/ru/web/css/_colon_nth-last-child/index.html
new file mode 100644
index 0000000000..c000427aa8
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-last-child/index.html
@@ -0,0 +1,151 @@
+---
+title: ':nth-last-child'
+slug: 'Web/CSS/:nth-last-child'
+tags:
+  - Псевдоклассы
+translation_of: 'Web/CSS/:nth-last-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:nth-last-child(an+b)</code> находит элемент, имеющий <code><em>a</em>n+<em>b</em>-1</code> потомков после данной позиции в дереве документа, значение для <code>n </code>может быть положительным или нулевым, а также имеющий родительский элемент.</p>
+
+<p>В результате, он функционирует так же, как и {{Cssxref(":nth-child")}}, кроме того, что выбирает элементы, считая в обратном порядке, с <strong>конца</strong> списка потомков, не с начала.</p>
+
+<p>Смотрите {{Cssxref(":nth-child")}} для более тщательного описания синтаксиса его аргументов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element:nth-last-child(<em>a</em>n + <em>b</em>) {<em>стили</em> }
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_селекторов">Пример селекторов</h3>
+
+<dl>
+ <dt><code>tr:nth-last-child(-n+4)</code></dt>
+ <dd>Находит последние 4 строки HTML таблицы.</dd>
+ <dt><code>span:nth-last-child(even)</code></dt>
+ <dd>Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.</dd>
+</dl>
+
+<h3 id="Использование">Использование</h3>
+
+<p>Этот CSS ...</p>
+
+<pre class="brush: css">table {
+  border: 1px solid blue;
+}
+tr:nth-last-child(-n+3) { /* последние 3 потомка */
+  background-color: lime;
+}
+</pre>
+
+<p>... с этим HTML ...</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Первая&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Вторая строка&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Третья&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Четвёртая&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Пятая строчка&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<p>... будет выглядеть, как :</p>
+
+<p>{{EmbedLiveSample('Примеры', '100%', 150)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-child")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_nth-last-of-type/index.html b/files/ru/web/css/_colon_nth-last-of-type/index.html
new file mode 100644
index 0000000000..7b3eb9728f
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-last-of-type/index.html
@@ -0,0 +1,95 @@
+---
+title: ':nth-last-of-type()'
+slug: 'Web/CSS/:nth-last-of-type'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:nth-last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс</a> <strong><code>:nth-last-of-type()</code></strong> находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов, считая с конца.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает каждый четвёртый элемент &lt;p&gt;
+   среди любой группы соседних элементов,
+   отсчёт начинается с последнего элемента */
+p:nth-last-of-type(4n) {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Этот псевдокласс практически такой же как {{Cssxref(":nth-of-type")}}, за исключением того, что счёт элементов производится в обратном порядке начиная с <em>конца</em>, а не в обычном порядке с начала.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Псевдокласс <code>nth-last-of-type</code> указывается с единственным аргументом, описывающим паттерн для выбирания элементов, начиная с конца.</p>
+
+<p>Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-last-child")}}.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Это span.&lt;/span&gt;
+  &lt;span&gt;Это другой span.&lt;/span&gt;
+  &lt;em&gt;Это текст будет подчёркнут.&lt;/em&gt;
+  &lt;span&gt;Круто, этот span лаймовый!!!&lt;/span&gt;
+  &lt;strike&gt;Это вообще не span.&lt;/strike&gt;
+  &lt;span&gt;Это ещё один последний span.&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span:nth-last-of-type(2) {
+  background-color: lime;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Теперь выбранные элементы не обязательно должны иметь родителя.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.nth-last-of-type")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_nth-of-type/index.html b/files/ru/web/css/_colon_nth-of-type/index.html
new file mode 100644
index 0000000000..b58d49df8a
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-of-type/index.html
@@ -0,0 +1,104 @@
+---
+title: ':nth-of-type'
+slug: 'Web/CSS/:nth-of-type'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:nth-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс</a> <strong><code>:nth-of-type()</code></strong> находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов.</p>
+
+<pre class="brush: css no-line-numbers  language-css">/* Выбирает каждый четвёртый элемент &lt;p&gt;
+   среди любой группы соседних элементов. */
+p:nth-of-type(4n) {
+  color: lime;
+}</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Псевдокласс <code>nth-of-type</code> указывается с единственным аргументом, описывающим паттерн для выбора элементов.</p>
+
+<p>Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-child")}}.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div&gt;Этот элемент не учитывается.&lt;/div&gt;
+  &lt;p&gt;Первый параграф.&lt;/p&gt;
+  &lt;p&gt;Второй параграф.&lt;/p&gt;
+  &lt;div&gt;Этот элемент не учитывается.&lt;/div&gt;
+  &lt;p&gt;Третий параграф.&lt;/p&gt;
+  &lt;p&gt;Четвёртый параграф.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Нечётные параграфы */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* Чётные параграфы */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* Первый параграф */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Базовый_пример', 250, 200)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Теперь выбранные элементы не обязательно должны иметь родителя.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.nth-of-type")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_only-child/index.html b/files/ru/web/css/_colon_only-child/index.html
new file mode 100644
index 0000000000..2eb10c8a88
--- /dev/null
+++ b/files/ru/web/css/_colon_only-child/index.html
@@ -0,0 +1,107 @@
+---
+title: ':only-child'
+slug: 'Web/CSS/:only-child'
+tags:
+  - Псевдоклассы
+translation_of: 'Web/CSS/:only-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:only-child</code> находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и <code>:first-child:last-child</code> или <code>:nth-child(1):nth-last-child(1)</code>, но с меньшей специфичностью.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">parent child:only-child {
+  property: value;
+}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<pre class="brush: css">span:only-child {
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Этот span единственный ребёнок своего папы:(&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;span&gt;Этот span один из потомков родителя&lt;/span&gt;
+  &lt;span&gt;Этот span один из детей отца&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Простой_пример', '100%', 60)}}</p>
+
+<h3 id="Пример_со_списком">Пример со списком</h3>
+
+<pre class="brush: css">li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}</pre>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Первый
+    &lt;ul&gt;
+      &lt;li&gt;Это единственный ребёнок
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Второй
+    &lt;ul&gt;
+      &lt;li&gt;Этот список с двумя элементами
+      &lt;li&gt;Этот список с двумя элементами
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Третий
+    &lt;ul&gt;
+      &lt;li&gt;Этот список с тремя элементами
+      &lt;li&gt;Этот список с тремя элементами
+      &lt;li&gt;Этот список с тремя элементами
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;ol&gt;
+</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Пример_со_списком', '100%', 220)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{Compat("css.selectors.only-child")}}</div>
diff --git a/files/ru/web/css/_colon_only-of-type/index.html b/files/ru/web/css/_colon_only-of-type/index.html
new file mode 100644
index 0000000000..d971fd9eaa
--- /dev/null
+++ b/files/ru/web/css/_colon_only-of-type/index.html
@@ -0,0 +1,85 @@
+---
+title: ':only-of-type'
+slug: 'Web/CSS/:only-of-type'
+tags:
+  - CSS
+  - Псевдоклассы
+translation_of: 'Web/CSS/:only-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:only-of-type</code>  выбирает такой элемент, который является единственным потомком такого типа.</p>
+
+<pre class="brush: css">/* Выбирает все &lt;p&gt;, которые являются */
+/* единственным потомками типа &lt;p&gt; */
+p:only-of-type {
+  background-color: lime;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;main&gt;
+  &lt;div&gt;Я `div` №1.&lt;/div&gt;
+  &lt;p&gt;Я тут единственный `p` елемент.&lt;/p&gt;
+  &lt;div&gt;Я `div` №2.&lt;/div&gt;
+  &lt;div&gt;Я `div` №3.
+    &lt;i&gt;Я единственный потомок типа `i`.&lt;/i&gt;
+    &lt;em&gt;Я `em` №1.&lt;/em&gt;
+    &lt;em&gt;Я `em` №2.&lt;/em&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">main :only-of-type {
+  color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Example', '', '', '', 'Web/CSS/:only-of-type')}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("css.selectors.only-of-type")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-of-type")}}, {{Cssxref(":first-of-type")}}, {{Cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_optional/index.html b/files/ru/web/css/_colon_optional/index.html
new file mode 100644
index 0000000000..2b7b8f9c9d
--- /dev/null
+++ b/files/ru/web/css/_colon_optional/index.html
@@ -0,0 +1,110 @@
+---
+title: ':optional'
+slug: 'Web/CSS/:optional'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:optional'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:optional</code> находит любые {{ HTMLElement("input") }} элементы, у которых не установлен атрибут {{ htmlattrxref("required","input") }}. Он позволяет формам легко отмечать необязательные поля, и давать им соответствующие стили.</p>
+
+<p>Чтобы задать особый внешний вид обязательным полям формы можно использовать псевдо-класс {{ cssxref(":required") }}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите {{ cssxref(":invalid") }}</p>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', '#selector-optional', ':optional') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>10.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":required") }}</li>
+ <li>{{ cssxref(":invalid") }}</li>
+ <li>{{ cssxref(":valid") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_out-of-range/index.html b/files/ru/web/css/_colon_out-of-range/index.html
new file mode 100644
index 0000000000..2d84e58b58
--- /dev/null
+++ b/files/ru/web/css/_colon_out-of-range/index.html
@@ -0,0 +1,140 @@
+---
+title: ':out-of-range'
+slug: 'Web/CSS/:out-of-range'
+tags:
+  - CSS
+  - Псевдоклассы
+  - Руководство
+translation_of: 'Web/CSS/:out-of-range'
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:out-of-range</code> находит элементы, значение которых находится вне диапазона их ограничений. Он позволяет странице показывать, когда значение элемента находится вне допустимого диапазона. Значение будет вне диапазона, если оно меньше или больше, чем минимальное и максимальное значения.</p>
+
+<div class="note"><strong>Замечание:</strong> этот псевдокласс применяется только к элементам с заданным диапазоном ограничений. При отсутствии такого ограничения, элемент не может быть ни "в зоне допустимых значений", ни "вне диапазона".</div>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
+    &lt;ul&gt;Приминаются значения между 1 и 10.
+        &lt;li&gt;
+            &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;
+            &lt;label for="value1"&gt;Your value is &lt;/label&gt;
+        &lt;/li&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[5]">li {
+    list-style: none;
+    margin-bottom: 1em;
+}
+input {
+    border: 1px solid black;
+}
+input:in-range {
+    background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+    background-color: rgba(255, 0, 0, 0.25);
+    border: 2px solid red;
+}
+input:in-range + label::after {
+    content:' НОРМАЛЬНОЕ';
+}
+input:out-of-range + label::after {
+    content:'вне диапазона!';
+}</pre>
+</div>
+
+<div>{{EmbedLiveSample('Пример',600,140)}}</div>
+
+<div></div>
+
+<h2 id="Спецификации"><span>Спецификации</span></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('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Определяет, когда <code>:out-of-range</code> находит элементы в HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Поддержка &lt;input&gt;</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>11.0</td>
+   <td>5.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Поддержка &lt;input&gt;</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":in-range")}}</li>
+ <li><a href="/ru/docs/Web/Guide/HTML/Forms/Data_form_validation">Руководство валидации данных в формах</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_placeholder-shown/index.html b/files/ru/web/css/_colon_placeholder-shown/index.html
new file mode 100644
index 0000000000..81ab4ab3fc
--- /dev/null
+++ b/files/ru/web/css/_colon_placeholder-shown/index.html
@@ -0,0 +1,194 @@
+---
+title: ':placeholder-shown'
+slug: 'Web/CSS/:placeholder-shown'
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<div><a href="/ru/docs/Web/CSS">CSS псевдо-класс</a> <strong><code>:placeholder-shown</code></strong> представляет любой {{htmlElement("input")}} или {{htmlElement("textarea")}} элемент, который отображает в данный момент<a href="/en-US/docs/Web/HTML/Element/input#attr-placeholder"> текст заполнитель (плейсхолдер)</a>.</div>
+
+<pre class="brush: css no-line-numbers">/* Выбирает любой элемент с активным плейсхолдером */
+:placeholder-shown {
+  border: 2px solid silver;
+}</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Type something here!"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  border-color: silver;
+}
+
+input:-moz-placeholder {
+  border-color: silver;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Простой_пример", 200, 60)}}</p>
+
+<h3 id="Переполнение_текстом">Переполнение текстом</h3>
+
+<p>На узких экранах, таких как смартфоны, ширина полей поиска и других полей формы может быть значительно сокращена. Это может привести к нежелательному обрезанию текста плейсхолдера. Часто бывает полезно изменить это поведение с помощью свойства {{cssxref("text-overflow")}}.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Enter something into this field, if you please!"&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  text-overflow: ellipsis;
+}
+
+input:-moz-placeholder {
+  text-overflow: ellipsis;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  text-overflow: ellipsis;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Переполнение_текстом", 200, 60)}}</p>
+
+<h3 id="Цветной_текст">Цветной текст</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Type something here!"&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  color: red;
+  font-style: italic;
+}
+
+input:-moz-placeholder {
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample("Цветной_текст", 200, 60)}}</p>
+
+<h3 id="Кастомизированное_поле_ввода">Кастомизированное поле ввода</h3>
+
+<p>В следующем примере выделены поля Branch и ID с пользовательским стилем.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;form id="test"&gt;
+  &lt;p&gt;
+    &lt;label for="name"&gt;Enter Student Name:&lt;/label&gt;
+    &lt;input id="name" placeholder="Student Name"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="branch"&gt;Enter Student Branch:&lt;/label&gt;
+    &lt;input id="branch" placeholder="Student Branch"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="sid"&gt;Enter Student ID:&lt;/label&gt;
+    &lt;input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/&gt;
+  &lt;/p&gt;
+  &lt;input type="submit"/&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input.studentid:-ms-input-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+
+input.studentid:-moz-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample("Кастомизированное_поле_ввода", 200, 180)}}</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.placeholder-shown")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Псевдоэлемент {{cssxref("::placeholder")}}, применяющий стили к <em>самому себе</em>.</li>
+ <li>Связянные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/ru/docs/Learn/HTML/Forms">HTML формы</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_read-only/index.html b/files/ru/web/css/_colon_read-only/index.html
new file mode 100644
index 0000000000..30fa0382ad
--- /dev/null
+++ b/files/ru/web/css/_colon_read-only/index.html
@@ -0,0 +1,67 @@
+---
+title: ':read-only'
+slug: 'Web/CSS/:read-only'
+tags:
+  - Псевдо-элементы
+translation_of: 'Web/CSS/:read-only'
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:read-only</code> находит элементы, недоступные для редактирования пользователем.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<div style="overflow: hidden;">
+<pre class="brush:css">input:-moz-read-only { background: #eee; }
+input:read-only { background: #eee; }
+</pre>
+</div>
+
+<h2 class="editable" 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('HTML WHATWG', '#selector-read-only', ':read-only') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-only') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.read-only")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/:read-write"><code>:read-write</code></a></li>
+ <li>HTML атрибут <a href="/ru/docs/HTML/Content_Editable" title="HTML/Content Editable"><code>contenteditable</code></a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_read-write/index.html b/files/ru/web/css/_colon_read-write/index.html
new file mode 100644
index 0000000000..1f92defec7
--- /dev/null
+++ b/files/ru/web/css/_colon_read-write/index.html
@@ -0,0 +1,67 @@
+---
+title: ':read-write'
+slug: 'Web/CSS/:read-write'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:read-write'
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:read-write</code> находит элементы, доступные для редактирования пользователем, такие как текстовые поля.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<div style="overflow: hidden;">
+<pre class="brush:css">input:-moz-read-write { background: #eee; }
+input:read-write { background: #eee; }
+</pre>
+</div>
+
+<h2 class="editable" 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('HTML WHATWG', '#selector-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-write') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.read-write")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/:read-only"><code>:read-only</code></a></li>
+ <li>HTML атрибут <a href="/ru/docs/HTML/Content_Editable" title="HTML/Content Editable"><code>contenteditable</code></a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_required/index.html b/files/ru/web/css/_colon_required/index.html
new file mode 100644
index 0000000000..c7d7026124
--- /dev/null
+++ b/files/ru/web/css/_colon_required/index.html
@@ -0,0 +1,108 @@
+---
+title: ':required'
+slug: 'Web/CSS/:required'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:required'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:required</code> находит любые {{ HTMLElement("input") }} элементы, имеющие атрибут {{ htmlattrxref("required", "input") }}. Он позволяет формам легко сообщать, что поля должны быть корректно заполнены перед отправкой формы.</p>
+
+<p>Псевдо-класс {{ cssxref(":optional") }} может использоваться, чтобы дать особый внешний вид полям, не обязательным для заполнения.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите {{ cssxref(":invalid") }}.</p>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', '#selector-required', ':required') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>10.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_right/index.html b/files/ru/web/css/_colon_right/index.html
new file mode 100644
index 0000000000..d2f3687dd9
--- /dev/null
+++ b/files/ru/web/css/_colon_right/index.html
@@ -0,0 +1,112 @@
+---
+title: ':right'
+slug: 'Web/CSS/:right'
+translation_of: 'Web/CSS/:right'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>The <strong><code>:right</code></strong> CSS <a href="/en/CSS/@page" title="@page">page</a> <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> matches any right page when printing a page. It allows you to describe the styling of right-side pages.</p>
+
+<pre class="brush: css no-line-numbers">/* Selects the content on the right-hand pages while printing */
+@page :right {
+  margin: 2in 3in;
+}</pre>
+
+<p>Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a <code>:right</code> page and if it has a major writing direction of right-to-left then it will be a <code>{{ Cssxref(":left") }}</code> page.</p>
+
+<div class="note"><strong>Note:</strong> Вы можете не менять все CSS свойства, а поменять только margin, padding, border, и background для страницы. Все остальные CSS свойства будут проигнорированы и изменения будут применены только для страницы, но не для её содержимого.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">@page :right {
+  margin: 2in 3in;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}</td>
+   <td>{{ Spec2('CSS3 Paged Media') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>8.0</td>
+   <td>9.2</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ Cssxref("@page") }}, {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_root/index.html b/files/ru/web/css/_colon_root/index.html
new file mode 100644
index 0000000000..54fc106e05
--- /dev/null
+++ b/files/ru/web/css/_colon_root/index.html
@@ -0,0 +1,101 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - CSS
+  - CSS Pseudo-class
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс</a> <code>:root</code> находит корневой элемент дерева документа. Применимо к HTML, <code>:root</code> находит элемент {{HTMLElement("html")}} и идентичен селектору по тегу <code>html</code>, но его <a href="/ru/docs/Web/CSS/Specificity">специфичность</a> выше.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Использование <code>:root</code> полезно для объявления <a href="/ru/docs/Web/CSS/--*">CSS Переменных</a>:</p>
+
+<pre class="brush: css">:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html
new file mode 100644
index 0000000000..034a1f4b12
--- /dev/null
+++ b/files/ru/web/css/_colon_target/index.html
@@ -0,0 +1,211 @@
+---
+title: ':target'
+slug: 'Web/CSS/:target'
+tags:
+  - Верстка
+  - Псевдоклассы
+translation_of: 'Web/CSS/:target'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдокласс </a> <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>:target</code></strong> представляет уникальный элемент (целевой элемент) с подходящим {{htmlattrxref("id")}}  URL-фрагментом.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает элемент с подходящим ID текущего URL-фрагмента */
+:target {
+  border: 2px solid black;
+}</pre>
+
+<p>Для примера, следующий URL имеет фрагмент (обозначается знаком <em>#</em>), который указывает на элемент с именем <code>section2</code>:</p>
+
+<pre>http://www.example.com/index.html#section2</pre>
+
+<p>Следующий элмент будет выбран селектором <code>:target</code>, если текущий URL равен вышеуказанному:</p>
+
+<pre class="brush: html">&lt;section id="section2"&gt;Example&lt;/section&gt;</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Таблица_контента">Таблица контента</h3>
+
+<p>Псевдокласс <code>:target</code> может использоваться для выделения части страницы, на которую была сделана ссылка из оглавления .</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h3&gt;Table of Contents&lt;/h3&gt;
+&lt;ol&gt;
+ &lt;li&gt;&lt;a href="#p1"&gt;Jump to the first paragraph!&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="#p2"&gt;Jump to the second paragraph!&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="#nowhere"&gt;This link goes nowhere,
+   because the target doesn't exist.&lt;/a&gt;&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h3&gt;My Fun Article&lt;/h3&gt;
+&lt;p id="p1"&gt;You can target &lt;i&gt;this paragraph&lt;/i&gt; using a
+  URL fragment. Click on the link above to try out!&lt;/p&gt;
+&lt;p id="p2"&gt;This is &lt;i&gt;another paragraph&lt;/i&gt;, also accessible
+  from the links above. Isn't that delightful?&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:target {
+  background-color: gold;
+}
+
+/* Добавление псевдоэлемента внутрь target-элемента */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Стиль italic-элементов без target-элемента */
+p:target i {
+  color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<div>{{EmbedLiveSample('A_table_of_contents', 500, 300)}}</div>
+
+<h3 id="Pure-CSS_lightbox">Pure-CSS lightbox</h3>
+
+<p>Вы можете использовать псевдо-класс <code>:target</code> для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их  <code>display</code> на видимый.</p>
+
+<div class="note"><strong>Примечание:</strong> Более полный pure-CSS lightbox , основанный на псевдоклассе<code>:target</code> -  <a href="https://github.com/madmurphy/takefive.css/">available on GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>).</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#example1"&gt;Open example #1&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#example2"&gt;Open example #2&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;div class="lightbox" id="example1"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="close"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;div class="lightbox" id="example2"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="close"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* Закрываем lightbox */
+.lightbox {
+  display: none;
+}
+
+/* Открываем lightbox */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Содержимое lightbox  */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Кнопка закрытия */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* Обертка lightbox  */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<div>{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}</div>
+
+<h2 id="Спецификации">Спецификации</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("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Определена HTML-специфика семантики.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<div>{{Compat("css.selectors.target")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">Using the :target pseudo-class in selectors</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_valid/index.html b/files/ru/web/css/_colon_valid/index.html
new file mode 100644
index 0000000000..3ea99d76e1
--- /dev/null
+++ b/files/ru/web/css/_colon_valid/index.html
@@ -0,0 +1,142 @@
+---
+title: ':valid'
+slug: 'Web/CSS/:valid'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:valid'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:valid</code> находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых <a href="/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">валиден</a>, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что помогает понять пользователю, что он ввёл данные правильно.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label&gt;Введите URL:&lt;/label&gt;
+  &lt;input type="url" /&gt;
+  &lt;br /&gt;
+  &lt;br /&gt;
+  &lt;label&gt;Введите адрес эл. почты:&lt;/label&gt;
+  &lt;input type="email" required/&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}</pre>
+
+<p>{{ EmbedLiveSample('Пример',600,150) }}</p>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', '#selector-valid', ':valid') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-valid', ':valid') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':valid') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':valid') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>10.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10 (only input tags)</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":invalid") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_visited/index.html b/files/ru/web/css/_colon_visited/index.html
new file mode 100644
index 0000000000..7ad6df8e89
--- /dev/null
+++ b/files/ru/web/css/_colon_visited/index.html
@@ -0,0 +1,129 @@
+---
+title: ':visited'
+slug: 'Web/CSS/:visited'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:visited'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:visited</code> позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдо-классами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило <code>:visited</code> до правила <code>:link</code>, но после других, определённых <em>LVHA-порядком</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note style-wrap">
+<p><strong>Замечание: </strong>Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдо-класс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> и <code>stroke</code>. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосещённых ссылок вместо него (но если прозрачность - <code>0</code>, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосещённых ссылок).</p>
+
+<p>Несмотря на то, что цвет может меняться, метод <code>getComputedStyle</code> наврёт и всегда будет давать значение цвета непосещённых ссылок.</p>
+
+<p>Для дополнительной информации об ограничениях и их причин, смотрите <a href="/ru/docs/CSS/Privacy_and_the_:visited_selector" title="/ru/docs/CSS/Privacy_and_the_:visited_selector">Приватность и селектор :visited</a>.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">a:visited { color: #4b2f89; }
+a:visited { background-color: white } </pre>
+
+<h2 id="Спецификации">Спецификации</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('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Ограничение использовать его только для элементов {{ HTMLElement("a") }}. Позволяет браузерам ограничивать его поведение из-за причин приватности.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>3.5</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>CSS свойства, разрешённые использовать в <code>:visited</code></td>
+   <td>6</td>
+   <td>{{CompatGeckoDesktop("2.0") }}</td>
+   <td>8 (или раньше)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/CSS/Privacy_and_the_:visited_selector" title="/ru/docs/CSS/Privacy_and_the_:visited_selector">Приватность и селектор :visited</a></li>
+ <li>Относящиеся к ссылкам псевдо-классы: {{cssxref(":link")}}, {{cssxref(":active")}} и {{cssxref(":hover")}}.</li>
+</ul>
diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html
new file mode 100644
index 0000000000..6af554ac77
--- /dev/null
+++ b/files/ru/web/css/_colon_where/index.html
@@ -0,0 +1,157 @@
+---
+title: ':where()'
+slug: 'Web/CSS/:where'
+tags:
+  - ':where'
+  - CSS
+  - псевдокласс
+translation_of: 'Web/CSS/:where'
+---
+<div>{{CSSRef}}</div>
+
+<div><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс </a><strong><code>:where()</code> </strong>в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка.</div>
+
+<div></div>
+
+<pre class="brush: css notranslate"><code>/* Выбирает любой параграф внутри header, main
+   или footer на который наведен курсор мыши */
+:where(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Пример приведенный выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}</code></pre>
+
+<p>Разница между <code>:where()</code> и {{CSSxRef(":is", ":is()")}} заключается в том, что <code>:where()</code> всегда имеет нулевую <a href="ru/docs/Web/CSS/Specificity">специфичность селектора</a>, тогда как специфичность <code>:is()</code> равна самому специфичному селектору из списка переданных аргументов.</p>
+
+<h3 id="Парсинг_forgiving-селектора">Парсинг forgiving-селектора</h3>
+
+<p>В спецификации псевдоклассы <code>:is()</code> и <code>:where()</code> относятся к так называемому <a href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list">forgiving selector list</a> (прощающий список селекторов).</p>
+
+<p>При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании <code>:is()</code> или <code>:where()</code> действует другое правило: если среди переданных аргументов будет неккоректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.</p>
+
+<pre class="brush: css notranslate">:where(:valid, :unsupported) {
+  ...
+}</pre>
+
+<p>Пример выше будет успешно распарсен и для <code>:valid</code> будут применены CSS-правила, даже если в браузере не поддерживается <code>:unsupported</code>, в то время как:</p>
+
+<pre class="brush: css notranslate">:valid, :unsupported {
+  ...
+}</pre>
+
+<p>Код будет полностью проигнорирован в браузерах, которые не поддерживают <code>:unsupported</code>, даже не смотря на то, что они поддерживают <code>:valid</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Сравнение_where_и_is">Сравнение :where() и :is()</h3>
+
+<p>В этом примере показывается как работает <code>:where()</code>, а так же демонстрируется разница между <code>:where()</code> и <code>:is()</code>.</p>
+
+<p>Возьмем следующий HTML-код:</p>
+
+<pre class="brush: html notranslate">&lt;article&gt;
+  &lt;h2&gt;:is()-styled links&lt;/h2&gt;
+  &lt;section class="is-styling"&gt;
+    &lt;p&gt;Here is my main content. This &lt;a href="https://mozilla.org"&gt;contains a link&lt;/a&gt;.
+  &lt;/section&gt;
+
+  &lt;aside class="is-styling"&gt;
+    &lt;p&gt;Here is my aside content. This &lt;a href="https://developer.mozilla.org"&gt;also contains a link&lt;/a&gt;.
+  &lt;/aside&gt;
+
+  &lt;footer class="is-styling"&gt;
+    &lt;p&gt;This is my footer, also containing &lt;a href="https://github.com/mdn"&gt;a link&lt;/a&gt;.
+  &lt;/footer&gt;
+&lt;/article&gt;
+
+&lt;article&gt;
+  &lt;h2&gt;:where()-styled links&lt;/h2&gt;
+  &lt;section class="where-styling"&gt;
+    &lt;p&gt;Here is my main content. This &lt;a href="https://mozilla.org"&gt;contains a link&lt;/a&gt;.
+  &lt;/section&gt;
+
+  &lt;aside class="where-styling"&gt;
+    &lt;p&gt;Here is my aside content. This &lt;a href="https://developer.mozilla.org"&gt;also contains a link&lt;/a&gt;.
+  &lt;/aside&gt;
+
+  &lt;footer class="where-styling"&gt;
+    &lt;p&gt;This is my footer, also containing &lt;a href="https://github.com/mdn"&gt;a link&lt;/a&gt;.
+  &lt;/footer&gt;
+&lt;/article&gt;</pre>
+
+<p>В примере выше у нас представлено две статьи, каждая из которых содержит следующиее блоки: <code>section</code>, <code>aside</code> и <code>footer</code>. Каждый из блоков имеет свой CSS-класс.</p>
+
+<p>Теперь при помощи псевдоклассов <code>:is()</code> и <code>:where()</code> зададим цвет для ссылок в простой форме, как в примере ниже:</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+  font-size: 150%;
+}
+
+:is(section.is-styling, aside.is-styling, footer.is-styling) a {
+  color: red;
+}
+
+:where(section.where-styling, aside.where-styling, footer.where-styling) a {
+  color: orange;
+}</pre>
+
+<p>Что если позже мы захотим переопределить цвет ссылок в <code>footer</code>'ах используя простой селектор?</p>
+
+<pre class="brush: css notranslate">footer a {
+  color: blue;
+}</pre>
+
+<p>Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри <code>:is()</code> выше, чем специфичность селектора вышеприведенного кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.</p>
+
+<p>В то время как, селекторы перечисленные внутри <code>:where()</code> имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.</p>
+
+<p><strong>Примечание</strong>: Вы так же можете найти этот пример на Github; смотрите <a href="https://mdn.github.io/css-examples/is-where/">is-where</a>.</p>
+
+<p>{{EmbedLiveSample('Examples', '100%', 600)}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из готовых данных. Если бы вы хотели добавить свою информацию, пожалуйста проверьте на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.selectors.where")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":is", ":is()")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/Selector_list">Список селекторов</a></li>
+ <li><a href="/ru/docs/Web/Web_Components">Веб-компоненты</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html
new file mode 100644
index 0000000000..6041a30f4b
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html
@@ -0,0 +1,50 @@
+---
+title: '::-moz-progress-bar'
+slug: 'Web/CSS/::-moz-progress-bar'
+translation_of: 'Web/CSS/::-moz-progress-bar'
+---
+<div> </div>
+
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Представляет собой индикатор прогресса внутри {{HTMLElement("progress")}} (Бар, отражающий текущий прогресс).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;progress value="30" max="100"&gt;30%&lt;/progress&gt;
+&lt;progress max="100"&gt;Неопределенный бар прогресса&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">::-moz-progress-bar {
+  background-color: red;
+}
+
+/* Задает неопределенным барам нулевую ширину */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<p>Первый бар сверху должен выглядеть так:</p>
+
+<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html
new file mode 100644
index 0000000000..086ccfa4ab
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html
@@ -0,0 +1,28 @@
+---
+title: '::-webkit-slider-thumb'
+slug: 'Web/CSS/::-webkit-slider-thumb'
+translation_of: 'Web/CSS/::-webkit-slider-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> CSS </span></font><strong>::-webkit-slider-thumb</strong></code> представляет собой ползунок, передвигаемый пользователем по линейке элемента {{HTMLElement("input")}} типа <code>"range"</code> для изменения числового значения атрибута <a href="en-US/docs/Web/HTML/Element/input#attr-value">value</a>.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью какой либо спецефикации. Это проприетарный псевдоэлемент исключительно для WebKit/Blink.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
+ <li>Похожие псевдоэлементы использующиеся в других браузерах:
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_after/index.html b/files/ru/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..e21cc2fe93
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_after/index.html
@@ -0,0 +1,177 @@
+---
+title: '::after (:after)'
+slug: 'Web/CSS/::after'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::after'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">В CSS, <strong><code>::after</code></strong> создаёт <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a>, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}.</span> По умолчанию является инлайновым.</p>
+
+<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* Добавить стрелки после ссылок */</span>
+<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span>
+  <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Псведоэлементы, созданные с помощью <code>::before</code> и <code>::after</code> <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">содержатся в блоке форматирования элемента</a>, и поэтому не применяются к <em><a href="/ru/docs/Web/CSS/Replaced_element">замещаемым элементам</a></em>, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p>В CSS3 появилась запись <code>::after</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:after</code>, введённую в CSS2.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простое_использование">Простое использование</h3>
+
+<p>Давайте создадим два класса, один для скучных параграфов и один для потрясающих. Затем мы сможем отметить каждый параграф добавлением псевдоэлемента в его конец.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="boring-text"&gt;Вот простой скучный текст.&lt;/p&gt;
+&lt;p&gt;Вот нормальный текст, который не является ни скучным, ни потрясающим.&lt;/p&gt;
+&lt;p class="exciting-text"&gt;Помогать MDN легко и весело.
+Просто нажмите кнопку редактирования, чтобы добавить новые живые примеры, или улучшить существующие примеры.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.exciting-text::after {
+  content: "&lt;- теперь это *просто* потрясающе!";
+  color: green;
+}
+
+.boring-text::after {
+   content: "&lt;- СКУЧНО!";
+   color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Простое_использование', 500, 150)}}</p>
+
+<h3 id="Пример_оформления">Пример оформления</h3>
+
+<p>Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ribbon"&gt;Посмотрите, где находится оранжевый прямоугольник.&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "Посмотрите на этот оранжевый прямоугольник.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Пример_оформления', 450, 20)}}</p>
+
+<h3 id="Подсказки">Подсказки</h3>
+
+<p>Следующий пример показывает использование <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемента</a> <code>::after</code> в сочетании с CSS-выражением <a href="/ru/docs/Web/CSS/attr"><code>attr()</code></a> и <a href="/ru/docs/Web/HTML/Global_attributes#attr-dataset">пользовательского <code>data-*</code> атрибута</a> <code>data-descr</code> для создания <em>подсказки</em> на чистом CSS.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Здесь находится живой пример вышеприведённого кода.&lt;br /&gt;
+  У нас есть некоторый &lt;span data-descr="коллекция слов и знаков препинаний"&gt;текст&lt;/span&gt; здесь с несколькими
+  &lt;span data-descr="маленькие всплывающие окошки, которые снова исчезают"&gt;подсказками&lt;/span&gt;.&lt;br /&gt;
+  Не стесняйтесь, наводите мышку чтобы &lt;span data-descr="не понимать буквально"&gt;взглянуть&lt;/span&gt;.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('Подсказки', 450, 120)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Нет значительных изменений по сравнению с предыдущей версией спецификации.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Разрешает переходы для свойств, определённых в псевдоэлементах.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Разрешает анимации на свойствах, определённых в псевдоэлементах.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Введение синтаксиса с двумя двоеточиями.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение, используя синтаксис с одним двоеточием.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.after")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_backdrop/index.html b/files/ru/web/css/_doublecolon_backdrop/index.html
new file mode 100644
index 0000000000..d95ee81c9e
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_backdrop/index.html
@@ -0,0 +1,82 @@
+---
+title: '::backdrop'
+slug: 'Web/CSS/::backdrop'
+tags:
+  - API
+  - CSS
+  - Dialog
+  - Fullscreen API
+  - HTML DOM
+  - Полный экран
+  - Псевдо-элемент
+  - Разметка
+  - диалоговое окно
+  - полноэкранный режим
+translation_of: 'Web/CSS/::backdrop'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::backdrop</code></strong> это прямоугольник с размерами {{Glossary("viewport", "окна")}}, который отрисовывается сразу же после отрисовки любого элемента в полноэкранном режиме. Это включает элементы, установленные в полноэкранный режим с помощью</span> <a href="/ru/docs/DOM/Using_fullscreen_mode">Fullscreen API</a> и элементы {{HTMLElement("dialog")}}.</p>
+
+<p>Когда несколько элементов находятся в полноэкранном режиме, подложка появляется под тем из них, который находится на переднем плане и над всеми остальными.</p>
+
+<pre class="brush: css no-line-numbers">/* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() */
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}</pre>
+
+<p>Все полноэкранные элементы появляются в порядке last-in/first out (LIFO - последним пришёл - первым ушёл) на специальном верхнем слое окна, который всегда отрисовывается последним (поэтому поверх остальных) до отрисовки содержимого окна. Псевдо-элемент <code>::backdrop</code> позволяет затемнить, стилизовать или полностью спрятать всё, что находится под элементом, когда он находится на этом верхнем слое.</p>
+
+<p><code>::backdrop</code> не наследует от других элементов и другие элементы не могут от него наследовать. Нет никаких ограничений на свойства, которые можно применять к этому псевдо-элементу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В этом примере, стиль подложки при открытии видео в полноэкранном режиме делаёт её серо-голубой, а не серой, какой она является по стандарту в большинстве браузеров.</p>
+
+<pre class="brush: css">video::backdrop {
+  background-color: #448;
+}
+</pre>
+
+<p>В результате окно выглядит так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16287/bbb-backdrop.png" style="height: 282px; width: 500px;"></p>
+
+<p>Обратите внимание на эффект серо-голуых полей сверху и снизу, где подложка видна. Обычно эта область чёрная, но её цвет изменён с помощью CSS кода выше.</p>
+
+<h2 id="Спецификации">Спецификации</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('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Впервые определено.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.backdrop")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":fullscreen")}} псевдо-класс</li>
+ <li>{{HTMLElement("dialog")}} HTML элемент</li>
+ <li><a href="/ru/docs/DOM/Using_fullscreen_mode">Fullscreen API</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_before/index.html b/files/ru/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..d8acf664a9
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_before/index.html
@@ -0,0 +1,234 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">В CSS, <strong><code>::before</code></strong> создаёт <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a>,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}.</span> По умолчания является инлайновым.</p>
+
+<pre class="brush: css"><code class="language-css"><span class="comment token">/* </span></code><code>Добавить сердце перед ссылками</code><code class="language-css"><span class="comment token"> */</span>
+<span class="selector token">a<span class="pseudo-class token">::before</span> </span><span class="punctuation token">{
+</span>  <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Псведоэлементы, созданные с помощью <code>::before</code> и <code>::after</code> <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">содержатся в блоке форматирования элемента</a>, и поэтому не применяются к <em><a href="/ru/docs/Web/CSS/Replaced_element">замещаемым элементам</a></em>, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p>В CSS3 появилась запись <code>::before</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:before</code>, введённую в CSS2.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Добавление_кавычек">Добавление кавычек</h3>
+
+<p>Этот простой пример использования псевдоэлементов <code>::before</code> позволяет добавлять кавычки. Здесь используется как псевдоэлемент <code>::before</code>, так и <code>{{Cssxref("::after")}}</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;q&gt;Немного кавычек&lt;/q&gt;, как он сказал, &lt;q&gt;лучше чем ничего.&lt;/q&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">q::before {
+  content: "«";
+  color: blue;
+}
+
+q::after {
+  content: "»";
+  color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Добавление_кавычек', '500', '50', '')}}</p>
+
+<h3 id="Пример_оформления">Пример оформления</h3>
+
+<p>Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ribbon"&gt;Посмотрите, где находится оранжевый прямоугольник.&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Посмотрите на этот оранжевый прямоугольник.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Пример_оформления', 450, 60)}}</p>
+
+<h3 id="Список_дел">Список дел</h3>
+
+<p>В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Купить молока&lt;/li&gt;
+  &lt;li&gt;Сходить на прогулку с собакой&lt;/li&gt;
+  &lt;li&gt;Тренироваться&lt;/li&gt;
+  &lt;li&gt;Написать код&lt;/li&gt;
+  &lt;li&gt;Слушать музыку&lt;/li&gt;
+  &lt;li&gt;Отдыхать&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<p>Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом <code>::before</code>, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.</p>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('Список_дел', 400, 300)}}</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">спецификации CSS</a>: "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент <code>&lt;span&gt;</code>, как в примере ниже, вместо того чтобы добавлять два пустых элемента <code>&lt;div/&gt;</code> до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+&lt;span id="floatme"&gt;"Плавающий перед" будет добавлен слева от текста
+и не позволит переполнению этой строки обтекать его снизу.
+Аналогично, "Плавающий после" будет добавлен справа от текста
+и не позволит переполнению этой строки обтекать его снизу.&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">#floatme { float: left; width: 50%; }
+
+/* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) */
+.example::before {
+  content: "Плавающий перед";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Плавающий после";
+  float: right;
+  width:25%
+}
+
+/* Для стилизации */
+.example::before, .example::after {
+  background: yellow;
+  color: red;
+}</pre>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample("Примечания")}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Нет значительных изменений по сравнению с предыдущей версией спецификации.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Разрешает переходы для свойств, определённых в псевдоэлементах.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Разрешает анимации на свойствах, определённых в псевдоэлементах.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Введение синтаксиса с двумя двоеточиями.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение, используя синтаксис с одним двоеточием.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.before")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("content")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html
new file mode 100644
index 0000000000..3530a8df68
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_cue/index.html
@@ -0,0 +1,76 @@
+---
+title: '::cue'
+slug: 'Web/CSS/::cue'
+translation_of: 'Web/CSS/::cue'
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> <a href="/ru/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> соответствует репликам <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> в выбранном элементе. Он может быть использован для задания <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">стилей титров и других реплик</a> в медиа с VTT треками.</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">::cue {
+  color: yellow;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Правила с <code>::cue</code> в селекторе ограничены в использовании CSS свойст следующим списком:</p>
+
+<ul>
+ <li>{{CSSxRef("background")}} и его свойства</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("font")}} и его свойства</li>
+ <li>{{CSSxRef("line-height")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline")}} и его свойства</li>
+ <li>{{CSSxRef("ruby-position")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}</li>
+ <li>{{CSSxRef("text-decoration")}} и его свойства</li>
+ <li>{{CSSxRef("text-shadow")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("white-space")}}</li>
+</ul>
+
+<p>Свойства применяются ко всему набору реплик, как если бы они были единым целым. Единственным исключением является <code>background</code> и его сокращённые свойства, которые прменяются к каждой реплике отдельно, чтобы не создавать блоки, которые занимают неожиданно большие области медиа.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.</p>
+
+<pre class="brush: css notranslate">::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.selectors.cue")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/WebVTT_API">Web Video Tracks Format (WebVTT)</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_first-letter/index.html b/files/ru/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..b023b36e3b
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,133 @@
+---
+title: '::first-letter (:first-letter)'
+slug: 'Web/CSS/::first-letter'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::first-letter'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::first-letter</code></strong> применяет стили к первой букве первой строки <a href="/ru/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">блочного элемента</a>, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).</p>
+
+<pre class="brush: css no-line-numbers">/* Стили для первой буквы элемента &lt;p&gt; */
+p::first-letter {
+  font-size: 130%;
+}</pre>
+
+<p>Может быть непросто определить первую букву элемента:</p>
+
+<ul>
+ <li>Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), and <em>other punctuation</em> (Po).</li>
+ <li>В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например <code>IJ</code> в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу <code>::first-letter</code>  (это слабо поддерживается браузерами, смотрите <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">таблицу совместимости</a> ниже).</li>
+ <li>Комбинация псевдоэлемента {{ cssxref("::before") }} и свойства {{ cssxref("content") }} может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу <code>::first-letter</code> будет соответствовать первая буква добавленного содержимого.</li>
+</ul>
+
+<div class="note">
+<p>В CSS3 появилась запись  <code>::first-letter</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:first-letter</code>, введённую в CSS2.</p>
+</div>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::first-letter</code>:</p>
+
+<ul>
+ <li>Все свойства, связанные с шрифтами: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} и {{ Cssxref("font-family") }}</li>
+ <li>Все свойства, связанные с фоном: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }} и {{cssxref("background-blend-mode")}}</li>
+ <li>Все свойства для внешних отступов: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li>
+ <li>Все свойства для внутренних отступов: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li>
+ <li>Все свойства, связанные с рамкой: сокращения {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}} и полные записи свойств</li>
+ <li>Свойства {{ cssxref("color") }}</li>
+ <li>Свойства {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (только если <code>float</code> равен <code>none</code>)</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Сделаем первую букву каждого абзаца красной и большой.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;-Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;_Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;"Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;'Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;*Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;#Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::first-letter {
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', '80%', 420) }}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки, {{cssxref("opacity")}} и {{ cssxref("box-shadow") }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td>
+   <td>{{ Spec2('CSS3 Text Decoration')}}</td>
+   <td>Разрешает использовать {{cssxref("text-shadow")}} с <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Введение синтаксиса с двумя двоеточиями. Определения поведения в граничных случаях, таких как внутри элементов списка или для некоторых специфичных языков (например Нидерландский диграф <code>IJ</code>).</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Нет измененений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение, используя синтаксис с одним двоеточием.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.first-letter")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_first-line/index.html b/files/ru/web/css/_doublecolon_first-line/index.html
new file mode 100644
index 0000000000..1a0af1b71b
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_first-line/index.html
@@ -0,0 +1,118 @@
+---
+title: '::first-line (:first-line)'
+slug: 'Web/CSS/::first-line'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::first-line'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::first-line</code></strong> применяет стили к первой строке <a href="/ru/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">блочного элемента</a>.</span> Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.</p>
+
+<pre class="brush: css no-line-numbers">/* Стили для первой строки элемента &lt;p&gt; */
+p::first-line {
+  color: red;
+}</pre>
+
+<div class="note">
+<p>В CSS3 появилась запись <code>::first-line</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:first-line</code>, введённую в CSS2.</p>
+</div>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::first-line</code>:</p>
+
+<ul>
+ <li>Все свойства, связанные с шрифтами: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} и {{Cssxref("font-family")}}</li>
+ <li>Все свойства, связанные с фоном: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{Cssxref("background-attachment")}} и {{cssxref("background-blend-mode")}}</li>
+ <li>Свойство {{cssxref("color")}}</li>
+ <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} и {{cssxref("line-height")}}</li>
+ <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} и {{cssxref("vertical-align")}}.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Стили будут применены только к первой строке этого параграфа.
+После этого, весь текст будет отображаться как обычно. Увидели, что я имею в виду?&lt;/p&gt;
+
+&lt;span&gt;Первая строка этого элемента не будет стилизована специальным образом
+потому что это не блочный элемент.&lt;/span&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
+  /* Многие свойства запрещены в псевдоэлементах ::first-line */
+  margin-left: 20px;
+  text-indent: 20px;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', 350, 160)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Более точно определяет, где <code>::first-letter</code> может использоваться.<br>
+    Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки и {{cssxref("opacity")}}.<br>
+    Определяет наследование <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Разрешает использовать {{cssxref("text-shadow")}} с <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Введение синтаксиса с двумя двоеточиями.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет измененений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Изначальное определение, используя синтаксис с одним двоеточием.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.first-line")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref("::first-letter")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.html b/files/ru/web/css/_doublecolon_grammar-error/index.html
new file mode 100644
index 0000000000..1db392cd80
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_grammar-error/index.html
@@ -0,0 +1,86 @@
+---
+title: '::grammar-error'
+slug: 'Web/CSS/::grammar-error'
+tags:
+  - CSS
+  - Псевдо-элемент
+  - Экспериментальные
+  - селектор
+translation_of: 'Web/CSS/::grammar-error'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::grammar-error</code></strong>  представляет сегмент текста, который {{glossary("user agent")}} пометил как грамматически неверный.</p>
+
+<h2 id="Доступные_свойства">Доступные свойства</h2>
+
+<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::grammar-error</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li>{{cssxref("outline")}} и его полные формы</li>
+ <li>{{cssxref("text-decoration")}} и связанные свойсва</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">::grammar-error</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простая_проверка_грамматики_документа">Простая проверка грамматики документа</h3>
+
+<p>В этом примере браузеры, поддерживающие псевдоэлемент, выделят грамматические ошибки, применив к ним заданные стили.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;My friends is coming to the party tonight.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">::grammar-error  {
+  text-decoration: underline red;
+  color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Simple_document_grammar_check', '100%', 60)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.grammar-error")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("::spelling-error")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_marker/index.html b/files/ru/web/css/_doublecolon_marker/index.html
new file mode 100644
index 0000000000..e04375066e
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_marker/index.html
@@ -0,0 +1,93 @@
+---
+title: '::marker'
+slug: 'Web/CSS/::marker'
+translation_of: 'Web/CSS/::marker'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Псевдоэлемент <strong><code>::marker</code></strong> применяет стили к маркеру элемента списка, которые обычно содержит значок или номер.</span> Работает с любым элементом или псевдоэлементом, к которого установлен <code><a href="/en-US/docs/Web/CSS/display">display: list-item</a></code>, например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}.</p>
+
+<pre class="brush: css no-line-numbers notranslate">::marker {
+  color: blue;
+  font-size: 1.2em;
+}</pre>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Только некоторые CSS-свойства могут быть использованы с <code>::marker</code> в качестве селектора:</p>
+
+<ul>
+ <li>Все <a href="/en-US/docs/Web/CSS/CSS_Fonts">свойства шрифтов</a></li>
+ <li>{{CSSxRef("white-space")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}} и {{CSSxRef("direction")}} </li>
+ <li>Свойство {{CSSxRef("content")}}</li>
+ <li>Все <a href="/en-US/docs/Web/CSS/CSS_Animations#CSS_Properties">animation</a> и <a href="/en-US/docs/Web/CSS/CSS_Transitions#Properties">transition</a> свойства</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>The specification states that additional CSS properties may be supported in future.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Peaches&lt;/li&gt;
+  &lt;li&gt;Apples&lt;/li&gt;
+  &lt;li&gt;Plums&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.marker")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML элементы, у которые есть маркеры списка по умолчанию: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html
new file mode 100644
index 0000000000..3f6624206e
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_placeholder/index.html
@@ -0,0 +1,151 @@
+---
+title: '::placeholder'
+slug: 'Web/CSS/::placeholder'
+tags:
+  - '::placeholder'
+  - CSS
+  - Псевдоэлемент
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::placeholder</code></strong> представляет собой <a href="/ru/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">текст placeholder</a> в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.</p>
+
+<pre class="brush: css no-line-numbers notranslate">::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}</pre>
+
+<p>В <code>::placeholder</code> можно использовать только те CSS свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светлосерый текст.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Красный_текст">Красный текст</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html line-numbers language-html notranslate">&lt;input placeholder="Введите что-нибудь!"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Красный_текст", 200, 60)}}</p>
+
+<h3 id="Зелёный_текст">Зелёный текст</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush:html line-numbers language-html notranslate">&lt;input placeholder="Введите что-нибудь..."&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">input::placeholder {
+  color: green;
+}
+</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Зелёный_текст", 200, 60)}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<h3 id="Цветовой_контраст">Цветовой контраст</h3>
+
+<h4 id="Контрастность">Контрастность</h4>
+
+<p>Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.</p>
+
+<p>Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.</p>
+
+<p>Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Использование">Использование</h4>
+
+<p>Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в {{htmlelement("input")}} элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.</p>
+
+<p>Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать <code><a href="/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> для программного связывания {{HTMLElement("input")}} элемента с подсказкой.</p>
+
+<p>В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют <code>aria-describedby</code> для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.</p>
+
+<pre class="brush:html line-numbers language-html notranslate">&lt;label for="user-email"&gt;Ваш email адрес&lt;/label&gt;
+&lt;span id="user-email-hint" class="input-hint"&gt;Пример: jane@sample.com&lt;/span&gt;
+&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
+</pre>
+
+<ul>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<h3 id="Режим_высокой_контрастности_Windows">Режим высокой контрастности Windows</h3>
+
+<p>Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в <a href="/ru/docs/Web/CSS/-ms-high-contrast">режиме высокой контрастности Windows</a>. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.</p>
+
+<ul>
+ <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li>
+</ul>
+
+<h3 id="Метки">Метки</h3>
+
+<p>Placeholder не является заменой элемента {{htmlelement("label")}}. Без метки, которая программно связывается с формой с помощью {{htmlattrxref("for", "label")}} и {{htmlattrxref("id")}} аттрибутов, такие программы, как скринридеры не смогут анализировать элементы {{htmlelement("input")}}.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Первоначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.placeholder")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Псевдокласс {{cssxref(":placeholder-shown")}}, который позволяет применять стили к элементу с <em><strong>активным </strong></em>placeholder.</li>
+ <li>Связанные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/ru/docs/Learn/HTML/Forms">HTML-формы</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_selection/index.html b/files/ru/web/css/_doublecolon_selection/index.html
new file mode 100644
index 0000000000..a359df7cd1
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_selection/index.html
@@ -0,0 +1,109 @@
+---
+title: '::selection'
+slug: 'Web/CSS/::selection'
+tags:
+  - CSS
+  - Experimental
+  - Layoout
+  - Reference
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::selection'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> <strong><code>::selection</code> </strong>позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).</span></p>
+
+<pre class="brush: css no-line-numbers">::selection {
+  background: cyan;
+}</pre>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::selection</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li>{{cssxref("outline")}} и его длинные записи</li>
+ <li>{{cssxref("text-decoration")}} и связанные свойства</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<div class="warning">
+<p>Заметим, что, в частности, свойство {{cssxref("background-image")}} игнорируется.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">/* синтаксис Firefox */
+::-moz-selection
+
+{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Этот текст будет стилизован особым образом при выделении.&lt;/div&gt;
+&lt;p&gt;Также попробуйте выделить текст в этом параграфе.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Сделаем выделенный текст золотым с красным фоном */
+::-moz-selection {
+  color: gold;
+  background: red;
+}
+
+::selection {
+  color: gold;
+  background: red;
+}
+
+/* Сделаем выделенный в параграфе текст белым на синем фоне */
+p::-moz-selection {
+  color: white;
+  background: blue;
+}
+
+p::selection {
+  color: white;
+  background: blue;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание:</strong> Хотя псевдоэлемент <code>::selection</code> присутствовал в черновиках стандарта CSS Selectors Level 3, он был убран в течение фазы Candidate Recommendation, так как его поведение было недостаточно проработано (особенно с вложенным элементами) и согласованность не была достигнута <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(основываясь на обсуждении в списке рассылки W3C Style)</a>. Этот псевдоэлемент был возвращён в <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a>.</p>
+</div>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.selection")}}</p>
+</div>
diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html
new file mode 100644
index 0000000000..e64d20abe3
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_slotted/index.html
@@ -0,0 +1,106 @@
+---
+title: '::slotted()'
+slug: 'Web/CSS/::slotted'
+translation_of: 'Web/CSS/::slotted'
+---
+<div>{{ CSSRef }}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::slotted()</code></strong> представляет собой любой элемент, помещенный в слот внутри HTML-шаблона (дополнительная информация в <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>).</p>
+
+<p>Это работает только при использовании внутри CSS, помещенного в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещенный в слот; он нацелен только на фактические элементы.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выбирает любой элемент, помещенный в слот */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* Выбирает только &lt;span&gt;, помещенный в слот */
+::slotted(span) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующие фрагменты взяты из нашей демо  <a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">slotted-pseudo-element</a>  (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">see it live also</a>).</p>
+
+<p>В этом демо мы использовали простой шаблом с тремя слотами:</p>
+
+<pre class="brush: html notranslate">&lt;template id="person-template"&gt;
+  &lt;div&gt;
+    &lt;h2&gt;Personal ID Card&lt;/h2&gt;
+    &lt;slot name="person-name"&gt;NAME MISSING&lt;/slot&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;slot name="person-age"&gt;AGE MISSING&lt;/slot&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;slot name="person-occupation"&gt;OCCUPATION MISSING&lt;/slot&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p>Пользовательский элемент — <code>&lt;person-details&gt;</code> — определяется следующим образом:</p>
+
+<pre class="brush: js notranslate">customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})</pre>
+
+<p>Вы увидите, что при заполнении элемента <code>style</code> содержимым мы выбираем все  slotted-элементы (<code>::slotted(*)</code>) и задаем им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые еще не были успешно заполнены.</p>
+
+<p>Элемент выглядит следующим образом при вставке на страницу:</p>
+
+<pre class="brush: html notranslate">&lt;person-details&gt;
+  &lt;p slot="person-name"&gt;Dr. Shazaam&lt;/p&gt;
+  &lt;span slot="person-age"&gt;Immortal&lt;/span&gt;
+  &lt;span slot="person-occupation"&gt;Superhero&lt;/span&gt;
+&lt;/person-details&gt;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}</td>
+   <td>{{ Spec2('CSS Scope') }}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.slotted")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Web components</a></li>
+</ul>
diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.html b/files/ru/web/css/adjacent_sibling_combinator/index.html
new file mode 100644
index 0000000000..42893ac5e3
--- /dev/null
+++ b/files/ru/web/css/adjacent_sibling_combinator/index.html
@@ -0,0 +1,130 @@
+---
+title: Смежные селекторы
+slug: Web/CSS/Adjacent_sibling_combinator
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<p>{{CSSRef("Selectors")}}</p>
+
+<p>Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">former_element + target_element { <em>style properties</em> }
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<div id="Example_1">
+<pre class="brush: css">li:first-of-type + li {
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Один&lt;/li&gt;
+  &lt;li&gt;Два&lt;/li&gt;
+  &lt;li&gt;Три&lt;/li&gt;
+&lt;/ul&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Example_1', 200, 100)}}</p>
+
+<p>Так же может использоваться для задания стиля определенного класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:</p>
+
+<pre class="brush: css">img + span.caption {
+  font-style: italic;
+}
+</pre>
+
+<p>сработает только на тех тегах span, для которых задан класс caption:</p>
+
+<pre class="brush: html">&lt;img src="photo1.jpg"&gt;&lt;span class="caption"&gt;Первая фотка&lt;/span&gt;
+&lt;img src="photo2.jpg"&gt;&lt;span class="caption"&gt;Вторая&lt;/span&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span class="short_text" id="result_box" lang="ru"><span class="hps">Интернет эксплорер</span></span> 7 не обновляет стили корректно, когда элемент динамически размещается до элемента, отобранном селектором. А в <span class="short_text" id="result_box" lang="ru"><span class="hps">Интернет эксплорер</span></span> 8, если вставлен динамически кликом на ссылку, стиль превдокласса first-child не применяется до того, как ссылка потеряет фокус.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/General_sibling_selectors">Селекторы следующего элемента</a></li>
+</ul>
diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html
new file mode 100644
index 0000000000..26d4bf0857
--- /dev/null
+++ b/files/ru/web/css/align-content/index.html
@@ -0,0 +1,287 @@
+---
+title: align-content
+slug: Web/CSS/align-content
+translation_of: Web/CSS/align-content
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство {{cssxRef('', 'CSS')}} <strong><code>align-content</code></strong> устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси {{cssxRef('CSS_Flexible_Box_Layout', 'flexbox')}} контейнера или вдоль блочной оси {{cssxRef('CSS_Grid_Layout', 'grid')}} контейнера.</p>
+
+<p>The interactive example below use Grid Layout to demonstrate some of the values of this property.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера можно найти в репозитории на GitHub. Если Вы хотите посодействовать развитию проекта, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на включение кода.</p>
+
+<p>Это свойство не влияет на однострочные flex-контейнеры (т.е. с <code>flex-wrap: nowrap</code>)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Основное позиционное выравнивание */
+/* align-content не принимает значения left и right */
+align-content: center;     /* Расположить элементы вокруг центра */
+align-content: start;      /* Расположить элементы в начале */
+align-content: end;        /* Расположить элементы в конце */
+align-content: flex-start; /* Расположить элементы flex в начале */
+align-content: flex-end;   /* Расположить элементы flex в конце */
+
+/* Нормальное выравнивание */
+align-content: normal;
+
+/* Выравнивание по базовой линии */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Распределённое выравнивание */
+align-content: space-between; /* Распределить элементы равномерно
+                                 Первый элемент находится на одном уровне с началом,
+                                 последней - совпадает с концом */
+align-content: space-around;  /* Распределить элементы равномерно
+                                 Элементы имеют половинное пространство
+                                 на каждом конце */
+align-content: space-evenly;  /* Распределить элементы равномерно
+                                 Элементы имеют одинаковое пространство вокруг них */
+align-content: stretch;       /* Распределить элементы равномерно
+                                 Растянуть 'auto'-размерные элементы, чтобы заполнить
+                                 контейнер */
+
+/* Выравнивание переполнения (overflow) */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Глобальные значения */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Элементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.</dd>
+ <dt><code>end</code></dt>
+ <dd>Элементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.<br>
+ Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.<br>
+ Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Элементы расположены в их дефолтной позиции как если бы <code>align-content</code> не было определено.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd><img alt="базовая линия - это линия, на которой «сидит» большинство букв и ниже которой располагаются нижние выносные элементы (свисания)." src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd>
+ <dd>Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.<br>
+ Резервное выравнивание для <code>first baseline</code> равно <code>start</code>, для <code>last baseline</code> - <code>end</code>.</dd>
+ <dd><code>space-between</code></dd>
+ <dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.</dd>
+ <dd><code>stretch</code></dd>
+ <dd>Если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого <code>auto</code>-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{cssxRef('max-height')}}/{{cssxRef('max-width')}} (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4] notranslate">#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div &gt; div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container" class="flex"&gt;
+  &lt;div id="item1"&gt;1&lt;/div&gt;
+  &lt;div id="item2"&gt;2&lt;/div&gt;
+  &lt;div id="item3"&gt;3&lt;/div&gt;
+  &lt;div id="item4"&gt;4&lt;/div&gt;
+  &lt;div id="item5"&gt;5&lt;/div&gt;
+  &lt;div id="item6"&gt;6&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="display"&gt;display: &lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option value="flex"&gt;flex&lt;/option&gt;
+    &lt;option value="grid"&gt;grid&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="values"&gt;align-content: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="normal"&gt;normal&lt;/option&gt;
+    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+    &lt;option value="center" selected&gt;center&lt;/option&gt;
+    &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+    &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+    &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="left"&gt;left&lt;/option&gt;
+    &lt;option value="right"&gt;right&lt;/option&gt;
+
+    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+
+    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
+    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
+    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
+    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
+    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
+    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
+    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
+    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.alignContent = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', 260, 290)}}</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Добавлены значения [ first | last ]? baseline, start, end, left, right, unsafe | safe.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div>
+
+
+<h3 id="Support_in_Flex_layout">Support in Flex layout</h3>
+
+<p>{{Compat("css.properties.align-content.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout">Support in Grid layout</h3>
+
+<p>{{Compat("css.properties.align-content.grid_context")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="../../CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Использование гибких блоков CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/align-items/index.html b/files/ru/web/css/align-items/index.html
new file mode 100644
index 0000000000..0740e845d0
--- /dev/null
+++ b/files/ru/web/css/align-items/index.html
@@ -0,0 +1,149 @@
+---
+title: align-items
+slug: Web/CSS/align-items
+translation_of: Web/CSS/align-items
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>align-items</code></strong> выравнивает flex-элементы текущей flex-линии таким же образом, как и <code><a href="/en/CSS/justify-content" title="en/CSS/justify-content">justify-content</a></code>, но в перпендикулярном направлении.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Подробнее и больше информации читайте в <a href="https://developer.mozilla.org/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Использование гибких блоков CSS</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Align to cross-start */
+align-items: flex-start;
+
+/* Align to cross-end */
+align-items: flex-end;
+
+/* Центрировать элементы в поперечной оси */
+align-items: center;
+
+/* Выровняйте базовые линии предметов */
+align-items: baseline;
+
+/* Растянуть предметы, чтобы соответствовать */
+align-items: stretch;
+
+/* Глобальные значения */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Эффект этого ключевого слова зависит от режима макета, в котором мы находимся::
+ <ul>
+  <li>В абсолютно позиционированных макетах ключевое слово ведет себя как <code>start</code> в <em>замененных</em> абсолютно позиционированных блоках, и как <code>stretch</code> во <em>всех других</em> абсолютно позиционированных блоках.</li>
+  <li>В статическом положении абсолютно позиционированных макетов ключевое слово ведет себя как <code>stretch</code>.</li>
+  <li>Для гибких элементов ключевое слово ведет себя как <code>stretch</code>.</li>
+  <li>Для элементов сетки это ключевое слово ведет к поведению, аналогичному <code>stretch</code>, за исключением полей с соотношением сторон или внутренних размеров, где оно ведет себя как <code>start</code>.</li>
+  <li>Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.</li>
+ </ul>
+ </dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Край поперечного начала края гибкого элемента выровнен с краем поперечного начала линии.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.</dd>
+ <dt><code>center</code></dt>
+ <dd>Внешний отступ полей гибкого элемента центрируется в пределах линии на поперечной оси. Если поперечный размер элемента больше, чем у гибкого контейнера, он будет одинаково переполнен в обоих направлениях.</dd>
+ <dt><code>baseline</code></dt>
+ <dd>All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Элементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.</dd>
+ <dt>
+ <h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Flexbox', '#align-items', 'align-items') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>21.0{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("20.0") }}[1]</td>
+   <td>11.0 [2]</td>
+   <td>12.10</td>
+   <td>7.0{{ property_prefix("-webkit") }} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("20.0") }}[1]</td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>7.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Чтобы активировать поддержку flexbox в Firefox 18 и 19, пользователь должен посетить about:config  и изменить значение предпочтения<code> layout.css.flexbox.enabled</code> на <code>true</code>. Многострочный flexbox поддерживается с Firefox 28.</p>
+
+<p>[2] В Internet Explorer 10-11 (но не 12+), если в элементах flex столбца есть <code>align-items: center;</code> установите на них, и если их содержание слишком велико, они будут выходить за границы своего контейнера. Смотрите <a href="https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container">Flexbug #2</a> для получения дополнительной информации..</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Использование гибких блоков CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/align-self/index.html b/files/ru/web/css/align-self/index.html
new file mode 100644
index 0000000000..829e7c10ff
--- /dev/null
+++ b/files/ru/web/css/align-self/index.html
@@ -0,0 +1,138 @@
+---
+title: align-self
+slug: Web/CSS/align-self
+tags:
+  - CSS
+  - flexbox
+  - Свойства
+translation_of: Web/CSS/align-self
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>align-self</code></strong> выравнивает flex-элементы по текущей flex-линии, переопределяя значение свойства <a href="/en/CSS/align-items" title="en/CSS/flex-align"><code>align-items</code></a>. Если у какого-либо flex-элемента <strong>margin</strong> в поперечной оси выставлен в <code>auto</code>, то <code>align-self</code> игнорируется.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Данное свойство не применяется к block-level boxes и к ячейкам таблицы</p>
+
+<p>Подробнее и больше информации читайте в <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* Keyword values */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> auto<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span>
+
+<span class="comment token">/* Positional alignment */</span>
+<span class="comment token">/* align-self does not take left and right values */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span> <span class="comment token">/* Put the item around the center */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> start<span class="punctuation token">;</span> <span class="comment token">/* Put the item at the start */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> end<span class="punctuation token">;</span> <span class="comment token">/* Put the item at the end */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> self-start<span class="punctuation token">;</span> <span class="comment token">/* Align the item flush at the start */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> self-end<span class="punctuation token">;</span> <span class="comment token">/* Align the item flush at the end */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> flex-start<span class="punctuation token">;</span> <span class="comment token">/* Put the flex item at the start */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> flex-end<span class="punctuation token">;</span> <span class="comment token">/* Put the flex item at the end */</span>
+
+<span class="comment token">/* Baseline alignment */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> baseline<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> first baseline<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> last baseline<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> stretch<span class="punctuation token">;</span> <span class="comment token">/* Stretch 'auto'-sized items to fit the container */</span>
+
+<span class="comment token">/* Overflow alignment */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> safe center<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> unsafe center<span class="punctuation token">;</span>
+
+<span class="comment token">/* Global values */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Computes to the parent's {{cssxref("align-items")}} value.</dd>
+ <dt><code>normal</code></dt>
+ <dd>The effect of this keyword is dependent of the layout mode we are in:
+ <ul>
+  <li>In absolutely-positioned layouts, the keyword behaves like <code>start</code> on <em>replaced</em> absolutely-positioned boxes, and as <code>stretch</code> on <em>all other</em> absolutely-positioned boxes.</li>
+  <li>In static position of absolutely-positioned layouts, the keyword behaves as <code>stretch</code>.</li>
+  <li>For flex items, the keyword behaves as <code>stretch</code>.</li>
+  <li>For grid items, this keyword leads to a behavior similar to the one of <code>stretch</code>, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like <code>start</code>.</li>
+  <li>The property doesn't apply to block-level boxes, and to table cells.</li>
+ </ul>
+ </dd>
+ <dt><code>self-start</code></dt>
+ <dd>Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.</dd>
+ <dt><code>center</code></dt>
+ <dd>The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
+ The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>If the combined size of the items along the cross axis is less than the size of the alignment container and the item is <code>auto</code>-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size of all <code>auto</code>-sized items exactly fills the alignment container along the cross axis.</dd>
+ <dt><code>safe</code></dt>
+ <dd>If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.</dd>
+ <dd> </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}</td>
+   <td>{{ Spec2('CSS3 Box Alignment') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<h3 id="Support_in_Flex_layout">Support in Flex layout</h3>
+
+<p>{{Compat("css.properties.align-self.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout">Support in Grid layout</h3>
+
+<p>{{Compat("css.properties.align-self.grid_context")}}</p>
+
+<div>{{CSSRef}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li>
+ <li>The {{cssxref("align-items")}} property</li>
+</ul>
diff --git a/files/ru/web/css/all/index.html b/files/ru/web/css/all/index.html
new file mode 100644
index 0000000000..6b8e6d79f8
--- /dev/null
+++ b/files/ru/web/css/all/index.html
@@ -0,0 +1,153 @@
+---
+title: all
+slug: Web/CSS/all
+translation_of: Web/CSS/all
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Сокращенное свойство CSS<em> </em><code><strong>all</strong></code> сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>initial</code></dt>
+ <dd>Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу, на значение их родителя. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.</dd>
+ <dt><code>unset</code></dt>
+ <dd>Это ключевое слово указывает на изменение всех свойств, применимых к элементу или родительскому элементу, на значение их родителя, если они наследуются или на их начальное значение, если нет. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.</dd>
+ <dt><code>revert</code></dt>
+ <dd>Если каскадным значением свойства является ключевое слово revert, поведение зависит от источника, которому принадлежит объявление:
+ <dl>
+  <dt>user-agent origin</dt>
+  <dd>Эквивалент unset.</dd>
+  <dt>user origin</dt>
+  <dd>Откатывает каскад до уровня пользовательского агента, так что указанное значение вычисляется так, как если бы для этого свойства не были заданы правила уровня автора или уровня пользователя.</dd>
+  <dt>author origin</dt>
+  <dd>Откатывает каскад до уровня пользователя, так что указанное значение вычисляется так, как если бы для этого свойства не было задано никаких правил уровня автора. В целях возврата этот источник включает в себя источники переопределения и анимации.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p id="HTML"><strong>HTML</strong></p>
+
+<pre class="brush: html">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<p id="CSS"><strong>CSS</strong></p>
+
+<pre class="brush: css">html {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+</pre>
+
+<p id="Results">Результат:</p>
+
+<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="No_all_property">No <code>all</code> property</h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }</pre>
+{{EmbedLiveSample("ex0", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определенным фоном и цветом текста. Он также ведет себя как <em>block </em>элемент<em> </em>: текст, который следует за ним, находится под ним.</p>
+</div>
+
+<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allunset"><code>all:unset</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: unset; }</pre>
+{{EmbedLiveSample("ex1", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это <em>inline</em> элемент (начальное значение), его {{cssxref("background-color")}} является <code>transparent</code> (начальное значение), но его {{cssxref("font-size")}} по-прежнему <code>small</code> унаследованное значение) и его {{cssxref("color")}} является <code>blue</code> (унаследованное значени).</p>
+</div>
+
+<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinitial"><code>all:initial</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: initial; }</pre>
+{{EmbedLiveSample("ex2", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это<em> inline</em> элемент(начальное значение), его {{cssxref("background-color")}} является <code>transparent</code> (начальное значение), его {{cssxref("font-size")}} является <code>normal</code> (начальное значение) и его {{cssxref("color")}} является <code>black</code> (начальное значение).</p>
+</div>
+
+<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinherit"><code>all:inherit</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }</pre>
+{{EmbedLiveSample("ex3", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это <em>block</em> элемент (унаследованное значение от содержащего его {{HTMLElement("div")}}), его {{cssxref("background-color")}} является <code>transparent</code> (унаследованное значение), его {{cssxref("font-size")}} является <code>small</code> (унаследованное значение) и его {{cssxref("color")}} является <code>blue</code> (унаследованное значение).</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS4 Cascade') }}</td>
+   <td>Добавлено значение <code>revert</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.all")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>Значения свойств в масштабе CSS:  {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, и {{cssxref("revert")}}.</p>
diff --git a/files/ru/web/css/angle/index.html b/files/ru/web/css/angle/index.html
new file mode 100644
index 0000000000..19a6acc16f
--- /dev/null
+++ b/files/ru/web/css/angle/index.html
@@ -0,0 +1,92 @@
+---
+title: <angle>
+slug: Web/CSS/angle
+tags:
+  - CSS
+  - Web
+  - Тип данных CSS
+translation_of: Web/CSS/angle
+---
+<div>{{ CSSRef() }}</div>
+
+<p dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>&lt;angle&gt;</code></strong> представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в {{cssxref ("&lt;gradient&gt;")}}  и в некоторых функциях {{cssxref ("transform")}}.</p>
+
+<p dir="ltr">{{EmbedInteractiveExample("pages/css/type-angle.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;angle&gt;</code> состоит из числа ({{cssxref("&lt;number&gt;")}}), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После <code>0</code> указывать единицу измерения необязательно.</p>
+
+<p>Опционально перед числом может стоять знак <code>+</code> или <code>-</code> . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, <code>90deg</code> равняется <code>-270deg</code>, а <code>1turn</code> равняется <code>4turn</code>. Тем не менее, для достижения динамических свойств эфект будет другим. Например, при применении {{cssxref ("animation")}} или {{cssxref ("transition")}}. </p>
+
+<h3 id="Единицы_измерения">Единицы измерения</h3>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">deg</span></font></dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Представляет угол в <a href="https://ru.wikipedia.org/wiki/Градус_(геометрия)">градусах</a>. Один полный круг равен <code>360deg</code>. Например: <code>0deg</code>, <code>90deg</code>, <code>14.23deg</code>.</p>
+ </dd>
+ <dt id="grad"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">grad</span></font></dt>
+ <dd>Представляет угол в <a href="https://ru.wikipedia.org/wiki/Град,_минута,_секунда">градах</a>. Один полный круг равен <code>400grad</code>. Например: <code>0grad</code>, <code>100grad</code>, <code>38.8grad</code>.</dd>
+ <dt id="rad"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">rad</span></font></dt>
+ <dd>Представляет угол в <a href="https://ru.wikipedia.org/wiki/Радиан">радианах</a>. Один полный круг равен 2π или примерно <code>6.2832rad</code>. <code>1rad</code> - это 180/π градусов. Например: <code>0rad</code>, <code>1.0708rad</code>, <code>6.2832rad</code>.</dd>
+ <dt id="turn"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">turn</span></font></dt>
+ <dd>Представляет угол в количестве <a href="https://ru.wikipedia.org/wiki/Оборот_(единица_измерения)">оборотов</a>. Один полный круг равен <code>1turn</code>. Например: <code>0turn</code>, <code>0.25turn</code>, <code>1.2turn</code>.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td>
+   <td>
+    <p>Прямой угол: <code>90deg = 100grad = 0.25turn</code><code style="white-space: nowrap;">≈</code><code> 1.5708rad</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td>
+   <td>Развернутый угол: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td>
+   <td>Прямой угол (против часовой стрелки): <code>-90deg = -100grad = -0.25turn</code> <code style="white-space: nowrap;">≈</code><code> -1.5708rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td>
+   <td>
+    <p>Нулевой угол: <code>0deg = 0grad = 0turn</code><code> </code><code style="white-space: nowrap;">=</code><code> 0rad</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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('CSS4 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS4 Values') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.types.angle")}}</p>
+
+<div id="compat-mobile"></div>
diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..bdb16f6d40
--- /dev/null
+++ b/files/ru/web/css/animation-delay/index.html
@@ -0,0 +1,126 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+  - CSS
+  - CSS анимации
+  - CSS свойства
+translation_of: Web/CSS/animation-delay
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-delay</code></strong> определяет время задежки перед стартом анимации.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</p>
+
+<p>Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.</p>
+
+<p>При указании отрицательного значения, анимация также начнется непременно, но ее воспроизведение начнется не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">animation-delay: 3s;
+animation-delay: 2s, 4ms;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в милисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Посмотрите <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS анимации</a> для примера.</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12{{property_prefix("-o")}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимаций</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-direction/index.html b/files/ru/web/css/animation-direction/index.html
new file mode 100644
index 0000000000..d3d2f0c36e
--- /dev/null
+++ b/files/ru/web/css/animation-direction/index.html
@@ -0,0 +1,191 @@
+---
+title: animation-direction
+slug: Web/CSS/animation-direction
+translation_of: Web/CSS/animation-direction
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS-свойство <strong><code>animation-direction</code></strong> определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.<br>
+ <br>
+ <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Также удобно использовать сокращенное свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.</span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Одиночная анимация */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Несколько анимаций */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Глобальные значения */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Анимация проигрывается вперед каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в <em>начальное </em>положение и снова проигрывается. Это значение по умолчанию.</dd>
+ <dt><code>reverse</code></dt>
+ <dd>Анимация проигрывается наоборот, с <em>последнего </em>положения до первого и потом снова сбрасывается в <em>конечное </em>положение и снова проигрывается.</dd>
+ <dt><code>alternate</code></dt>
+ <dd>Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с <em>начального</em> положения, доходит до <em>конечного</em>, а во втором цикле продолжает с <em>конечного </em>и доходит до <em>начального </em>и так далее, в зависимости от количества циклов анимации <code>animation-iteration-count</code>.</dd>
+ <dt><code>alternate-reverse</code></dt>
+ <dd>Анимация начинает проигрываться с <em>конечного </em>положения и доходит до <em>начального</em>, а в следующем цикле продолжая с <em>начального </em>переходит в <em>конечное</em>, в зависимости от количества итераций анимации <code>animation-iteration-count</code>.</dd>
+ <dd></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите примеры <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS а</a>нимаций.</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Animations', '#animation-direction', 'animation-direction')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.50</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>reverse</code></td>
+   <td>19</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>alternate-reverse</code></td>
+   <td>19</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Unprefixed</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>reverse</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>alternate-reverse</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Без префиксов</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-duration/index.html b/files/ru/web/css/animation-duration/index.html
new file mode 100644
index 0000000000..5ffc1224da
--- /dev/null
+++ b/files/ru/web/css/animation-duration/index.html
@@ -0,0 +1,131 @@
+---
+title: animation-duration
+slug: Web/CSS/animation-duration
+translation_of: Web/CSS/animation-duration
+---
+<div>{{CSSRef}} {{ SeeCompatTable() }}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <strong><code>animation-duration</code></strong> устанавливает длительность анимации во времени за один цикл.</p>
+
+<p> </p>
+
+<p>Значение по умолчанию <strong><code>0s</code> </strong>определяет, что анимация не должна выполняться.</p>
+
+<p>Удобно использовать сокращенное свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+</pre>
+
+<h3 id="Примеры">Примеры</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd> </dd>
+</dl>
+
+<dl>
+ <dd>Длительность анимации определяется в секундах <code>s</code> или в миллисекундах <code>ms</code>. По умолчанию стоит значение <code>0s</code>. Отрицательные значения являются недействительными.</dd>
+</dl>
+
+<div class="note"><strong>Предупреждение:</strong> Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными <code>0s</code>.</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры_2">Примеры</h2>
+
+<p>Смотрите для примеров <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS анимации</a>.</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('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0{{ property_prefix("-webkit") }}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>12{{ property_prefix("-o") }}<br>
+    12.10</td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0{{ property_prefix("-webkit") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.2{{ property_prefix("-webkit") }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..6e1d0ef170
--- /dev/null
+++ b/files/ru/web/css/animation-fill-mode/index.html
@@ -0,0 +1,235 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+  - CSS
+  - CSS анимации
+  - CSS свойства
+translation_of: Web/CSS/animation-fill-mode
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en/CSS" title="CSS">CSS</a> свойство <strong><code>animation-fill-mode</code></strong> определяет, как нужно применять стили к объекту анимации до и после ее выполнения.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Несколько значений могут быть заданы через запятую. */
+/* Каждое значение соответствует для анимации в animation-name<code>.</code> */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Стили анимации не будут применены к элементу до и после ее выполнения.</dd>
+ <dt><code>forwards</code></dt>
+ <dd>По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">последний ключевой кадр</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>любое</td>
+    <td><code>100%</code> или <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>любое</td>
+    <td><code>0%</code> или <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>четное</td>
+    <td><code>0%</code> или <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>нечетное</td>
+    <td><code>100%</code> или <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>четное</td>
+    <td><code>100%</code> или <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>нечетное</td>
+    <td><code>0%</code> или <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>Элемент сохранит стиль первого <a href="/en-US/docs/CSS/@keyframes">ключевого кадра</a> на протяжении периода {{cssxref("animation-delay")}}. Первый ключевой кадр определяется значением {{cssxref("animation-direction")}}:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">первый ключевой кадр</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> или <code>alternate</code></td>
+    <td><code>0%</code> или <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> или <code>alternate-reverse</code></td>
+    <td><code>100%<font face="Open Sans, Arial, sans-serif"> или </font></code><code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Наведите курсор мыши на серый блок&lt;/p&gt;
+&lt;div class="demo"&gt;
+  &lt;div class="grows"&gt;Этот просто растет&lt;/div&gt;
+  &lt;div class="growsandstays"&gt;Этот растет и остается большим&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}</pre>
+
+<p>{{EmbedLiveSample('Example',700,300)}}</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('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-iteration-count/index.html b/files/ru/web/css/animation-iteration-count/index.html
new file mode 100644
index 0000000000..cffef0088d
--- /dev/null
+++ b/files/ru/web/css/animation-iteration-count/index.html
@@ -0,0 +1,133 @@
+---
+title: animation-iteration-count
+slug: Web/CSS/animation-iteration-count
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/animation-iteration-count
+---
+<div>{{ CSSRef() }}</div>
+
+<div>{{ SeeCompatTable() }}</div>
+
+<h2 id="Обзор">Обзор</h2>
+
+<p><a href="/ru/CSS" title="CSS">CSS</a><code><font face="Open Sans, Arial, sans-serif"> свойство </font><strong>animation-iteration-count</strong></code> определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.</p>
+
+<p>Наиболее удобно использовать это свойство в сокращенном варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">animation-iteration-count: infinite;
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+animation-iteration-count: 2, 0, infinite;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>infinite</code></dt>
+ <dd>Анимация повторяется бесконечно.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Сколько раз анимация будет повторяться; по-умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).</dd>
+</dl>
+
+<h3 id="Правила_синтаксиса">Правила синтаксиса</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите примеры  <a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy">CSS анимации</a>.</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('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10 </td>
+   <td>12 {{ property_prefix("-o") }}<br>
+    12.10</td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatChrome(43.0)}}<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy" title="Обучение CSS анимациям">Ипользование CSS анимацией</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html
new file mode 100644
index 0000000000..b1d1dc080b
--- /dev/null
+++ b/files/ru/web/css/animation-name/index.html
@@ -0,0 +1,133 @@
+---
+title: animation-name
+slug: Web/CSS/animation-name
+translation_of: Web/CSS/animation-name
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-name</code></strong> задаёт список анимаций, чтобы примененить к элементу. Каждое имя является правилом {{cssxref("@keyframes")}}, которое задаёт значения свойств для последовательности анимации.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-name.html")}}</div>
+
+
+
+<p>Часто удобно использовать сокращенное свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css"><code class="language-css"><span class="comment token">/* Single animation */</span></code>
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+<code class="language-css"><span class="comment token">/* Multiple animations */</span></code>
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+<code class="language-css"><span class="comment token">/* Global values */</span></code>
+animation-name: <a href="/en-US/docs/Web/CSS/initial">initial</a>
+animation-name: <a href="/en-US/docs/Web/CSS/inherit">inherit</a>
+animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a>
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.</dd>
+ <dt>{{cssxref("custom-ident","&lt;custom-ident&gt;")}}</dt>
+ <dd>Строка, идентифицирующая анимацию. Этот индентификатор состоит из комбинации букв без учета регистра от <code>a</code> до <code>z</code>, цифр от <code>0</code> до <code>9</code>, подчеркивания (<code>_</code>), и/или черты (<code>-</code>). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть <code>none</code>, <code>unset</code>, <code>initial</code>, или <code>inherit</code> в любой комбинации случаев.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>См. <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a>.</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10 </td>
+   <td>12 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-play-state/index.html b/files/ru/web/css/animation-play-state/index.html
new file mode 100644
index 0000000000..293765d1e9
--- /dev/null
+++ b/files/ru/web/css/animation-play-state/index.html
@@ -0,0 +1,130 @@
+---
+title: animation-play-state
+slug: Web/CSS/animation-play-state
+translation_of: Web/CSS/animation-play-state
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <strong><code>animation-play-state</code></strong> определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.</p>
+
+<p>Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнется с начала.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Одна анимация */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Несколько анимаций */
+animation-play-state: paused, running, running;
+
+/* Глобальный значения */
+animation-play-state: inherited;
+animation-play-state: initial;
+animation-play-state: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>running</code></dt>
+ <dd>Анимация проигрывается.</dd>
+ <dt><code>paused</code></dt>
+ <dd>Анимация поставлена на паузу.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox"><code>{{csssyntax}}</code>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>См. <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a>.</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимаций</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html
new file mode 100644
index 0000000000..c9c5c388b1
--- /dev/null
+++ b/files/ru/web/css/animation-timing-function/index.html
@@ -0,0 +1,92 @@
+---
+title: animation-timing-function
+slug: Web/CSS/animation-timing-function
+translation_of: Web/CSS/animation-timing-function
+---
+<p>{{CSSRef}}</p>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <code><strong>animation-timing-function</strong></code> задаёт как происходит анимация в течении длительности каждого цикла.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</p>
+
+
+
+<p>Достаточно удобно использовать сокращённое свойство {{cssxref("animation")}} для того, чтобы установить все свойства для анимации одновременно.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Keyword values */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease-in<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease-out<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease-in-out<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> linear<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> step-start<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> step-end<span class="punctuation token">;</span>
+
+<span class="comment token">/* Function values */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">cubic-bezier</span><span class="punctuation token">(</span><span class="number token">0.1</span><span class="punctuation token">,</span> <span class="number token">0.7</span><span class="punctuation token">,</span> <span class="number token">1.0</span><span class="punctuation token">,</span> <span class="number token">0.1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">4</span><span class="punctuation token">,</span> end<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Steps Function keywords */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">4</span><span class="punctuation token">,</span> jump-start<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> jump-end<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">20</span><span class="punctuation token">,</span> jump-none<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">5</span><span class="punctuation token">,</span> jump-both<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">6</span><span class="punctuation token">,</span> start<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">8</span><span class="punctuation token">,</span> end<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Multiple animations */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease<span class="punctuation token">,</span> step-start<span class="punctuation token">,</span> <span class="function token">cubic-bezier</span><span class="punctuation token">(</span><span class="number token">0.1</span><span class="punctuation token">,</span> <span class="number token">0.7</span><span class="punctuation token">,</span> <span class="number token">1.0</span><span class="punctuation token">,</span> <span class="number token">0.1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Global values */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<p>Временные функции могут быть установлены в пользовательских keyframes'ах в правилах <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a>. Если в keyframe'е значение <code><strong>animation-timing-function</strong></code> указано, соответствующее значение <code><strong>animation-timing-function</strong></code> от элемента к которому анимация применена используется для этого keyframe'а.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;timingfunction&gt;</code></dt>
+ <dd>Каждый {{cssxref("&lt;timing-function&gt;")}} представляет функцию расчета времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>См. <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="en-US/docs/CSS/CSS_animations">CSS animations</a>.</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('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.animation-timing-function")}}</p>
+
+<p><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Смотрите также</span></p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Использование CSS анимаций</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation/index.html b/files/ru/web/css/animation/index.html
new file mode 100644
index 0000000000..3abcbb06a7
--- /dev/null
+++ b/files/ru/web/css/animation/index.html
@@ -0,0 +1,118 @@
+---
+title: animation
+slug: Web/CSS/animation
+translation_of: Web/CSS/animation
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>animation</code></strong> это <a href="/en-US/docs/Web/CSS/Shorthand_properties">короткая запись</a> для {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}} и {{cssxref("animation-play-state")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/animation.html")}}</p>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions#Which_CSS_properties_are_animatable">Описание того, какие свойства являются анимируемые</a> доступно; стоит отметить, что это описание также подходит для <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS переходов</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css notranslate">/* @keyframes duration | timing-function | delay |
+   iteration-count | direction | fill-mode | play-state | name */
+  animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+  animation: 3s slidein;
+</pre>
+
+<p>Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как {{cssxref("&lt;time&gt;")}} присваивается {{cssxref("animation-duration")}}, и второй назначен {{cssxref("animation-delay")}}.</p>
+
+<p>Note that order is also important within each animation definition for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsing, keywords that are valid for properties other than {{cssxref("animation-name")}} whose values were not found earlier in the shorthand must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Посмотрите примеры <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS анимаций.</a></p>
+
+<h3 id="Cylon_Eye">Cylon Eye</h3>
+
+<p>Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:</p>
+
+<pre class="brush: html notranslate">&lt;div class="view_port"&gt;
+  &lt;div class="polling_message"&gt;
+    Listening for dispatches
+  &lt;/div&gt;
+  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+     -moz-animation: 4s linear 0s infinite alternate move_eye;
+       -o-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+</pre>
+
+<p>{{EmbedLiveSample('Cylon_Eye')}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Animations', '#animation', 'animation')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.animation")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Использование  CSS анимации</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html
new file mode 100644
index 0000000000..af72de18ef
--- /dev/null
+++ b/files/ru/web/css/appearance/index.html
@@ -0,0 +1,2668 @@
+---
+title: 'appearance (-moz-appearance, -webkit-appearance)'
+slug: Web/CSS/appearance
+tags:
+  - Стилизация
+  - кастомные свойства
+translation_of: Web/CSS/appearance
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS свойство <strong><code>-moz-appearance</code></strong> используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.</p>
+
+<p>Свойство <strong><code>-webkit-appearance</code></strong> используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают <code>-webkit-appearance</code>, для обеспечения совместимости.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div>
+
+
+
+<p>Это свойство часто используется в таблицах стилей <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial">XUL</a> для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации <a href="/en-US/docs/XBL">XBL</a> виджетов, которые поставляются с платформой Mozilla.</p>
+
+<div class="note">
+<p><strong>Примечание о совместимости</strong>: Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово <code>none</code> не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* CSS модуль базового интерфейса 4 уровня, значения */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: button-bevel;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: menulist-button;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Частичный список доступных значений в Gecko */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: <code>button-bevel;</code>
+
+/* Частичный список доступных значений в WebKit/Blink (таких как Gecko и Edge) */
+-webkit-appearance: <code>media-mute-button</code>;
+-webkit-appearance: caret;
+</pre>
+
+<p>Свойство <code>-moz-appearance</code> может быть указано как одно значение, выбранное из списка ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<p><code>&lt;appearance&gt;</code> является одним из нижеследующих ключевых свойств:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Value</th>
+   <th>Demo</th>
+   <th>Browser</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>none</code></td>
+   <td>
+    <div class="hidden" id="sampleNone">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance:none;
+-webkit-appearance:none;
+appearance:none; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>No special styling is applied. This is the default.</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> {{Experimental_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAuto">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: auto;
+-webkit-appearance: auto;
+appearance:auto; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}</td>
+   <td>None</td>
+   <td>The user agent selects the appropriate special styling based on the element. Acts as <code>none</code> on elements with no special styling.</td>
+  </tr>
+  <tr>
+   <td><code>attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAttachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: attachment;
+-webkit-appearance: attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>borderless-attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-borderless-attachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: borderless-attachment;
+-webkit-appearance: borderless-attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button;
+-webkit-appearance: button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is drawn like a button.</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-down;
+-webkit-appearance: button-arrow-down; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-next</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowNext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-next;
+-webkit-appearance: button-arrow-next; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-previous</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowPrevious">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-previous;
+-webkit-appearance: button-arrow-previous; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-up;
+-webkit-appearance: button-arrow-up; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>button-bevel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonBevel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-bevel;
+-webkit-appearance: button-bevel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-focus</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonFocus">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-focus;
+-webkit-appearance: button-focus; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>caps-lock-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-caps-lock-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: caps-lock-indicator;
+-webkit-appearance: caps-lock-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>caret</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCaret">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: caret;
+-webkit-appearance: caret; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>checkbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox;
+-webkit-appearance: checkbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is drawn like a checkbox, including only the actual "checkbox" portion.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-container;
+-webkit-appearance: checkbox-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-label;
+-webkit-appearance: checkbox-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>checkmenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckmenuitem">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: checkmenuitem;
+-webkit-appearance: checkmenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>color-well</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-color-well">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: color-well;
+-webkit-appearance: color-well; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td><code>input type=color</code></td>
+  </tr>
+  <tr>
+   <td><code>continuous-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-continuous-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: continuous-capacity-level-indicator;
+-webkit-appearance: continuous-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>default-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-default-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: default-button;
+-webkit-appearance: default-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>discrete-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-discrete-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: discrete-capacity-level-indicator;
+-webkit-appearance: discrete-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>dualbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleDualButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: dualbutton;
+-webkit-appearance: dualbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>groupbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleGroupbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: groupbox;
+-webkit-appearance: groupbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>inner-spin-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleInnerSpinButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: inner-spin-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>image-controls-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-image-controls-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: image-controls-button;
+-webkit-appearance: image-controls-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>list-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-list-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: list-button;
+-webkit-appearance: list-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td>datalist</td>
+  </tr>
+  <tr>
+   <td><code>listbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListBox">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: listbox;
+-webkit-appearance: listbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>listitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: listitem;
+-webkit-appearance: listitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-enter-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaEnterFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-enter-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-exit-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaExitFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-exit-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider;
+-webkit-appearance: media-fullscreen-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider-thumb">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider-thumb;
+-webkit-appearance: media-fullscreen-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaMuteButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-overlay-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaOverlayPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-overlay-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-return-to-realtime-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-return-to-realtime-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-return-to-realtime-button;
+-webkit-appearance: media-return-to-realtime-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-rewind-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-rewind-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-rewind-button;
+-webkit-appearance: media-rewind-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-seek-back-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-back-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-back-button;
+-webkit-appearance: media-seek-back-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-seek-forward-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-forward-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-forward-button;
+-webkit-appearance: media-seek-forward-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-toggle-closed-captions-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaToggleClosedCaptionsButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-toggle-closed-captions-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-sliderthumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderContainer">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-volume-slider-mute-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-volume-slider-mute-button;
+-webkit-appearance: media-volume-slider-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-volume-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-controls-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-controls-dark-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-dark-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-dark-bar-background;
+-webkit-appearance: media-controls-dark-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-controls-fullscreen-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsFullscreenBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-fullscreen-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-controls-light-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-light-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-light-bar-background;
+-webkit-appearance: media-controls-light-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-current-time-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaCurrentTimeDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-current-time-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-time-remaining-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaTimeRemainingDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-time-remaining-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuarrow;
+-webkit-appearance: menuarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menubar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenubar">
+    <pre class="brush: css">
+div { color: balck;
+-moz-appearance: menubar;
+-webkit-appearance: menubar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menucheckbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menucheckbox;
+-webkit-appearance: menucheckbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menuimage</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuImage">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuimage;
+-webkit-appearance: menuimage; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitem;
+-webkit-appearance: menuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered.</td>
+  </tr>
+  <tr>
+   <td><code>menuitemtext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItemText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitemtext;
+-webkit-appearance: menuitemtext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>menulist</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuList">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist;
+-webkit-appearance: menulist; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-button;
+-webkit-appearance: menulist-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is styled as a button that would indicate a menulist can be opened.</td>
+  </tr>
+  <tr>
+   <td><code>menulist-text</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-text;
+-webkit-appearance: menulist-text; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-textfield;
+-webkit-appearance: menulist-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is styled as the text field for a menulist. (Not implemented for the Windows platform)</td>
+  </tr>
+  <tr>
+   <td><code>menupopup</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuPopup">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menupopup;
+-webkit-appearance: menupopup; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menuradio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuradio;
+-webkit-appearance: menuradio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menuseparator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: menuseparator;
+-webkit-appearance: menuseparator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>meter</code></td>
+   <td>
+    <div class="hidden" id="sampleMeter">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: meter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Firefox</td>
+   <td>New in Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>meterbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterbar;
+-webkit-appearance: meterbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>New in Fx 16. Use <code>meter</code> instead</td>
+  </tr>
+  <tr>
+   <td><code>meterchunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterchunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterchunk;
+-webkit-appearance: meterchunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>New in Fx 16. Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>number-input</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleNumberinput">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: number-input;
+-webkit-appearance: number-input; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progress-bar</code></td>
+   <td>
+    <div class="hidden" id="sampleProgressBarWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Firefox</td>
+   <td>New in Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>progress-bar-value</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarValueWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar-value; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progressbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progressbar;
+-webkit-appearance: progressbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>The element is styled like a progress bar. Use <code>progress-bar</code> instead</td>
+  </tr>
+  <tr>
+   <td><code>progressbar-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: progressbar-vertical;
+-webkit-appearance: preogressbar-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progresschunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk;
+-webkit-appearance: progresschunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>progresschunk-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunkVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk-vertical;
+-webkit-appearance: progresschunk-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>push-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="samplePushButton">
+    <pre class="brush: css">
+div{ color: black; -webkit-appearance: push-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>radio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio;
+-webkit-appearance: radio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is drawn like a radio button, including only the actual "radio button" portion.</td>
+  </tr>
+  <tr>
+   <td><code>radio-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-container;
+-webkit-appearance: radio-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64, the element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.</td>
+  </tr>
+  <tr>
+   <td><code>radio-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-label;
+-webkit-appearance: radio-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>radiomenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radiomenuitem;
+-webkit-appearance: radiomenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>range</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRange">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range;
+-webkit-appearance: range; }</pre>
+    range
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>range-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRangeThumb">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range-thumb;
+-webkit-appearance: range-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>rating-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-rating-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: rating-level-indicator;
+-webkit-appearance: rating-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>resizer</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizer">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: resizer;
+-webkit-appearance: resizer; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63</td>
+  </tr>
+  <tr>
+   <td><code>resizerpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizerPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: resizerpanel;
+-webkit-appearance: resizerpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scale-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-horizontal;
+-webkit-appearance: scale-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbend</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleThumbEnd">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbend;
+-webkit-appearance: scalethumbend; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scalethumb-horizontal;
+-webkit-appearance: scalethumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbstart</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbStart">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbstart;
+-webkit-appearance: scalethumbstart; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbtick</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbTick">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbtick;
+-webkit-appearance: scalethumbtick; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumb-vertical;
+-webkit-appearance: scalethumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scale-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-vertical;
+-webkit-appearance: scale-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-down;
+-webkit-appearance: scrollbarbutton-down; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-left;
+-webkit-appearance: scrollbarbutton-left; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-right;
+-webkit-appearance: scrollbarbutton-right; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-up;
+-webkit-appearance: scrollbarbutton-up; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-horizontal;
+-webkit-appearance: scrollbarthumb-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-vertical;
+-webkit-appearance: scrollbarthumb-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-horizontal;
+-webkit-appearance: scrollbartrack-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-vertical;
+-webkit-appearance: scrollbarbartrack-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: searchfield;
+-webkit-appearance: searchfield; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-decoration;
+-webkit-appearance: searchfield-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-decoration;
+-webkit-appearance: searchfield-results-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-button;
+-webkit-appearance: searchfield-results-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield-cancel-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchFieldCancelButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: searchfield-cancel-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>snapshotted-plugin-overlay</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-snapshotted-plugin-overlay">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: snapshotted-plugin-overlay;
+-webkit-appearance: snapshotted-plugin-overlay; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>separator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: separator;
+-webkit-appearance: separator; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>sheet</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSheet">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: sheet;
+-webkit-appearance: sheet; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td>
+   <td>None</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>slider-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>slider-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinner">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: spinner;
+-webkit-appearance: spinner; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-downbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerDownbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-downbutton;
+-webkit-appearance: spinner-downbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-textfield;
+-webkit-appearance: spinner-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-upbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerUpbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-upbutton;
+-webkit-appearance: spinner-upbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>splitter</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSplitter">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: splitter;
+-webkit-appearance: splitter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>square-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSquareButton">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: square-button;
+-webkit-appearance: square-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>statusbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbar;
+-webkit-appearance: statusbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>statusbarpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBarPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbarpanel;
+-webkit-appearance: statusbarpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>tab</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTab">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: tab;
+-webkit-appearance: tab; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>tabpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanel;
+-webkit-appearance: tabpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>tabpanels</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanels">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanels;
+-webkit-appearance: tabpanels; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-back</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowBack">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-back;
+-webkit-appearance: tab-scroll-arrow-back; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-forward</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowForward">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-forward;
+-webkit-appearance: tab-scroll-arrow-forward; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>textarea</code></td>
+   <td>
+    <div class="hidden" id="sampleTextArea">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: textarea; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield;
+-webkit-appearance: textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>textfield-multiline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextfieldMultiline">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield-multiline;
+-webkit-appearance: textfield-multiline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Use <code>textarea</code> instead</td>
+  </tr>
+  <tr>
+   <td><code>toolbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbar;
+-webkit-appearance: toolbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton;
+-webkit-appearance: toolbarbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton-dropdown</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButtonDropdown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton-dropdown;
+-webkit-appearance: toolbarbutton-dropdown; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbargripper</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarGripper">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbargripper;
+-webkit-appearance: toolbargripper; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbox;
+-webkit-appearance: toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>tooltip</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTooltip">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tooltip;
+-webkit-appearance: tooltip; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheader</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeader">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheader;
+-webkit-appearance: treeheader; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheadercell</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderCell">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: treeheadercell;
+-webkit-appearance: treeheadercell; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheadersortarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderSortArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheadersortarrow;
+-webkit-appearance: treeheadersortarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeitem;
+-webkit-appearance: treeitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeLine">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeline;
+-webkit-appearance: treeline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treetwisty</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwisty">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwisty;
+-webkit-appearance: treetwisty; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treetwistyopen</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwistyOpen">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwistyopen;
+-webkit-appearance: treetwistyopen; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeview</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeView">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeview;
+-webkit-appearance: treeview; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>relevancy-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-relevancy-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: relevancy-level-indicator;
+-webkit-appearance: relevancy-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-borderless-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBorderlessGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-borderless-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-browsertabbar-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBrowsertabbarToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-browsertabbar-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communicationstext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationstext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communicationstext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communications-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationsToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communications-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is <code>-moz-win-communicationstext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-exclude-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinExcludeGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-exclude-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-glass</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This style applies the Aero Glass effect to the element.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-media-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinMediaToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-media-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is <code>-moz-win-mediatext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBoxMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-close</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonClose">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-close; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-maximize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMaximize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-maximize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-minimize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMinimize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-minimize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-restore</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonRestore">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-restore; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-bottom</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameBottom">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-bottom; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-left; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-right; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebarMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-apple-pay-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleApplePayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: -apple-pay-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td><strong>iOS and macOS only</strong>. Available on the web starting in iOS 10.1 and macOS 10.12.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:</p>
+
+<pre class="brush: css">.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+</pre>
+
+<p>Смотрите также <a href="http://jsfiddle.net/go392m5s/">this JSFiddle</a> в качестве примера, показывающего как вы можете использвать <code>appearance: none</code> для стилизации радио кнопок и чекбоксов.</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS4 Basic UI", "#appearance-switching", "appearance")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка  браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.appearance")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Definition of <code>appearance</code> in CSS 3 Basic User Interface</a> (Candidate Recommendation from 2004-05-11).</li>
+ <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Dropped CSS3 features from the UI spec.4</a></li>
+</ul>
diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html
new file mode 100644
index 0000000000..fd71ca762f
--- /dev/null
+++ b/files/ru/web/css/at-rule/index.html
@@ -0,0 +1,76 @@
+---
+title: At-rules
+slug: Web/CSS/At-rule
+translation_of: Web/CSS/At-rule
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><strong>At-rules</strong> это <a href="/ru/docs/Web/CSS/Синтаксис#CSS_statements">CSS операторы</a>, которые показывают CSS как себя вести. Они начинаются со знака at, '<code>@</code>' (<code>U+0040 КОММЕРЧЕСКОЕ AT</code>), сопровождается идентификатором, и включает в себя всё до следующей точки с запятой, '<code>;</code>' (<code>U+003B ТОЧКА С ЗАПЯТОЙ</code>), или до следующего <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Синтаксис#Блоки_объявлений_CSS">CSS блока</a>, в зависимости от того, что наступит раньше.</span></p>
+
+<pre class="brush: css">/* Общая структура */
+@ИДЕНТИФИКАТОР (ПРАВИЛО);
+
+/* Пример: говорит браузеру использовать UTF-8 кодировку символов */
+@charset "utf-8";</pre>
+
+<p>Существует несколько at-правил, обозначаемые идентификаторами, каждое из которых имеет свой синтаксис:</p>
+
+<ul>
+ <li>{{cssxref("@charset")}} — Определяет кодировку символов, используемый таблицей стилей.</li>
+ <li>{{cssxref("@import")}} — Сообщает движку CSS включить внешнюю таблицу стилей.</li>
+ <li>{{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.</li>
+ <li><strong><em>Вложенные at-правила</em></strong> — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
+  <ul>
+   <li>{{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенному с помощью медиазапроса.</li>
+   <li>{{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.</li>
+   <li>{{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.</li>
+   <li>{{cssxref("@page")}} — Описывает аспект изменений макета, который будет применен при печати документа.</li>
+   <li>{{cssxref("@font-face")}} — Описывает аспект внешнего шрифта для загрузки.</li>
+   <li>{{cssxref("@keyframes")}} — Описывает аспект промежуточных шагов в последовательности анимации CSS.</li>
+   <li>{{cssxref("@viewport")}} {{experimental_inline}} — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)</li>
+   <li>{{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределенного набора стилей.</li>
+   <li>{{cssxref("@font-feature-values")}} (плюс <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> и <code>@character-variant</code>)<br>
+    — Определите общие имена в {{cssxref("font-option-alternates")}} для функции, которая по-разному активируется в OpenType <em>(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)</em></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Условные_групповые_правила"><span style="letter-spacing: -0.00278rem;">Условные групповые правила</span></h2>
+
+<p><span style="font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">Как и значения свойств, каждое at-правило имеет свой синтаксис. Тем не менее, некоторые из них могут быть сгруппированы в специальную категорию, называемую Условные групповые правила. Эти операторы имеют общий синтаксис, и каждый из них может включать вложенные операторы - либо наборы правил, либо вложенные правила. Кроме того, все они передают общее семантическое значение - все они связывают некоторый тип условия, которое в любой момент оценивается как истинное или ложное. Если условие оценивается как истинное, то будут применяться все операторы в группе. Условные групповые правила описываются в <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> и в:</span></p>
+
+<ul>
+ <li>{{cssxref("@media")}},</li>
+ <li>{{cssxref("@supports")}},</li>
+ <li>{{cssxref("@document")}}. <em>(deferred to Level 4 of CSS Spec) </em></li>
+</ul>
+
+<p>Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределенное количество вложений.</p>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Стандартизирует <code>@-webkit-keyframes</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Читайте_также">Читайте также</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/attr()/index.html b/files/ru/web/css/attr()/index.html
new file mode 100644
index 0000000000..dfcd64f78f
--- /dev/null
+++ b/files/ru/web/css/attr()/index.html
@@ -0,0 +1,202 @@
+---
+title: attr
+slug: Web/CSS/attr()
+translation_of: Web/CSS/attr()
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>С помощью функции <a href="/en-US/docs/Web/CSS">CSS</a> <code>attr()</code> можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a>.</p>
+
+<p>Функцию <code>attr()</code> можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:js notranslate">/* Пример простого использования */
+attr(data-count);
+attr(title);
+
+/* С типом */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* с фоллбэком */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>Название атрибута элемента HTML, на который ссылаемся в CSS.</dd>
+ <dt><code style="white-space: nowrap;">&lt;type-or-unit&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>
+ <div class="translate-form__result-text typo typo_text_l i-bem typo_js_inited">Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <code>&lt;type-or-unit&gt;</code> в качестве значения для данного атрибута недопустимо, выражение <code>attr()</code> также будет недопустимым. Если этот параметр опущен, по умолчанию используется <code>string</code> . Список допустимых значений:</div>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Ключевое слово</th>
+    <th scope="col">Тип</th>
+    <th scope="col">Комментарий</th>
+    <th scope="col">Значение по умолчанию</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td>{{cssxref("&lt;string&gt;")}}</td>
+    <td>The attribute value is treated as a CSS {{cssxref("&lt;string&gt;")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.</td>
+    <td>An empty string</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;color&gt;")}}</td>
+    <td>The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("&lt;string&gt;")}} value.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>currentColor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;url&gt;")}}</td>
+    <td>The attribute value is parsed as a string that is used inside a CSS <code>url()</code>function.<br>
+     Relative URL are resolved relatively to the original document, not relatively to the style sheet.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;integer&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;integer&gt;")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;number&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;length&gt;")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;length&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;angle&gt;")}} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{cssxref("&lt;angle&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;time&gt;")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("&lt;time&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;frequency&gt;")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;frequency&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;percentage&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;percentage&gt;")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code> {{experimental_inline}}</dt>
+ <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code>&lt;fallback&gt;</code> value must be of the type defined by <code>&lt;type-or-unit&gt;</code>. If not set, CSS will use the default value defined for each <code>&lt;type-or-unit&gt;</code>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css notranslate">p::before {
+  content: attr(data-foo) " ";
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Examples", '100%', '80')}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#attr', 'attr()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("&lt;string&gt;")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Limited to the {{cssxref("content")}} property; always return a {{cssxref("&lt;string&gt;")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.types.attr")}}</p>
diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html
new file mode 100644
index 0000000000..290db85234
--- /dev/null
+++ b/files/ru/web/css/attribute_selectors/index.html
@@ -0,0 +1,154 @@
+---
+title: Селекторы атрибутов
+slug: Web/CSS/Attribute_selectors
+translation_of: Web/CSS/Attribute_selectors
+---
+<p><span class="s1">{{CSSRef("Selectors")}}</span></p>
+
+<h2 id="Summary" name="Summary">Обзор</h2>
+
+<p>Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.</p>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd>Обозначает элемент с атрибутом по имени attr.</dd>
+ <dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.</dd>
+ <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value</dd>
+ <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подкодом.</dd>
+ <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr значение которого начинается с "value"</dd>
+ <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"</dd>
+ <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">/* Все span с атрибутом "lang" будут жирными */
+span[lang] {font-weight:bold;}
+
+/* Все span в Португалии будут зелеными */
+span[lang="pt"] {color:green;}
+
+/* Все span с американским английским будут синими */
+span[lang~="en-us"] {color: blue;}
+
+/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */
+span[lang|="zh"] {color: red;}
+
+/* Все внутренние ссылки будут иметь золотой фон */
+a[href^="#"] {background-color:gold}
+
+/* Все ссылки с url заканчивающимся на .cn будут красными */
+a[href$=".cn"] {color: red;}
+
+/* Все ссылки содержащие "example" в url будут иметь серый фон */
+a[href*="example"] {background-color: #CCCCCC;}
+</pre>
+
+<pre class="brush: html">&lt;div class="hello-example"&gt;
+    &lt;a href="http://example.com"&gt;English:&lt;/a&gt;
+    &lt;span lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="hello-example"&gt;
+    &lt;a href="#portuguese"&gt;Portuguese:&lt;/a&gt;
+    &lt;span lang="pt"&gt;Olá Mundo!&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="hello-example"&gt;
+    &lt;a href="http://example.cn"&gt;Chinese (Simplified):&lt;/a&gt;
+    &lt;span lang="zh-CN"&gt;世界您好！&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="hello-example"&gt;
+    &lt;a href="http://example.cn"&gt;Chinese (Traditional):&lt;/a&gt;
+    &lt;span lang="zh-TW"&gt;世界您好！&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 250, 100) }}</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('CSS3 Selectors', '#attribute-selectors', 'attribute selectors') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функциональность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>7</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функциональность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="http://dev.l-c-n.com/CSS3-selectors/browser-support.php" rel="noreferrer">CSS селекторы: базовая поддержка браузерами</a></li>
+ <li><a href="http://kimblim.dk/css-tests/selectors/" rel="noreferrer">Совместимость с браузерами селекторов и псевдо-селекторов CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/backdrop-filter/index.html b/files/ru/web/css/backdrop-filter/index.html
new file mode 100644
index 0000000000..409d8095de
--- /dev/null
+++ b/files/ru/web/css/backdrop-filter/index.html
@@ -0,0 +1,130 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+translation_of: Web/CSS/backdrop-filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>backdrop-filter</code></strong> позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему <em>за</em> элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.</p>
+
+<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Keyword value */</span></code><code class="language-css">
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
+
+<span class="comment token">/* фильтр URL в SVG */</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="token url">url(commonfilters.svg#filter)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* значения &lt;filter-function&gt; */</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">blur</span><span class="punctuation token">(</span><span class="number token">2</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">brightness</span><span class="punctuation token">(</span><span class="number token">60</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">contrast</span><span class="punctuation token">(</span><span class="number token">40</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">drop-shadow</span><span class="punctuation token">(</span><span class="number token">4</span><span class="token unit">px</span> <span class="number token">4</span><span class="token unit">px</span> <span class="number token">10</span><span class="token unit">px</span> blue<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">grayscale</span><span class="punctuation token">(</span><span class="number token">30</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">hue-rotate</span><span class="punctuation token">(</span><span class="number token">120</span><span class="token unit">deg</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">invert</span><span class="punctuation token">(</span><span class="number token">70</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">opacity</span><span class="punctuation token">(</span><span class="number token">20</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">sepia</span><span class="punctuation token">(</span><span class="number token">90</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">saturate</span><span class="punctuation token">(</span><span class="number token">80</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Несколько фильтров */</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="token url">url(filters.svg#filter)</span> <span class="function token">blur</span><span class="punctuation token">(</span><span class="number token">4</span><span class="token unit">px</span><span class="punctuation token">)</span> <span class="function token">saturate</span><span class="punctuation token">(</span><span class="number token">150</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Глобальные значения */</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Фильтр отключен для фона</dd>
+ <dt><code>&lt;filter-function-list&gt;</code></dt>
+ <dd>Перечень фильтров, разделенных пробелами функций {{cssxref("&lt;filter-function&gt;")}} или <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">SVG фильтра</a>, которые применены для фона.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.box</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span> <span class="number token">255</span><span class="punctuation token">,</span> <span class="number token">255</span><span class="punctuation token">,</span> <span class="number token">0.3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">5</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span>
+  <span class="property token">text-align</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+  <span class="property token">line-height</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
+ <span class="property token">-webkit-backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">blur</span><span class="punctuation token">(</span><span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">blur</span><span class="punctuation token">(</span><span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">50</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">max-height</span><span class="punctuation token">:</span> <span class="number token">50</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">20</span><span class="token unit">px</span> <span class="number token">40</span><span class="token unit">px</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">html,
+body</span> <span class="punctuation token">{</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">body</span> <span class="punctuation token">{</span>
+  <span class="property token">background-image</span><span class="punctuation token">:</span> <span class="token url">url('https://lorempixel.com/400/200/')</span><span class="punctuation token">;</span>
+  <span class="property token">background-position</span><span class="punctuation token">:</span> center center<span class="punctuation token">;</span>
+  <span class="property token">background-repeat</span><span class="punctuation token">:</span> no-repeat<span class="punctuation token">;</span>
+  <span class="property token">background-size</span><span class="punctuation token">:</span> cover<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.container</span></span> <span class="punctuation token">{</span>
+  <span class="property token">align-items</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
+  <span class="property token">justify-content</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="punctuation token">}</span></code></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>backdrop-filter: blur(10px)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Примеры", 600, 400)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
+   <td>{{Spec2('Filters 2.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Building iOS-like transparency effects in CSS with backdrop-filter</a></li>
+</ul>
diff --git a/files/ru/web/css/backface-visibility/index.html b/files/ru/web/css/backface-visibility/index.html
new file mode 100644
index 0000000000..c4b1dd40f6
--- /dev/null
+++ b/files/ru/web/css/backface-visibility/index.html
@@ -0,0 +1,207 @@
+---
+title: backface-visibility
+slug: Web/CSS/backface-visibility
+translation_of: Web/CSS/backface-visibility
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>backface-visibility</code></strong> определяет, видно ли заднюю грань элемента, когда он повернут к пользователю.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<p>Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D, задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве. (Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевых слов */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* Глобальные значения */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;</pre>
+
+<p>Свойство <code>backface-visibility</code> указывается в качестве одного из ключевых слов, перечисленных ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Задняя сторона видна, когда повернута к пользователю.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Задняя поверхность скрыта, что делает элемент невидимым, когда он повернутый от пользователя.</dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере показан куб с прозрачными гранями.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
+    &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;
+      &lt;div class="container"&gt;
+        &lt;div class="cube showbf"&gt;
+          &lt;div class="face front"&gt;1&lt;/div&gt;
+          &lt;div class="face back"&gt;2&lt;/div&gt;
+          &lt;div class="face right"&gt;3&lt;/div&gt;
+          &lt;div class="face left"&gt;4&lt;/div&gt;
+          &lt;div class="face top"&gt;5&lt;/div&gt;
+          &lt;div class="face bottom"&gt;6&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;p&gt;
+        Since all faces are partially transparent,
+        the back faces (2, 4, 5) are visible
+        through the front faces (1, 3, 6).
+      &lt;/p&gt;
+    &lt;/td&gt;
+    &lt;td&gt;
+      &lt;div class="container"&gt;
+        &lt;div class="cube hidebf"&gt;
+          &lt;div class="face front"&gt;1&lt;/div&gt;
+          &lt;div class="face back"&gt;2&lt;/div&gt;
+          &lt;div class="face right"&gt;3&lt;/div&gt;
+          &lt;div class="face left"&gt;4&lt;/div&gt;
+          &lt;div class="face top"&gt;5&lt;/div&gt;
+          &lt;div class="face bottom"&gt;6&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;p&gt;
+        The three back faces (2, 4, 5) are
+        hidden.
+      &lt;/p&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Классы, которые будут показывать или скрывать
+   три задние грани "куба" */
+.showbf div {
+  backface-visibility: visible;
+}
+
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+/* Определяет контейнер div, кубический div и общую грань */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Определяет каждое лицо на основе направления */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Сделает стол немного лучше */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', '100%', 360)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотритеt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.properties.backface-visibility")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Использование CSS преобразований</a></li>
+</ul>
diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..a23507d906
--- /dev/null
+++ b/files/ru/web/css/background-attachment/index.html
@@ -0,0 +1,223 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Краткое описание</h2>
+
+<p>Если указано {{Cssxref("background-image")}}, <a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <code>background-attachment</code> определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css notranslate">/* Ключевые значения */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Глобальные значения */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;</pre>
+
+<p>Значение свойства <code>background-attachment</code> задается одним из ключевых значений из списка ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>Фон фиксируется относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это значение несовместимо с {{cssxref("background-clip", "background-clip: text", "#text")}}.)</dd>
+ <dt><code>local</code></dt>
+ <dd>Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплен к границе элемента.)</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Простой_пример")}}</p>
+
+<h3 id="Поддержка_нескольких_фоновых_изображений">Поддержка нескольких фоновых изображений</h3>
+
+<p>Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <code>&lt;attachment&gt;</code> для каждого фона, разделенных запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Поддержка_нескольких_фоновых_изображений")}}</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('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Сокращенное свойство было расширено для поддержки нескольких фонов и значения <code>local</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Никаких существенных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>local</code></td>
+   <td>4.0</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>local</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Несколько фонов</a></li>
+</ul>
diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html
new file mode 100644
index 0000000000..bfcdd98ff3
--- /dev/null
+++ b/files/ru/web/css/background-blend-mode/index.html
@@ -0,0 +1,145 @@
+---
+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>
+
+<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;
+    &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" style="display: none;">#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) {
+    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>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>35</td>
+   <td>{{CompatGeckoDesktop('30.0')}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>22</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatGeckoMobile('30.0')}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>22</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<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-clip/index.html b/files/ru/web/css/background-clip/index.html
new file mode 100644
index 0000000000..213ea5d62d
--- /dev/null
+++ b/files/ru/web/css/background-clip/index.html
@@ -0,0 +1,118 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+translation_of: Web/CSS/background-clip
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство CSS <strong><code>background-clip</code></strong> определяет как цвет фона или фоновое изображение будут выводиться под границами блока.</p>
+
+<p>Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за {{cssxref("border-style")}} или {{cssxref("border-image")}}); в противном случае граница скрывает разницу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css"><code>/* </code>Значения ключевых слов<code> */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* </code>Глобальные значения<code> */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;</code></pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>Фон распространяется до внешнего края границы (но под границей в z-порядке).</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>Фон распространяется до внешнего края отступа. Под границей фон не рисуется.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Фон закрашивается внутри (обрезается) поля содержимого.</dd>
+ <dt><code>text</code> {{experimental_inline}}</dt>
+ <dd>Фон закрашивается внутри (обрезается) текста переднего плана.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html"><code>&lt;p class="border-box"&gt;The background extends behind the border.&lt;/p&gt;
+&lt;p class="padding-box"&gt;The background extends to the inside edge of the border.&lt;/p&gt;
+&lt;p class="content-box"&gt;The background extends only to the edge of the content box.&lt;/p&gt;
+&lt;p class="text"&gt;The background is clipped to the foreground text.&lt;/p&gt;</code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css"><code>p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  color: rgba(0,0,0,.2);
+}</code></pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Example', 600, 580)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Добавляет значение <code>text</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</p>
+</div>
+
+<p>{{Compat("css.properties.background-clip")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойство {{cssxref("clip-path")}} создает область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.</li>
+ <li>Свойства фона: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">Введение в блочную модель CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/background-color/index.html b/files/ru/web/css/background-color/index.html
new file mode 100644
index 0000000000..bf36dfbcb0
--- /dev/null
+++ b/files/ru/web/css/background-color/index.html
@@ -0,0 +1,163 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+tags:
+  - CSS
+  - CSS свойства
+  - CSS фоны
+  - Графика
+  - Определение
+  - Раскладка
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a>-свойство <strong><code>background-color</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> устанавливает цвет фона элемента.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/background-color.html")}}</p>
+
+<h2 id="Cинтаксис">Cинтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Словесные значения */
+background-color: red;
+
+/* Шестнадцатеричное значение */
+background-color: #bbff00;
+
+/* Шестнадцатеричное значение с alpha-каналом */
+background-color: #11ffee00; /* 00 - полностью прозрачный */
+background-color: #11ffeeff; /* ff - непрозрачный */
+
+/* RGB-значение */
+background-color: rgb(255, 255, 128);
+
+/* RGBA-значение или RGB с alpha-каналом */
+background-color: rgba(117, 190, 218, 0.0); /* 0.0 - полностью прозрачный */
+background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */
+background-color: rgba(117, 190, 218, 1.0); /* 1.0 - непрозрачный */
+
+/* HSLA-значение */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Специальные словесные значения */
+background-color: currentColor;
+background-color: transparent;
+
+/* Общие значения */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+</pre>
+
+<div>Свойство <code>background-color</code> определяется единственным значением <code><a href="#&lt;color>">&lt;color&gt;</a></code>.</div>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Является CSS {{cssxref("&lt;color&gt;")}}, которое описывает цвет фона. Даже если заданы одно или несколько {{cssxref("background-image")}}, цвет может отрендерится, если изображения прозрачны.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;
+ Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12,17];">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153, 102, 153);
+  color: rgb(255, 255, 204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Примеры","200","150")}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.</p>
+
+<p>Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">Web Content Accessibility Guidelines (WCAG)</a>, требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Хотя и убирается значение <code>transparent</code>, это ничего не меняет, так как оно было принято как верное значение {{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице сгенерирована на основе структурированных данных. Если вы хотите внести изменения в данные, перейдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам Pull Request.</p>
+
+<p>{{Compat("css.properties.background-color")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>
+  <p><a href="/ru/docs/Web/CSS/CSS_Background_and_Borders/Множественные_фоны">Множественные фоны</a></p>
+ </li>
+ <li>
+  <p>Тип данных {{cssxref("&lt;color&gt;")}}</p>
+ </li>
+ <li>Другие свойства, связанные с цветом: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, и {{cssxref("column-rule-color")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Применение цвета к HTML элементам с помощью CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html
new file mode 100644
index 0000000000..fa163b19df
--- /dev/null
+++ b/files/ru/web/css/background-image/index.html
@@ -0,0 +1,270 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-image
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p>Свойство <a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a>  <strong><code>background-image</code></strong> устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.</p>
+
+<p><a href="/ru/CSS/border" title="border">Границы</a> {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и ее границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.</p>
+
+<p>Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением <code>none</code>.</p>
+
+<div class="note"><strong>Обратите внимание:</strong> Даже, если изображение непрозначно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать аттрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css notranslate">background-image: none;
+background-image: url(http://www.example.com/bck.png);
+
+background-image: inherit;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Это ключевое слово обозначает отсутствие изображений.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>{{cssxref("&lt;image&gt;")}} обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается<a href="/ru/docs/CSS/Multiple_backgrounds" title="Multiple backgrounds"> несколько фонов</a>.</dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax("background-image")}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Multiple_backgrounds_and_transparency" name="Multiple_backgrounds_and_transparency">Несколько фонов и прозрачность</h3>
+
+<p>Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.</p>
+
+<h4 id="HTML_содержимое">HTML содержимое</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+    &lt;p class="catsandstars"&gt;
+        This paragraph is full of cats&lt;br /&gt;and stars.
+    &lt;/p&gt;
+    &lt;p&gt;This paragraph is not.&lt;/p&gt;
+    &lt;p class="catsandstars"&gt;
+        Here are more cats for you.&lt;br /&gt;Look at them!
+    &lt;/p&gt;
+    &lt;p&gt;And no more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_содержимое">CSS содержимое</h4>
+
+<pre class="brush: css notranslate">pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Multiple_backgrounds_and_transparency')}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Backgrounds', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Начиная с CSS2 Revision 1, свойство было расширено для поддержки нескольких фонов и любого типа данных CSS {{cssxref("&lt;image&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Начиная с CSS1, теперь описывается способ обработки изображений с внутренними размерами и без них.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}[1]</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>yes</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td>Gradients</td>
+   <td>1.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}</td>
+   <td>10</td>
+   <td>11+{{property_prefix("-o")}}</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>SVG images</td>
+   <td>8.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>5.0 [2]</td>
+  </tr>
+  <tr>
+   <td><code>element</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>image-rect</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Any {{cssxref("&lt;image&gt;")}} value.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>iOS Safari</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Android Browser</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes</td>
+  </tr>
+  <tr>
+   <td>Gradients</td>
+   <td>yes {{property_prefix("-webkit")}}<br>
+    old webkit syntax for iOS 4.2 and older</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>yes{{property_prefix("-webkit")}}<br>
+    old webkit syntax</td>
+  </tr>
+  <tr>
+   <td>SVG images</td>
+   <td>yes [2]</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>element</code></td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>image-rect</code></td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Any {{cssxref("&lt;image&gt;")}} value</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Если пользовательские настройки <code>browser.display.use_document_colors</code> в <code>about:config</code> установлены на <code>false</code>, фоновые изображения не будут отображаться.</p>
+
+<p>[2] Поддержка SVG в CSS background является неполной в текущей версии iOS Safari (5.0). То же самое для Safari до 5.0.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/Guide/CSS/CSS_Image_Sprites">CSS спрайты изображений</a></li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>Статьи, связанные с изображениями:: {{cssxref("&lt;image&gt;")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}.</li>
+</ul>
diff --git a/files/ru/web/css/background-origin/index.html b/files/ru/web/css/background-origin/index.html
new file mode 100644
index 0000000000..b61932f1b9
--- /dev/null
+++ b/files/ru/web/css/background-origin/index.html
@@ -0,0 +1,105 @@
+---
+title: background-origin
+slug: Web/CSS/background-origin
+translation_of: Web/CSS/background-origin
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background-origin</code></strong> устанавливает <em>область расположения фона</em>. Другими словами, оно устанавливает исходную позицию изображения, установленнную с помощью свойства {{cssxref("background-image")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<p>Обратите внимание, что <code>background-origin</code> игнорируется, когда {{cssxref("background-attachment")}} является <code>fixed</code>.</p>
+
+<div class="note"><strong>Примечание:</strong> Сокращение {{cssxref("background")}} сбрасывает значения этого свойства к его начальному значению, если оно не указано.</div>
+
+<h2 id="Синаксис">Синаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Ключевые значения */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* Глобальные значения */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+</pre>
+
+<p>Свойство <code>background-origin</code> указывается в качестве одного из значений ключевых слов, перечисленных ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>Фон располагается относительно рамки.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>Фон расположен относительно поля отступа.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Фон располагается относительно поля содержимого.</dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css; highlight:[6];">.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+</pre>
+
+<pre class="brush:css; highlight:[6];">#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
+}
+</pre>
+
+<pre class="brush:css; highlight:[4];">div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
+}</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</p>
+
+<p>{{Compat("css.properties.background-origin")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+</ul>
diff --git a/files/ru/web/css/background-position-x/index.html b/files/ru/web/css/background-position-x/index.html
new file mode 100644
index 0000000000..3a49c0609c
--- /dev/null
+++ b/files/ru/web/css/background-position-x/index.html
@@ -0,0 +1,100 @@
+---
+title: background-position-x
+slug: Web/CSS/background-position-x
+translation_of: Web/CSS/background-position-x
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>background-position-x</code></strong> - это <a href="/en-US/docs/Web/CSS">CSS</a> - свойство, которое устанавливает начальную горизонтальную позицию для каждого фонового изображения. Эта позиция является относительной к позиции слоя, установленной с помощью свойства {{cssxref("background-origin")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div>
+
+
+
+<p>Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применеными после его объявления.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* &lt;percentage&gt; values */
+background-position-x: 25%;
+
+/* &lt;length&gt; values */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Side-relative values */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* Multiple values */
+background-position-x: 0px, center;
+
+/* Global values */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+</pre>
+
+<p>Свойство <code>background-position-x</code> принимает одно или несколько значений, разделенных запятыми.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Выравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.</dd>
+ <dt><code>center</code></dt>
+ <dd>Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.</dd>
+ <dt><code>right</code></dt>
+ <dd>Выравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя.</span> <span title="">(Некоторые браузеры позволяют назначать правый край для смещения).</span></span></dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Смещение горизонтальной позиции заданного фонового изображения относительно контейнера.</span> <span title="">Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом</span> <span title="">значение 50% горизонтально центрирует фоновое изображение.</span></span></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.background-position-x")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Использование множественных фонов</a></li>
+</ul>
diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html
new file mode 100644
index 0000000000..1d3d5ab02a
--- /dev/null
+++ b/files/ru/web/css/background-position/index.html
@@ -0,0 +1,178 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+translation_of: Web/CSS/background-position
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background-position</code></strong> устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного {{cssxref("background-origin")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Ключевые значения */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* &lt;процент&gt; значения */
+background-position: 25% 75%;
+
+/* &lt;отрезок&gt; значения */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Несколько изображений */
+background-position: 0 0, center;
+
+/* Значения смещения края */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Глобальные значения */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+</pre>
+
+<p>Свойство <code>background-position</code> указывается в виде одного или нескольких значений <code><a href="#&lt;position>">&lt;position&gt;</a></code>, разделенных запятыми.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><a id="&lt;position>" name="&lt;position>"><code>&lt;position&gt;</code></a></dt>
+ <dd>{{cssxref("&lt;position&gt;")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается <code>center</code>.</dd>
+ <dd>
+ <p><strong>Синтаксис 1-значения:</strong> значение может быть:</p>
+
+ <ul>
+  <li>Значение ключевого слова <code>center</code>, которое центрирует изображение.</li>
+  <li>Одно из значений ключевых слов <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.</li>
+  <li>{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}}. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.</li>
+ </ul>
+
+ <p><strong>Синтаксис с 2-значениями:</strong> одно из значений определяет X, а другое определяет Y. Каждое значение может быть:</p>
+
+ <ul>
+  <li>Одно из значений ключевых слов <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Если здесь указаны <code>left</code> или <code>right</code>, то оно определяет  X, а другое заданное значение определяет Y. Если даны <code>top</code> или <code>bottom</code>, то оно определяет Y, а другое значение определяет X.</li>
+  <li>{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}}. Если другое значение является <code>left</code> или <code>right</code>, то оно определяет Y, относительно верхнего края. Если другое значение <code>top</code> или <code>bottom</code>, то оно определяет X, относительно левого края. Если оба значения <code>&lt;length&gt;</code> или <code>&lt;percentage&gt;</code>, то первое определяет X, а второе Y.</li>
+ </ul>
+
+ <p>Обратите внимание,что:</p>
+
+ <ul>
+  <li>Если одно значение <code>top</code> или <code>bottom</code>, то другое значение не может быть <code>top</code> или <code>bottom</code>.</li>
+  <li>Если одно значение  является <code>left</code> или <code>right</code>, то другое значение не может быть <code>left</code> или <code>right</code>.</li>
+ </ul>
+
+ <p>Это означает, например, что <code>top top</code> и <code>left right</code> являются недействительные.</p>
+ </dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;Example One&lt;/div&gt;
+&lt;div class="exampletwo"&gt;Example Two&lt;/div&gt;
+&lt;div class="examplethree"&gt;Example Three&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Общий среди всех &lt;div&gt;-ов */
+div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* В этих примерах используется сокращенное свойство 'background' */
+.exampleone {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exampletwo {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/* Несколько фоновых изображений: каждое изображение сопоставляется
+   с соответствующей позицией, от первого указанного до последнего. */
+.examplethree {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       center;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Examples', 420, 200)}}</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('CSS3 Backgrounds', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Добавлена поддержка нескольких фонов и синтаксиса с четырьмя значениями. Изменяет определение процента, чтобы соответствовать реализациям.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Позволяет смешивать значения ключевых слов и {{cssxref("&lt;length&gt;")}} и {{cssxref("&lt;percentage&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</p>
+
+<p>{{Compat("css.properties.background-position")}}</p>
+
+<h3 id="Quantum_CSS_заметки">Quantum CSS заметки</h3>
+
+<ul>
+ <li>В Gecko есть ошибка, означающая, что <code>background-position</code> не может быть {{cssxref("transition","transitioned")}} между двумя значениями, содержащими разные числа значений {{cssxref("&lt;position&gt;")}}, для примера <code>background-position: 10px 10px;</code> and <code>background-position: 20px 20px, 30px 30px;</code> (смотрите {{bug(1390446)}}). Новый параллельный CSS движок Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, который планируется выпустить в Firefox 57) исправляет это.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Использование нескольких значений</a></li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..9493b0ab8d
--- /dev/null
+++ b/files/ru/web/css/background-repeat/index.html
@@ -0,0 +1,209 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-repeat
+---
+<div>
+<p>{{CSSRef}}</p>
+
+<p>Свойство <strong><code>background-repeat</code></strong> устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div>
+
+<p>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<p>По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя <code>round</code>) или равномерно растянуть от конца к концу (используя <code>space</code>).</p>
+</div>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><code>/*Ключевые значения*/
+background-repeat: repeat-x;
+background-repeat: repeat-y;</code>
+<code>background-repeat: repeat;</code>
+<code>​​​​​​​background-repeat: space;</code>
+<code>​​​​​​​background-repeat: round;</code>
+<code>​​​​​​​background-repeat: no-repeat;</code>
+
+/*Два значения: горизонтальное | вертикальное*/
+<code>background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Глобальные значения */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;</code></pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code><em>&lt;</em>repeat-style<em>&gt;</em></code></dt>
+ <dd>Следующие однозначные имеют двухзначные эквиваленты:</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td>тоже самое, что и <code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td>тоже самое, что и <code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>тоже самое, что и <code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>тоже самое, что и <code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>тоже самое, что и <code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>тоже самое, что и <code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.<br>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фоновго изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение <code>space</code>.</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством {{cssxref("background-position")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+    &lt;li&gt;no-repeat
+        &lt;div class="one"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat
+        &lt;div class="two"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x
+        &lt;div class="three"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-y
+        &lt;div class="four"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x, repeat-y (multiple images)
+        &lt;div class="five"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Совместно для всех DIVS в примере */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* повторение фона CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Несколько изображений */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>В этом примере каждому элементу списка соответствует другое значение <code>background-repeat</code>.</p>
+
+<p>{{EmbedLiveSample('Examples', 240, 360)}}</p>
+
+<h2 id="Спецификация">Спецификация</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('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов <code>space</code> и <code>round</code>, а также для фона на элементе на уровне строки путем точного определения области рисования фона.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Без существенных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>{{Compat("css.properties.background-repeat")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>
+  <p id="Using_CSS_multiple_backgrounds"><a href="/ru/docs/CSS/Using_CSS_multiple_backgrounds" title="CSS/Using_CSS_multiple_backgrounds">Использование нескольких CSS фонов</a></p>
+ </li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html
new file mode 100644
index 0000000000..03d0ba3a13
--- /dev/null
+++ b/files/ru/web/css/background-size/index.html
@@ -0,0 +1,250 @@
+---
+title: background-size
+slug: Web/CSS/background-size
+translation_of: Web/CSS/background-size
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Значение <strong><code>background-size</code></strong> в <a href="/en-US/docs/CSS" title="CSS">CSS</a> позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.</p>
+
+<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращенном свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращеного свойства.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Ключевые слова */
+background-size: cover;
+background-size: contain;
+
+/* Указано одно значение - ширина изображения, */
+/* высота в таком случае устанавливается в auto */
+background-size: 50%;
+background-size: 3em;
+background-size: 12px;
+background-size: auto;
+
+/* Указаны два значения - */
+/* ширина и высота соответственно */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Значения для нескольких фонов */
+/* Не путайте такую запись с background-size: auto auto */
+background-size: auto, auto;
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Глобальные значения */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;размер&gt;</code></dt>
+ <dd>Значение <code>{{cssxref("&lt;length&gt;")}}</code> позволяет масштабировать размер фонового изображения в заданном измерении. Отрицательный размер не допускается.</dd>
+ <dt><code>&lt;проценты&gt;</code></dt>
+ <dd>Значение <code>{{cssxref("&lt;percentage&gt;")}}</code>, которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением {{cssxref("background-origin")}}. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если {{cssxref("background-attachment","attachment")}} фона является <code>fixed</code>, область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.</dd>
+ <dt><code>cover</code></dt>
+ <dd>Ключевое слово, обратное <code>contain</code>. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, <em>изображение обрезается</em> либо влево / вправо, либо сверху / снизу.</dd>
+</dl>
+
+<p>Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.</p>
+
+<div class="note">
+<p><strong>Предупреждение: </strong>Это поведение изменилось в Gecko 8.0 {{geckoRelease("8.0")}}. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропоцией, идентичной пропорции области расположения фона.</p>
+</div>
+
+<p>Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответсвуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответсвующей внутренней пропорцией.</p>
+
+<div class="note"><strong>Предупреждение:</strong> Это не определенное в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.</div>
+
+<p>Визуализированный размер фоного изображения затем вычисляется следующим способом:</p>
+
+<dl>
+ <dt><font face="Open Sans, Arial, sans-serif">Если оба атрибута в </font><code>background-size</code> заданы и различны от <code>auto</code>:</dt>
+ <dd>Фоновое изображение отображается в указанном размере.</dd>
+ <dt>Если <code>background-size</code> содержит <code>contain</code> или <code>cover</code>:</dt>
+ <dd>Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает ее. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.</dd>
+ <dt>Если <code>background-size</code> установлен как <code>auto</code> или <code>auto auto</code>:</dt>
+ <dd>Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан <code>contain</code>. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определенным этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропоцию, оно отображается с использованием внутреннего размера и соответсвующим размером области позиционирования фона.</dd>
+ <dt>Если background-size содержит один атрибут <code>auto</code> и один не-<code>auto</code>:</dt>
+ <dd>Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответсвующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.</dd>
+</dl>
+
+<p>Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, еще не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><a href="http://whereswalden.com/files/mozilla/background-size/page-cover.html">Эта демонстрация <code>background-size: cover</code></a> и <a href="http://whereswalden.com/files/mozilla/background-size/page-contain.html">эта демонстрация <code>background-size: contain</code></a> предназначены для открытия в новых окнах, чтобы вы могли видеть, как <code>contain</code> и <code>cover</code> ведут себя, когда размеры области расположения фона изменяются. <a href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">Эта серия демонстраций, как работает <code>background-size</code> и взаимодействует с другими свойствами <code>background-*</code></a>, должна в значительной степени охватить оставшуюся основу в том, как использовать <code>background-size</code> отдельно и в сочетании с другими свойствами.</p>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Если вы указываете градиент в качестве фона и указали <code>background-size</code>, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задается с использованием только значения ширины (для примера, <code>background-size: 50%</code>). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 спецификацией <code>background-size</code> </a>и с <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 спецификацией градиента значений изображения</a>.</p>
+
+<pre class="brush: css">.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* Лучше не использовать */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* Допускается */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+</pre>
+
+<p>Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер <code>auto</code> с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.</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('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th colspan="3">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Базовая поддержка</td>
+   <td>1.0{{property_prefix("-webkit")}} [2]</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}} [4]</td>
+   <td rowspan="2">9.0 [5]</td>
+   <td>9.5{{property_prefix("-o")}}<br>
+    with some bugs [1]</td>
+   <td>3.0 (522){{property_prefix("-webkit")}}<br>
+    but from an older CSS3 draft [2]</td>
+  </tr>
+  <tr>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10.0</td>
+   <td>4.1 (532)</td>
+  </tr>
+  <tr>
+   <td>Поддержка значений<br>
+    <code>contain</code> и <code>cover</code></td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0 [5]</td>
+   <td>10.0</td>
+   <td colspan="3">4.1 (532)</td>
+  </tr>
+  <tr>
+   <td>Поддержка SVG фонов</td>
+   <td>44.0</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>9.0</td>
+   <td>31.0</td>
+   <td colspan="3">{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Windows Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    2.3</td>
+   <td>1.0{{property_prefix("-moz")}}<br>
+    4.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5.1 (maybe earlier)</td>
+  </tr>
+  <tr>
+   <td>Поддержка SVG фонов</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] В Opera 9.5 вычисление области расположения фона некорректно для фиксированных фонов. Opera 9.5 также интерпретирует форму с двумя значениями как горизонтальный масштабный коэффициент и, по-видимому, вертикальное измерение <em>отсечения</em>. Это было исправлено в Opera 10.</li>
+ <li>[2] Браузеры на основе WebKit изначально реализовали более старый черновик  CSS3 <code>background-size</code>, в котором пропущенное второе значение рассматривается как <em>дублирующее</em> первое значение; этот черновик не включает в себя ключевые слова <code>contain</code> или <code>cover</code>.</li>
+ <li>[3] Konqueror 3.5.4 поддерживает <code>-khtml-background-size</code>.</li>
+ <li>[4] Хотя это свойство является новым в Gecko 1.9.2 (Firefox 3.6), в Firefox 3.5 можно полностью растянуть изображение поверх фона, используя {{cssxref("-moz-border-image")}}.
+  <pre class="brush:css">.foo {
+  background-image: url(bg-image.png);
+
+  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
+     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
+       -o-background-size: 100% 100%;           /* Opera 9.5 */
+          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
+
+  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
+}</pre>
+ </li>
+ <li>[5] Хотя Internet Explorer 8 не поддерживает значение <code>background-size</code>, с помощью нестандартного атрибута <code>-ms-filter</code>  возможно воспроизвести некоторые его возможности:
+  <pre class="brush:css">-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";</pre>
+  Это имитирует значение <code>cover</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">Справочник по CSS</a></li>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Несколько фонов</a></li>
+ <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Масштабирование фонового изображения</a></li>
+</ul>
diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html
new file mode 100644
index 0000000000..3835bece7c
--- /dev/null
+++ b/files/ru/web/css/background/index.html
@@ -0,0 +1,135 @@
+---
+title: background
+slug: Web/CSS/background
+translation_of: Web/CSS/background
+---
+<div>{{CSSRef("CSS Background")}}</div>
+
+<div>Сокращенное <a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background</code></strong>  устанаваливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
+
+<p>Исходный код этого интерактивного примера хранится в репозитории GitHub.  Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение..</p>
+
+<p>Свойство является <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращением,</a> которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.</p>
+
+<p>Как и во всех сокращенных свойствах, любые пропущенные вложенные значения будут установлены в свои <a href="/en-US/docs/Web/CSS/initial_value">изначальные значения</a>.</p>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Использование свойства &lt;background-color&gt; */
+background: green;
+
+/* Использование свойств &lt;bg-image&gt; и &lt;repeat-style&gt; */
+background: url("test.jpg") repeat-y;
+
+/* Использование &lt;box&gt; и &lt;background-color&gt; */
+background: border-box red;
+
+/* Одно изображение, центрированное и масштабированное */
+background: no-repeat center/80% url("../img/image.png");
+</pre>
+
+<div class="note"><strong>Предупреждение:</strong> {{cssxref("background-color")}} можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.</div>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойству можно указывать одно или более значений из данного списка в любом порядке:</p>
+
+<dl>
+ <dt><code>&lt;attachment&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-attachment")}}</dd>
+ <dt><code>&lt;box&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-clip")}}</dd>
+ <dt><code>&lt;background-color&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-color")}}</dd>
+ <dt><code>&lt;bg-image&gt;</code></dt>
+ <dd>Смотри {{Cssxref("background-image")}}</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-position")}}</dd>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-repeat")}}</dd>
+ <dt><code>&lt;bg-size&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <strong>&lt;position&gt;</strong>, разделенного символом '/'.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="topbanner"&gt;
+  Starry sky&lt;br/&gt;
+  Twinkle twinkle&lt;br/&gt;
+  Starry sky
+&lt;/p&gt;
+&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css' highlight:[2,6];">.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Примеры")}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Backgrounds', '#the-background', 'background')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Поддержка мультифонов и свойств {{cssxref("background-size")}}, {{cssxref("background-origin")}} и {{cssxref("background-clip")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет значительных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.properties.background")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("-moz-background-inline-policy")}}</li>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Использование градиентов</a></li>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds">Несколько backgrounds</a></li>
+</ul>
diff --git a/files/ru/web/css/blend-mode/index.html b/files/ru/web/css/blend-mode/index.html
new file mode 100644
index 0000000000..382af5dae0
--- /dev/null
+++ b/files/ru/web/css/blend-mode/index.html
@@ -0,0 +1,411 @@
+---
+title: <blend-mode>
+slug: Web/CSS/blend-mode
+translation_of: Web/CSS/blend-mode
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p>The <strong><code>&lt;blend-mode&gt;</code></strong> type is a collection of keywords describing blend modes.</p>
+
+<p>A blend mode is a method of calculating the final color value of a pixel when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.</p>
+
+<h2 id="Синтаксис" style="">Синтаксис</h2>
+
+<pre class="syntaxbox">Формальный синтаксис: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>
+
+<h3 id="Возможные_значения" style="">Возможные значения</h3>
+
+<dl style="">
+ <dt><code>normal</code></dt>
+ <dd>
+ <p>The final color is the top color, whatever the bottom color may be.<br>
+  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 {
+    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: normal;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('normal', "300", "300") }}</p>
+ </dd>
+ <dt><code>multiply</code></dt>
+ <dd>
+ <p>The final color is the result of multiplying the top and bottom colors.<br>
+  A black layer leads to a black final layer, and a white layer leads to no change.<br>
+  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 {
+    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: multiply;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('multiply', "300", "300") }}</p>
+ </dd>
+ <dt><code>screen</code></dt>
+ <dd>
+ <p>The final color is the result of inverting the colors, multiplying them and inverting that color value.<br>
+  A black layer leads to no change, and a white layer leads to a white final layer.<br>
+  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 {
+    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>
+ </div>
+
+ <p>{{ EmbedLiveSample('screen', "300", "300") }}</p>
+ </dd>
+ <dt><code>overlay</code></dt>
+ <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 {
+    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: overlay;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('overlay', "300", "300") }}</p>
+ </dd>
+ <dt><code>darken</code></dt>
+ <dd>
+ <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 {
+    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: darken;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('darken', "300", "300") }}</p>
+ </dd>
+ <dt><code>lighten</code></dt>
+ <dd>
+ <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 {
+    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: lighten;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('lighten', "300", "300") }}</p>
+ </dd>
+ <dt><code>color-dodge</code></dt>
+ <dd>
+ <p>The final color is the result of dividing the bottom color by the inverse of the top color.<br>
+  A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.<br>
+  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 {
+    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: color-dodge;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-dodge', "300", "300") }}</p>
+ </dd>
+ <dt><code>color-burn</code></dt>
+ <dd>
+ <p>This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.<br>
+  A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.<br>
+  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 {
+    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: color-burn;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-burn', "300", "300") }}</p>
+ </dd>
+ <dt><code>hard-light</code></dt>
+ <dd>
+ <p>The final color is the result of <code>multiply</code> if the top color is darker, or <code>screen</code> if the top color is lighter.<br>
+  This blend mode is equivalent to <code>overlay</code> but with the layers swapped.<br>
+  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 {
+    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: hard-light;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('hard-light', "300", "300") }}</p>
+ </dd>
+ <dt><code>soft-light</code></dt>
+ <dd>
+ <p>The final color is similar to hard-light, but softer.<br>
+  This blend mode behaves similar to <code>hard-light</code>.<br>
+  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 {
+    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: soft-light;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('soft-light', "300", "300") }}</p>
+ </dd>
+ <dt><code>difference</code></dt>
+ <dd>
+ <p>The final color is the result of subtracting the darker of the two colors from the lighter one.<br>
+  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 {
+    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: difference;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('difference', "300", "300") }}</p>
+ </dd>
+ <dt><code>exclusion</code></dt>
+ <dd>
+ <p>The final color is similar to <code>difference,</code> but with less contrast.<br>
+  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 {
+    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: exclusion;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('exclusion', "300", "300") }}</p>
+ </dd>
+ <dt><code>hue</code></dt>
+ <dd>
+ <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 {
+    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: hue;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('hue', "300", "300") }}</p>
+ </dd>
+ <dt><code>saturation</code></dt>
+ <dd>
+ <p>The final color has the <em>saturation</em> of the top color, while using the <em>hue</em> and <em>luminosity</em> of the bottom color.<br>
+  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 {
+    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: saturation;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('saturation', "300", "300") }}</p>
+ </dd>
+ <dt><code>color</code></dt>
+ <dd>
+ <p>The final color has the<em> <em>hue</em></em> and <em><em>saturation</em> </em>of the top color, while using the <em>luminosity</em> of the bottom color.<br>
+  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 {
+    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: color;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('color', "300", "300") }}</p>
+ </dd>
+ <dt><code>luminosity</code></dt>
+ <dd style="">
+ <p>The final color has the <em>luminosity</em> of the top color, while using the <em>hue</em> and <em>saturation</em> of the bottom color.<br>
+  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 {
+    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: luminosity;
+}</pre>
+ </div>
+
+ <p style="">{{ EmbedLiveSample('luminosity', "300", "300") }}</p>
+ </dd>
+</dl>
+
+<h2 id="Интерполяция_режимов_наложения" style=""><span class="short_text" id="result_box" lang="ru"><span class="hps">Интерполяция режимов наложения</span></span></h2>
+
+<div> </div>
+
+<p>Changes between blends mode are not interpolated. Any change occurs abruptly.</p>
+
+<h2 id="Спецификации" style="">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="">
+   <td style="">{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td style="">Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>35</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также" style="">Смотрите также</h2>
+
+<ul style="">
+ <li>Properties using a value of this type: {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}}</li>
+ <li style=""><a href="http://en.wikipedia.org/wiki/Blend_modes" style="">Blend modes</a></li>
+ <li style=""><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li>
+</ul>
diff --git a/files/ru/web/css/block-size/index.html b/files/ru/web/css/block-size/index.html
new file mode 100644
index 0000000000..413705bb6d
--- /dev/null
+++ b/files/ru/web/css/block-size/index.html
@@ -0,0 +1,104 @@
+---
+title: block-size
+slug: Web/CSS/block-size
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - Справка
+  - Экспериментальный
+translation_of: Web/CSS/block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>block-size</code></strong> <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> задает горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+block-size: 300px;
+block-size: 25em;
+
+/* &lt;percentage&gt; values */
+block-size: 75%;
+
+/* Keyword values */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Global values */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+</pre>
+
+<p>Если режим записи (writing mode) ориентирован по вертикали, то значение <code> block-size  относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задает другое измерение элемента.</code></p>
+
+<p><code>{{cssinfo}}</code></p>
+
+<h2 id="Синтаксис"><code>Синтаксис</code></h2>
+
+<h3 id="Значения"><code>Значения</code></h3>
+
+<p><code>Свойство <code>block-size</code> принимает те же значения, что и свойства {{cssxref("width")}}, {{cssxref("height")}} </code></p>
+
+<h3 id="Формальный_синтаксис"><code>Формальный синтаксис</code></h3>
+
+<pre class="syntaxbox"><code>
+{{csssyntax}}</code></pre>
+
+<h2 id="Пример"><code>Пример</code></h2>
+
+<h3 id="HTML"><code>HTML</code></h3>
+
+<pre class="brush: html"><code>
+&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</code></pre>
+
+<h3 id="CSS"><code>CSS</code></h3>
+
+<pre class="brush: css"><code>
+.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}</code></pre>
+
+<p><code>{{EmbedLiveSample("Example")}}</code></p>
+
+<h2 id="Спецификация"><code>Спецификация</code></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>Specification</code></th>
+   <th scope="col"><code>Status</code></th>
+   <th scope="col"><code>Comment</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</code></td>
+   <td><code>{{Spec2("CSS Logical Properties")}}</code></td>
+   <td><code>Initial definition</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами"><code>Совместимость с браузерами</code></h2>
+
+<div class="hidden"><code>Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в разработку, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам соответствующий запрос.</code></div>
+
+<p><code>{{Compat("css.properties.block-size")}}</code></p>
+
+<h2 id="Смотри_также"><code>Смотри также</code></h2>
+
+<ul>
+ <li><code>Отображаемые физические свойства: {{cssxref("width")}} and {{cssxref("height")}}</code></li>
+ <li><code>{{cssxref("writing-mode")}}</code></li>
+</ul>
diff --git a/files/ru/web/css/border-bottom/index.html b/files/ru/web/css/border-bottom/index.html
new file mode 100644
index 0000000000..e27f8f0fe8
--- /dev/null
+++ b/files/ru/web/css/border-bottom/index.html
@@ -0,0 +1,133 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+translation_of: Web/CSS/border-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS/Shorthand_properties">Сокращённое свойство </a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>border-bottom </code></strong>описывает нижнюю границу элемента <a href="/en-US/docs/Web/CSS/border">border</a>.</span> Оно устанавливает значения {{cssxref("border-bottom-width")}}, {{cssxref("border-bottom-style")}} и {{cssxref("border-bottom-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div>
+
+
+
+<p>Как и все сокращённые свойства, <code>border-bottom</code> устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...</p>
+
+<pre class="brush: css notranslate">border-bottom-style: dotted;
+border-bottom: thick green;
+</pre>
+
+<p>... это то же самое, что ...</p>
+
+<pre class="brush: css notranslate">border-bottom-style: dotted;
+border-bottom: none thick green;
+</pre>
+
+<p>... и значение {{cssxref("border-bottom-style")}}, указанное перед  <code>border-bottom</code> игнорируется. Поскольку значением по умолчанию для {{cssxref("border-bottom-style")}} является <code>none</code>, то без указания <code>border-style</code> граница не будет показана.</p>
+
+<h2 id="Constituent_properties">Constituent properties</h2>
+
+<p>This property is a shorthand for the following CSS properties:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/border-bottom-style"><code>border-bottom-style</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/border-bottom-width"><code>border-bottom-width</code></a></li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed blue;
+</pre>
+
+<p>The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>See {{cssxref("border-bottom-width")}}.</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>See {{cssxref("border-bottom-style")}}.</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>See {{cssxref("border-bottom-color")}}.</dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Applying_a_bottom_border">Applying a bottom border</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  This box has a border on the bottom side.
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border-bottom: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<h4 id="Results">Results</h4>
+
+<p>{{EmbedLiveSample('Applying_a_bottom_border')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#propdef-border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct changes, though the modification of values for the {{cssxref("border-bottom-color")}} do apply to it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.border-bottom")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/border">border</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/border-block">border-block</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/outline">outline</a></code></li>
+</ul>
diff --git a/files/ru/web/css/border-image-outset/index.html b/files/ru/web/css/border-image-outset/index.html
new file mode 100644
index 0000000000..7236c75c05
--- /dev/null
+++ b/files/ru/web/css/border-image-outset/index.html
@@ -0,0 +1,129 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+translation_of: Web/CSS/border-image-outset
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>The <strong><code>border-image-outset</code></strong> property describes by what amount the <dfn>border image area</dfn> extends beyond the border box.</p>
+
+<p>Portions of the border image that are rendered outside the border box as a result of this property do not cause scrolling to be triggered. These areas also don't capture or cause mouse events to occur on behalf of the bordered element.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* border-image-outset: <em>sides</em> */
+border-image-outset: 1.5;
+
+/* border-image-outset: <em>vertical</em> <em>horizontal</em> */
+border-image-outset: 1 1.2;
+
+/* border-image-outset: <em>top</em> <em>horizontal</em> <em>bottom */</em>
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset: <em>top</em> <em>right</em> <em>bottom</em> <em>left */</em>
+border-image-outset: 7px 12px 14px 5px;
+
+border-image-repeat: inherit;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<div class="note">
+<p>When a value is specified as a unitless {{cssxref("&lt;number&gt;")}}, that value is multiplied by the corresponding computed {{cssxref("border-width")}} to determine the <code>border-image-outset</code>. Negative values are invalid.</p>
+</div>
+
+<dl>
+ <dt><em>sides</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box in all four directions.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box in both horizontal directions (left and right).</dd>
+ <dt><em>vertical</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box in both vertical directions (top and bottom).</dd>
+ <dt><em>top</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box past its top edge.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box past its bottom edge.</dd>
+ <dt><em>right</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box past its right edge.</dd>
+ <dt><em>left</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box past its left edge.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Is a keyword indicating that all four values are inherited from each parent elements' calculated value.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/border-image-repeat/index.html b/files/ru/web/css/border-image-repeat/index.html
new file mode 100644
index 0000000000..15afede5b9
--- /dev/null
+++ b/files/ru/web/css/border-image-repeat/index.html
@@ -0,0 +1,154 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+translation_of: Web/CSS/border-image-repeat
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p>The <strong><code>border-image-repeat</code></strong> CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* border-image-repeat: <em>type</em> */
+border-image-value: stretch;
+
+/* border-image-repeat: <em>horizontal</em> <em>vertical</em> */
+border-image-width: round stretch;
+
+/* Глобальные значения */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><em>type</em></dt>
+ <dd>One of the <code>stretch</code>, <code>repeat</code>, or <code>round</code> keywords denoting how the image is treated both horizontally and vertically.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>One of the <code>stretch</code>, <code>repeat</code>, or <code>round</code> keywords denoting how the image is treated horizontally.</dd>
+ <dt><em>vertical</em></dt>
+ <dd>One of the <code>stretch</code>, <code>repeat</code>, or <code>round</code> keywords denoting how the image is treated vertically.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Keyword indicating that the image must be stretched to fill the gap between the two borders.</dd>
+ <dt><code>repeat</code></dt>
+ <dd>Keyword indicating that the image must be repeated until it fills the gap between the two borders.</dd>
+ <dt><code>round</code></dt>
+ <dd>Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.</dd>
+ <dt><code>space</code></dt>
+ <dd>The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>See {{cssxref("border-image")}} for examples of what repeat values will do.</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('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>space</code></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>11</td>
+   <td>{{CompatNo}}</td>
+   <td>9.1<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>round</code></td>
+   <td>30<sup>[4]</sup></td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9.1<sup>[5]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9.3<sup>[5]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Support the <code>space</code> value, but the actual effect is the same as the <code>repeat</code> value.</p>
+
+<p>[2] Support the <code>round</code> value, but the actual effect is the same as the repeat value.</p>
+
+<p>[3] См. {{bug(720531)}}.</p>
+
+<p>[4] См. <a href="https://code.google.com/p/chromium/issues/detail?id=169254#c12">Chrome bug</a>.</p>
+
+<p>[5] См. <a href="https://bugs.webkit.org/show_bug.cgi?id=14185">WebKit bug</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/almanac/properties/b/border-image/">css-tricks border-image</a></li>
+</ul>
diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html
new file mode 100644
index 0000000000..db3140e5e5
--- /dev/null
+++ b/files/ru/web/css/border-image-slice/index.html
@@ -0,0 +1,140 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+translation_of: Web/CSS/border-image-slice
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS свойство <strong><code>border-image-slice</code></strong>  делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это просходит путем указания 4 внутренних смещений.</p>
+
+<p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.</p>
+
+<p>The middle is not used by the border itself but is used as a background-image if the keyword <code>fill</code> is set. The keyword can be set at any position in the property (before, after or between the other values).</p>
+
+<p>The {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} properties define how these images will be used.</p>
+
+<p>The shorthand CSS property {{cssxref("border-image")}} may reset this property to its default value.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* border-image-slice: <em>slice</em> */
+border-image-slice: 30%;
+
+/* border-image-slice: <em>horizontal</em> <em>vertical</em> */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: <em>top</em> <em>horizontal</em> <em>bottom</em> */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* The fill value can be placed between any value */
+border-image-slice: 10% fill 7 12;
+
+/* Глобальные значения */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><em>slice</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the four slicing lines. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>vertical</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the two vertical slicing lines, the right and the left ones. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>top</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the top slicing line. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the bottom slicing line. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>right</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the right slicing line. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>left</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the left slicing line. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.1{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/border-image-source/index.html b/files/ru/web/css/border-image-source/index.html
new file mode 100644
index 0000000000..11b6b980a4
--- /dev/null
+++ b/files/ru/web/css/border-image-source/index.html
@@ -0,0 +1,117 @@
+---
+title: border-image-source
+slug: Web/CSS/border-image-source
+translation_of: Web/CSS/border-image-source
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>The <strong><code>border-image-source</code></strong> CSS property defines the {{cssxref("&lt;image&gt;")}} to use instead of the style of the border. If this property is set to <code>none</code>, the style defined by {{cssxref("border-style")}} is used instead.</p>
+
+<div class="note"><strong>Предупреждение:</strong> Though any {{cssxref("&lt;image&gt;")}} can be used with this CSS property, browser support is still limited and some browsers support only images defined using the <code>url()</code> functional notation.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* no border-image, use the specified border-style */
+border-image-source: none;
+
+/* the image.jpg is used as image */
+border-image-source: url(image.jpg);
+
+/* a gradient is used as image */
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Global values */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Specifies that no image should be used for the border. Instead the style defined by {{cssxref("border-style")}} is used.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Ссылка на изображение, которое будет использоваться в отрисовке границы.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Примеры</h2>
+
+<p>See {{cssxref("border-image")}} for examples of what the various source values will do.</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('CSS3 Backgrounds', '#border-image-source', 'border-image-source')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/border-image-width/index.html b/files/ru/web/css/border-image-width/index.html
new file mode 100644
index 0000000000..4f5afbb25d
--- /dev/null
+++ b/files/ru/web/css/border-image-width/index.html
@@ -0,0 +1,168 @@
+---
+title: border-image-width
+slug: Web/CSS/border-image-width
+translation_of: Web/CSS/border-image-width
+---
+<div style="">{{CSSRef}}</div>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p>he <strong><code>border-image-width</code></strong> CSS property defines the width of the border image by defining inward offsets from the border edges. If the <code>border-image-width</code> is greater than the {{cssxref("border-width")}}, then the border image extends beyond the padding (and/or content) edge.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис" style="">Синтаксис</h2>
+
+<pre class="brush:css">/* border-image-width: <em>all</em> */
+border-image-width: 3;
+
+/* border-image-width: <em>vertical horizontal</em> */
+border-image-width: 2em 3em;
+
+/* border-image-width: <em>top horizontal bottom</em> */
+border-image-width: 5% 15% 10%;
+
+/* border-image-width: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
+border-image-width: 5% 2em 10% auto;
+
+/* Global values */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+</pre>
+
+<p style="">где:</p>
+
+<dl style="">
+ <dt style=""><em>width</em></dt>
+ <dd style="">Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.</dd>
+ <dt style=""><em>vertical</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.</dd>
+ <dt><em>top</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.</dd>
+ <dt><em>right</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.</dd>
+ <dt><em>left</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
+</dl>
+
+<h3 id="Значения" style="">Значения</h3>
+
+<dl style="">
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Represents the width of the border. It can be an absolute or relative length. This length must not be negative.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd style="">Represents the width of the border as a percentage of the element. The percentage must not be negative.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Represents a multiple of the computed value of the element's {{cssxref("border-width")}} property to be used as the border width. The number must not be negative.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding {{cssxref("border-image-slice")}}. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис" style="">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры" style="">Примеры</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+   &lt;head&gt;&lt;/head&gt;
+   &lt;body&gt;
+      &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+      no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
+   &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">p {
+   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+   border-image-slice: 30;
+   border-image-width: 20px;
+   border-image-repeat: round;
+   padding: 40px;
+}</pre>
+
+<p style="">{{ EmbedLiveSample('Examples', '480', '320', '', 'Web/CSS/border-image-width') }}</p>
+
+<h2 id="Specifications" name="Specifications" style="">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div style="">{{CompatibilityTable}}</div>
+
+<div id="compat-desktop" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html
new file mode 100644
index 0000000000..bcbec329aa
--- /dev/null
+++ b/files/ru/web/css/border-radius/index.html
@@ -0,0 +1,216 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+  - CSS
+  - CSS свойство
+  - Скругление
+  - Углы
+translation_of: Web/CSS/border-radius
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-radius</code></strong> — это <a href="/ru/docs/Web/CSS">CSS</a>-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закругленность каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>
+
+
+
+<p>Это свойство является <a href="/ru/docs/Web/CSS/Shorthand_properties" title="ru/CSS/Shorthand_properties">короткой записью</a> для четырёх свойств {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}} и{{Cssxref("border-bottom-left-radius")}}.</p>
+
+<p>Скругление применяется ко всему {{Cssxref ("background")}}, даже если элемент не имеет границ, точное положение отсечения определяется свойством {{Cssxref ("background-clip")}}.</p>
+
+<p>Свойство <code>border-radius</code> не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение <code>collapse</code>.</p>
+
+<div class="note"><strong>Замечание:</strong> Как и с любым другим сокращенным свойством, отдельные подсвойства не могут наследоваться. Например, как в <code>border-radius:0 0 inherit inherit</code>, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers"><strong>/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */</strong>
+/* Скругление применяется ко всем четырём углам */
+border-radius: 10px;
+
+/* <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */
+border-radius: 10px 5%;
+
+/* <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */
+border-radius: 2px 4px 2px;
+
+/* <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */
+border-radius: 1px 0 3px 4px;
+
+<strong>/* Синтаксис из двух радиусов также может применяться ко всем четырем углам */</strong>
+/* (первые значения радиуса) /<em>радиус</em> */
+border-radius: 10px 5% / 20px;
+
+/* (первые значения радиуса) / <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */
+border-radius: 10px 5% / 20px 30px;
+
+/* (первые значения радиуса) / <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (первые значения радиуса) / <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Глобальные значения */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+</pre>
+
+<p>Свойство <code>border-radius</code> может быть задано как:</p>
+
+<ul>
+ <li>одно, два, три или четыре значения {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}}. Используется для задания обычного радиуса углов.</li>
+ <li>одна, две, три или четыре пары значений <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, разделённые "/". Используется для задания эллиптического склугления.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;"><em>radius</em></td>
+   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td>
+   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} уставливает радиус для верхнего левого и нижного правого угла элемента. Следует использовать синтаксис с двумя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td>
+   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left</em></td>
+   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right</em></td>
+   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} уставливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-right</em></td>
+   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} уставливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-left</em></td>
+   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
+ <dd>Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.</dd>
+ <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
+ <dd>Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.</dd>
+</dl>
+
+<p>Например:</p>
+
+<pre class="brush: css no-line-numbers">border-radius: 1em/5em;
+
+/* ... эквивалентно этому: */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+</pre>
+
+<pre class="brush: css no-line-numbers">border-radius: 4px 3px 6px / 2px 4px;
+
+/* ... эквивалетно этому: */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;">  border: solid 10px;
+  /* угол изгибается в виде 'D' */
+  border-radius: 10px 40px 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;">  border: groove 1em red;
+  border-radius: 2em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;">  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;">  border: none;
+  border-radius: 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: burlywood; border: none; border-radius: 50%;">  border: none;
+  border-radius: 50%;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: dotted; border-width: 10px 4px; border-radius: 10px 40px;">  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: dashed; border-width: 2px 4px; border-radius: 40px;">  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+</pre>
+
+<h2 id="Живые_примеры">Живые примеры</h2>
+
+<ul>
+ <li>Пример 1: <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></li>
+ <li>Пример 2: <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></li>
+ <li>Пример 3: <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></li>
+ <li>Пример 4: <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></li>
+ <li>Пример 5: <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.border-radius")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Относящиеся к Border-radius CSS-свойства: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}</li>
+</ul>
diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html
new file mode 100644
index 0000000000..658ac21870
--- /dev/null
+++ b/files/ru/web/css/border-width/index.html
@@ -0,0 +1,193 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+translation_of: Web/CSS/border-width
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>CSS свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Общий синтаксис</a>: {{csssyntax("border-width")}}
+</pre>
+
+<pre>border-width: <em>ширина</em> <em>                 /* Одно значение */</em>
+border-width: <em>вертикальная горизотальная</em> <em>   /* Два значения */</em>
+border-width: <em>верх</em> <em>горизонтальная </em><em>основание</em><em> </em><em>   /* Три значения */</em>
+border-width: <em>верх</em> <em>право</em> <em>основание</em> <em>лево </em><em> /* Четыре значения */</em>
+
+border-width: inherit /* Родительское значение */
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>Is either a non-negative explicit {{cssxref("&lt;length&gt;")}} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>thin</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">A thin border</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>medium</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">A medium border</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>thick</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">A thick border</td>
+   </tr>
+  </tbody>
+ </table>
+ The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the <code>thin ≤ medium ≤ thick</code> inequality and that the values are constant on a single document.</dd>
+</dl>
+
+<p><code>inherit</code></p>
+
+<dl>
+ <dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="A_mix_of_values_and_lengths" name="A_mix_of_values_and_lengths">A mix of values and lengths</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p id="sval"&gt;
+    one value: 6px wide border on all 4 sides&lt;/p&gt;
+&lt;p id="bival"&gt;
+    two different values: 2px wide top and bottom border, 10px wide right and left border&lt;/p&gt;
+&lt;p id="treval"&gt;
+    three different values: 0.3em top, 9px bottom, and zero width right and left&lt;/p&gt;
+&lt;p id="fourval"&gt;
+    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#sval {
+    border: ridge #ccc;
+    border-width: 6px;
+}
+#bival {
+    border: solid red;
+    border-width: 2px 10px;
+}
+#treval {
+    border: dotted orange;
+    border-width: 0.3em 0 9px;
+}
+#fourval {
+    border: solid lightgreen;
+    border-width: thin medium thick 1em;
+}
+p {
+    width: auto;
+    margin: 0.25em;
+    padding: 0.25em;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct change, the {{cssxref("&lt;length&gt;")}} CSS data type extension has an effect on this property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Added the constraint that values' meaning must be constant inside a document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>6.0</td>
+   <td>11</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li>
+ <li>The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li>
+</ul>
diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html
new file mode 100644
index 0000000000..9f116b5eda
--- /dev/null
+++ b/files/ru/web/css/border/index.html
@@ -0,0 +1,118 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS Границы
+  - CSS свойства
+  - Разметка
+  - СовместимостьМобильныхБраузеров
+  - Справка
+translation_of: Web/CSS/border
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>border</code></strong> это  <a href="/en-US/docs/Web/CSS/Shorthand_properties">универсальное свойство</a> для указания всех персональных свойств границ за раз: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+
+<p>Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное занчение. Обратите внимание, <code>border</code> не может быть использован для указания пользовательского значения {{cssxref("border-image")}}, но вместо этого устанавливает его в начальное значение, т.е. <code>none</code>.</p>
+
+<pre class="brush: css no-line-numbers">border: 1px;
+border: 2px dotted;
+border: medium dashed green;
+</pre>
+
+<p> </p>
+
+<div class="note style-wrap">
+<p><strong>Замечание:</strong> Рекомендуется использовать <code>border</code>, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}  принимают до четырех значений, позволяя установить различные значения для каждого ребра, <code>border</code> принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>Свойство <code>border</code>  указывается используя одно или более значений <code><a href="#&lt;br-width>">&lt;br-width&gt;</a></code>, <code><a href="#&lt;br-style>">&lt;br-style&gt;</a></code>, и <code><a href="#&lt;color>">&lt;color&gt;</a></code> указанных ниже.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt id="&lt;br-width>"><code>&lt;br-width&gt;</code></dt>
+ <dd>Толщина границ. По умолчанию <code>medium</code> если отсутствует. Больше информации {{Cssxref("border-width")}}.</dd>
+ <dt id="&lt;br-style>"><code>&lt;br-style&gt;</code></dt>
+ <dd>Стиль линии границ. По умолчанию <code>none</code> если отсутствует. Больше информации {{Cssxref("border-style")}}.</dd>
+ <dt id="&lt;color>">{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Цвет границ. По умолчанию принимает значение свойства элементов {{cssxref("color")}}. Больше информации {{Cssxref("border-color")}}.</dd>
+</dl>
+
+<h3 id="Обычный_синтаксис">Обычный синтаксис</h3>
+
+<pre class="syntaxbox"><code>{{csssyntax}}</code></pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="fun-border"&gt;Look at my borders.&lt;/div&gt;
+&lt;p&gt;Вы можете редактировать CSS ниже для экспериментов со стилями границ!&lt;/p&gt;
+&lt;style contenteditable&gt;
+  .fun-border {
+    border: 2px solid red;
+  }
+&lt;/style&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css  language-css"><code class="language-css"><span class="selector token">style </span><span class="punctuation token">{</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> 1px dashed black<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Убирает  <em>особую</em> поддержку для <code>transparent</code>, так как сейчас принимается как значение {{cssxref("&lt;color&gt;")}}; это не имеет практического воздействия.<br>
+    Хотя нельзя установить пользовательское значение через универсальное свойство, <code>border</code> сейчас сбрасывает {{cssxref("border-image")}} до начального значения (<code>none</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Принимает ключевое слово <code>inherit</code>. Так же принимает <code>transparent</code> как действующий цвет.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<div id="compat-mobile">
+<article>
+<p>{{Compat("css.properties.border")}}</p>
+</article>
+</div>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li>{{ Cssxref("border-radius") }}-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</li>
+</ul>
diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html
new file mode 100644
index 0000000000..db0c02f691
--- /dev/null
+++ b/files/ru/web/css/bottom/index.html
@@ -0,0 +1,162 @@
+---
+title: bottom
+slug: Web/CSS/bottom
+tags:
+  - CSS
+  - CSS Позиционирование
+  - CSS свойство
+  - Справка
+translation_of: Web/CSS/bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>bottom</code></strong> частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. <strong><code>bottom</code></strong> не применится, если задано <code>position: static</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<p>Эффект свойства <code>bottom</code> зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):</p>
+
+<ul>
+ <li>Когда задано <code>position: absolute</code> или <code>fixed</code> — свойство <code>bottom</code> устанавливает расстояние между нижним краем элемента и нижним краем содержащего его блока.</li>
+ <li>Когда задано <code>position: relative</code> — свойство <code>bottom</code> устанавливает расстояние, на которое нижний край элемента перемещается выше его обычной позиции.</li>
+ <li>Когда задано <code>position: sticky</code> — свойство <code>bottom</code> работает так, как при <code>position: relative</code> во время нахождения элемента внутри области просмотра, и как <code>position: fixed</code> вне области просмотра.</li>
+ <li>Когда задано <code>position: static</code> — свойство <code>bottom</code> <em>не имеет никакого эффекта</em>.</li>
+</ul>
+
+<p>Когда заданы оба свойства {{cssxref("top")}} и <code>bottom</code>, а свойство {{cssxref("height")}} не задано, <code>auto</code> или равно <code>100%</code>, то оба свойства {{cssxref("top")}} и <code>bottom</code> учитываются. Если свойство {{cssxref("height")}} задано, то свойство {{cssxref("top")}} будет учтено, а <code>bottom</code> — проигнорировано.</p>
+
+<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения величин */
+bottom: 3px;
+bottom: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+bottom: 10%;
+
+/* Ключевое слово */
+bottom: auto;
+
+/* Глобальные значения */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Отрицательная, нулевая или положительная величина, которая представляет:
+ <ul>
+  <li>для <em>абсолютно позиционируемых элементов</em> &amp;mdash расстояние до нижнего края содержащего их блока;</li>
+  <li>для <em>относительно позиционируемых элементов</em> &amp;mdash расстояние, на которое элемент смещается вверх, относительно своего положения в нормальном потоке.</li>
+ </ul>
+ </dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Процент от высоты родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Ключевое слово, которое указывает, что:
+ <ul>
+  <li>для <em>абсолютно спозиционированных элементов</em> — позиция элемента опирается на свойство {{cssxref("top")}}, пока <code>height: auto</code> обрабатывается как высота в зависимости от содержимого; если так же и <code>bottom: auto</code>, то элемент располагается так же, как при статическом позиционировании.</li>
+  <li>для <em>относительно спозиционированных элементов</em> — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("top")}}; если значение <code>top</code> также <code>auto</code>, элемент вообще не перемещается по вертикали.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока  (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} или ключевое слово <code>auto</code>.</dd>
+</dl>
+
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+
+
+<p>Этот пример демонстрирует разницу в поведении свойства <code>bottom</code>, когда {{cssxref("position")}} является <code>absolute</code> и <code>fixed</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h2&gt;Эксперимент&lt;/h2&gt;
+&lt;p&gt;Здесь&lt;br&gt;мы&lt;br&gt;набираем&lt;br&gt;побольше&lt;br&gt;высоты&lt;br&gt;для&lt;br&gt;вящей&lt;br&gt;наглядности&lt;br&gt;нашего&lt;br&gt;скромного,&lt;br&gt;но&lt;br&gt;очень&lt;br&gt;убедительного&lt;br&gt;эксперимента.&lt;br&gt;- Вот.&lt;/p&gt;
+&lt;div class="fixed"&gt;&lt;p&gt;Я фиксирован&lt;/p&gt;&lt;/div&gt;
+&lt;div class="absolute"&gt;&lt;p&gt;Я абсолютен&lt;/p&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-size: 30px;
+  line-height: 2em;
+}
+
+div {
+  width: 48%;
+  text-align: center;
+  background: rgba(55,55,55,.4);
+  border: 1px solid blue;
+}
+
+.absolute {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример','500','250')}}</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('CSS3 Transitions', '#animatable-css', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет дно как анимацию.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Добавляет поведение для липкого позиционирования.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("css.properties.bottom")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}</li>
+</ul>
diff --git a/files/ru/web/css/box-shadow/index.html b/files/ru/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..27ff998e35
--- /dev/null
+++ b/files/ru/web/css/box-shadow/index.html
@@ -0,0 +1,139 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - CSS
+  - CSS свойства
+  - CSS стили
+  - HTML цвета
+  - Стили
+  - тени
+translation_of: Web/CSS/box-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS-свойство <strong><code>box-shadow</code></strong> позволяет добавлять элементу одну или несколько теней, указывая их параметры через запятую.</span> Свойство тени представляет собой описанные смещения по x и y от элемента, радиус размытия и его радиус, а также цвет.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div>
+
+
+
+<p>Свойство <code>box-shadow</code> позволяет вам задать тень для почти любого элемента. Если элементу задано свойство {{cssxref("border-radius")}}, то тень также будет с закруглёнными углами. Расположение теней по оси z будет такое же, как и при применении свойства <a href="/ru/CSS/text-shadow">text-shadow</a> (первая тень будет впереди остальных).</p>
+
+<p><a href="/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Генератор box-shadow generator</a> - интерактивный инструмент, позволяющий вам генерировать <code>box-shadow</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Глобальные ключевые слова */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+</pre>
+
+<p>Чтобы задать одну тень, можно использовать:</p>
+
+<ul>
+ <li>Два, три и четыре значения <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>.
+
+  <ul>
+   <li>Если задано только два значения, они интерпретируется как <code><a href="#&lt;offset-x> &lt;offset-y>">&lt;offset-x&gt;&lt;offset-y&gt;</a></code> values.</li>
+   <li>Если задано третье значение, оно понимается как <code><a href="#&lt;blur-radius>">&lt;blur-radius&gt;</a></code>.</li>
+   <li>Если задано чертвёртое значение, оно интерпретируется <code><a href="#&lt;spread-radius>">&lt;spread-radius&gt;</a></code>.</li>
+  </ul>
+ </li>
+ <li>Дополнительно, можно задать ключевое слово <code><a href="#inset">inset</a></code>.</li>
+ <li>Дополнительно, можно задать значение <code><a href="#&lt;color>">&lt;color&gt;</a></code>.</li>
+</ul>
+
+<p>Чтобы задать несколько теней, перечислите их через запятую.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><a id="inset" name="inset"><code>inset</code></a></dt>
+ <dd>Если ключевое слово <code>inset</code> не указано (по умолчанию), тень будет снаружи элемента (и создаст эффект выпуклости блока).<br>
+ При наличие ключевого слова <code>inset</code>, тень будет падать внутри блока и создаст эффект вдавленности блока. Inset-тени рисуются в пределах границ элемента (даже прозрачные), поверх фона и за контентом.</dd>
+ <dt><a id="&lt;offset-x> &lt;offset-y>" name="&lt;offset-x> &lt;offset-y>"><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></a></dt>
+ <dd>Существуют 2 значения {{ cssxref("&lt;length&gt;") }}, которые устанавливают смещение тени. <code>&lt;offset-x&gt;</code> определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. <code>&lt;offset-y&gt;</code> определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы {{ cssxref("&lt;length&gt;") }} можно задать.<br>
+ Если оба значения равны <code>0</code>, то тень расположится за элементом (и будет отображаться размытие, если <code>&lt;blur-radius&gt;</code> и/или <code>&lt;spread-radius&gt;</code> установлены).</dd>
+ <dt><a id="&lt;blur-radius>" name="&lt;blur-radius>"><code>&lt;blur-radius&gt;</code></a></dt>
+ <dd>Это третье значение {{ cssxref("&lt;length&gt;") }}. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться <code>0</code> (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следущее:</dd>
+ <dd>
+ <blockquote>…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.</blockquote>
+ </dd>
+ <dt><a id="&lt;spread-radius>" name="&lt;spread-radius>"><code>&lt;spread-radius&gt;</code></a></dt>
+ <dd>Это четвёртое значение {{ cssxref("&lt;length&gt;") }}. Положительные значения увеличивают тень, отрицательные - сжимают. По умолчанию значение равно <code>0</code> (размер тени равен размеру элемента).</dd>
+ <dt><a id="&lt;color>" name="&lt;color>"><code>&lt;color&gt;</code></a></dt>
+ <dd>Смотрите возможные ключевые слова и нотации для {{cssxref("&lt;color&gt;")}}.<br>
+ Если не указано, используемый цвет будет зависеть от браузера - обычно будет применено значение свойства {{cssxref("color")}}, но Safari в настоящее время рисует прозрачную тень в этом случае.</dd>
+</dl>
+
+<h3 id="Интерполяция">Интерполяция</h3>
+
+<p>Each shadow in the list (treating <code>none</code> as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not <code>inset</code>, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one <code>inset</code> and the other not <code>inset</code>, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is <code>transparent</code>, all lengths are <code>0</code>, and whose <code>inset</code> (or not) matches the longer list.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<ul>
+ <li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">тест box-shadow</a></li>
+ <li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">примеры и руководство box-shadow</a></li>
+ <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">CSS Генератор Box Shadow</a></li>
+</ul>
+
+<h2 class="cleared" id="Спецификации">Спецификации</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('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.properties.box-shadow")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите_также</h2>
+
+<ul>
+ <li>Тип данных {{cssxref("&lt;color&gt;")}}</li>
+ <li>Другие свойства, относящиеся к цвету: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
+ <li><a href="/ru/docs/Web/HTML/Applying_color">Задание цвета HTML-элементам с помощью CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..9253fd4660
--- /dev/null
+++ b/files/ru/web/css/box-sizing/index.html
@@ -0,0 +1,128 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - Блоковая модель
+  - Контент
+  - высота
+  - размер
+  - ширина
+translation_of: Web/CSS/box-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> свойство <strong><code>box-sizing</code></strong> определяет как вычисляется общая ширина и высота элемента.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+
+<div></div>
+
+<p>По умолчанию в <a href="/ru/docs/Web/CSS/box_model" title="CSS/Box_model">блоковой модели CSS</a> ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с <code>width: 25%;</code> , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.</p>
+
+<p>Свойство <code>box-sizing</code> может изменять это поведение:</p>
+
+<ul>
+ <li><code>content-box</code> даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.</li>
+ <li><code>border-box</code> говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Примечание: </strong>Часто выставление <code>box-sizing: border-box</code> полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устранаяет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя <code>position-relative</code> или <code>position: absolute</code>, <code>box-sizing: content-box</code> позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>Для свойства <code>box-sizing</code>  устанавливается единственное ключевое слово из списка значени ниже.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>Это значение по умолчанию, определенное в CSS стандарте. Свойства <a href="/ru/docs/Web/CSS/width">width</a> и <a href="/ru/docs/Web/CSS/height">height</a> включают исключительно контент, и не включают <a href="/ru/docs/Web/CSS/padding">padding</a> и <a href="/ru/docs/Web/CSS/border">border</a>. Например <code>.box {width: 350px; border: 10px solid black;}</code>  будет иметь ширину 370 пикселей.</dd>
+ <dd>Размеры элемента рассчитываются следующим образом: <em>width = ширина контента</em>, и <em>height = высота контента</em>. (Границы и внутренние отступы не включаются в вычисление.)</dd>
+</dl>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>Свойства <a href="/ru/docs/Web/CSS/width">width</a> и <a href="/ru/docs/Web/CSS/height">height</a> включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, <code>.box {width: 350px; border: 10px solid black;}</code> будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому <code>border-box</code> невозможно использовать для скрытия элемента.</dd>
+ <dd>Размеры элемента рассчитываются следующим образом: <em>width = граница + внутренний отступ + ширина контента</em>, и <em>height = граница + внутренний отступ + высота контента</em>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Значение <code>padding-box</code> устарело</p>
+</div>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+<p>Этот пример показывает как разные значения <code>box-sizing</code> изменяют видимый размер двух идентичных элементов.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', 'auto', 300)}}</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('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совмествимость с браузерами</h2>
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/box_model" title="CSS/Box model">Блоковая модель CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/box_model/index.html b/files/ru/web/css/box_model/index.html
new file mode 100644
index 0000000000..6868871c5a
--- /dev/null
+++ b/files/ru/web/css/box_model/index.html
@@ -0,0 +1,66 @@
+---
+title: 'Блоковая модель (боксовая модель, box model)'
+slug: Web/CSS/box_model
+tags:
+  - CSS
+  - Guide
+  - Веб
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<h2 id="Описание">Описание</h2>
+
+<p>В HTML-документе каждому элементу на странице соответствует прямоугольная область (бокс или блок). Движок рендеринга в браузере определяет размеры и положение боксов на странице, а также их свойства вроде цвета, фоновой картинки для того, чтобы отобразить их на экране.</p>
+
+<p>В языке CSS есть специальная боксовая модель (также блоковая модель или блочная модель, англ. <span lang="en">box model</span>), которая описывает, из чего состоит бокс и какие свойства влияют на его размеры. В ней у каждого бокса есть 4 области: <strong>margin </strong>(внешние отступы), <strong>border </strong>(рамка), <strong>padding </strong>(внутренние поля), и <strong>content </strong>(контент или содержимое).</p>
+
+<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p><a name="content"><strong>Внутренняя область</strong> элемента (<strong>content area</strong>) содержит текст и другие элементы, расположенные внутри (<em>контент</em> или <em>содержимое</em>). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри <em>content edge</em>; её размеры называются <em>ширина контента</em> (<em>content width</em> или <em>content-box width)</em>, и <em>высота контента</em> (<em>content height</em> или content-box height). Иногда еще говорят «внутренняя ширина/высота элемента»</a></p>
+
+<p>По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задается свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство  {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.</p>
+
+<p><a name="padding">Поля элемента (<strong>padding area)</strong> — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (<em>padding edge)</em>.</a></p>
+
+<p>Размеры полей задаются по отдельности с разных сторон свойствами {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} или общим свойством {{ cssxref("padding") }}.</p>
+
+<p><a name="border">Область рамки (<strong>border area)</strong> окружает поля элемента, а ее граница называется края рамки (<em>border edge).</em> Ширина рамки задается отдельным свойством  {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учетом полей и рамки иногда называют внешней шириной/высотой элемента.</a></p>
+
+<p><a name="margin">Отступы (<strong>margin area)</strong> добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов.</a></p>
+
+<p>Величина отступов задается по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.</p>
+
+<p>Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (<a href="/ru/docs/Web/CSS/margin_collapsing" title="ru/CSS/margin_collapsing">margin collapsing</a>). Схлопываются только вертикальные отступы.</p>
+
+<p>Для элементов с {{ cssxref("display") }}<code>: inline</code> (или <code>inline-block, inline-table</code>) на занимаемое по высоте место также влияет значение свойства {{ cssxref('line-height') }}.</p>
+
+<h2 id="Стандарты">Стандарты</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Стандарт</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions" title="http://www.w3.org/TR/CSS21/box.html#box-dimensions">CSS Level 2 (revision 1)</a></td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Though more precisely worded, there is no practical change</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-CSS1/#formatting-model" title="http://www.w3.org/TR/REC-CSS1/#formatting-model">CSS Level 1</a></td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/CSS/CSS_Reference">Справочник по CSS</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>Связанные свойства: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li>
+</ul>
diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html
new file mode 100644
index 0000000000..6f5b561a35
--- /dev/null
+++ b/files/ru/web/css/calc()/index.html
@@ -0,0 +1,210 @@
+---
+title: Функция calc()
+slug: Web/CSS/calc()
+tags:
+  - css calc
+translation_of: Web/CSS/calc()
+---
+<div>{{CSSRef}}</div>
+
+<p><code>calc()</code> - это функция CSS, которая даёт возможность расчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}}, или {{cssxref("&lt;integer&gt;")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/function-calc.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>calc()</code> принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / <span id="result_box" lang="ru"><span class="hps">с использованием стандартных</span> <span class="hps">правил</span> <span class="hps">приоритета операторов</span></span>:</p>
+
+<dl>
+ <dt><strong>+</strong></dt>
+ <dd>Сложение</dd>
+ <dt><strong>-</strong></dt>
+ <dd>Вычитание.</dd>
+ <dt><strong>*</strong></dt>
+ <dd>Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("&lt;number&gt;")}}.</dd>
+ <dt><strong>/</strong></dt>
+ <dd>Деление. Делитель должен быть  {{cssxref("&lt;number&gt;")}}.</dd>
+</dl>
+
+<p>Операнды в expression могут быть различными выражениями {{cssxref("&lt;length&gt;")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.</p>
+
+<div class="note"><strong>Внимание:</strong> Деление на ноль выдаст ошибку при парсинге HTML.</div>
+
+<div class="note"><strong>Note:</strong> Операторы + и - всегда должны быть по обеим сторонам отеделены пробелом. Выражение <code>calc(50% -8px)</code> будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как <code>calc(50% - 8px)</code> - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.<br>
+Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.</div>
+
+<dl>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">calc(<em>expression</em>)</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Позиционирование_объекта_в_окне_с_помощью_отступа">Позиционирование объекта в окне с помощью отступа</h3>
+
+<p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px. </p>
+
+<pre class="brush: css notranslate">.banner {
+  position: absolute;
+  left: 5%;                 /* для браузеров не поддерживающих calc() */
+  left: calc(40px);
+  width: 90%;               /* для браузеров не поддерживающих calc() */
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="banner"&gt;Это баннер!&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('%D0%9F%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0_%D0%B2_%D0%BE%D0%BA%D0%BD%D0%B5_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D0%B0', '100%', '60') }}</p>
+
+<h3 id="Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера">Автоматическое изменение размера формы ввода для соответствия размеру контейнера</h3>
+
+<p>В следующем случае <code>calc()</code> помогает обеспечить не выпадание полей формы за края блока, задав отступ.</p>
+
+<p>Давайте посмотрим некоторый код CSS:</p>
+
+<pre class="brush: css notranslate">input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* для браузеров, не поддерживающих calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* для браузеров, не поддерживающих calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию <code>calc()</code>, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следущему HTML-коду:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div id="formbox"&gt;
+  &lt;label&gt;Type something:&lt;/label&gt;
+  &lt;input type="text"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D1%84%D0%BE%D1%80%D0%BC%D1%8B_%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0_%D0%B4%D0%BB%D1%8F_%D1%81%D0%BE%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%83_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80%D0%B0', '100%', '80') }}</p>
+
+<h3 id="Вложенный_calc_с_CSS_переменными">Вложенный <code>calc()</code> с CSS переменными</h3>
+
+<p>Вы также можете использовать <code>calc()</code> с CSS переменными. Рассмотрим пример кода:</p>
+
+<pre class="notranslate">.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}</pre>
+
+
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Values', '#calc-notation', 'calc()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}<br>
+    26</td>
+   <td>{{CompatGeckoDesktop("2")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16")}}</td>
+   <td>9</td>
+   <td>-</td>
+   <td>6 {{property_prefix("-webkit")}} (buggy)<br>
+    7</td>
+  </tr>
+  <tr>
+   <td>On gradients' color stops</td>
+   <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}<br>
+    27 (maybe 26)</td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>9</td>
+   <td>-</td>
+   <td>6 {{property_prefix("-webkit")}} (buggy)<br>
+    7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>&lt;= 2.3.6 not supported</td>
+   <td>{{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>&lt;= IOs 6.1.3 not supported<br>
+    6 {{property_prefix("-webkit")}}<br>
+    7</td>
+  </tr>
+  <tr>
+   <td>On gradients' color stops</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
+</ul>
diff --git a/files/ru/web/css/cascade/index.html b/files/ru/web/css/cascade/index.html
new file mode 100644
index 0000000000..f1c17ceff6
--- /dev/null
+++ b/files/ru/web/css/cascade/index.html
@@ -0,0 +1,154 @@
+---
+title: Cascade
+slug: Web/CSS/Cascade
+translation_of: Web/CSS/Cascade
+---
+<p>{{ CSSRef() }}</p>
+
+
+
+<p>Каскадность это алгоритм, который определяет как совмещать и сочетать значения свойств происходящих из различных источников(CSS правила могут располагаться как в самом веб-документе, так и во внешних файлах). Данный алгоритм лежит в основе CSS, как можно понять из его названия: <em>Cascading</em> Style Sheets(<em>Каскадные </em>Таблицы Стилей). Данная статья объясняет что такое каскадность, порядок в котором определяется какие свойства будут в конечном итоге выполнены и как это затрагивает вас, веб разработчика.</p>
+
+<h2 id="What_CSS_entities_participate_in_the_cascade">What CSS entities participate in the cascade</h2>
+
+<p>Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like  {{ cssxref("@font-face")}} containing <em>descriptors</em> don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its <code>font-family</code> descriptor. If several <code>@font-face</code> with the same descriptor are defined, only the most adequate <code>@font-face</code>, as a whole, is considered.</p>
+
+<p>If the declarations contained in most <a href="/en-US/docs/CSS/At-rule" title="/en-US/docs/CSS/At-rule">at-rules</a> participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.</p>
+
+<p>Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.</p>
+
+<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2>
+
+<p>The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:</p>
+
+<ul>
+ <li>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers uses actual style sheets to perform this, while others simulate them in code, but both cases should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.</li>
+ <li>The author of the Web page define styles for the document. These are the most common style sheets. Most of the time several of them are defined and they make the look and feel of the Web site — its theme.</li>
+ <li>The <em>reader</em>, the user of the browser, may have a custom style sheet to tailor its experience.</li>
+</ul>
+
+<p>Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.</p>
+
+<h2 id="Cascading_order">Cascading order</h2>
+
+<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p>
+
+<ol>
+ <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li>
+ <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
+  <table class="standard-table">
+   <thead>
+    <tr>
+     <th scope="col"></th>
+     <th scope="col">Origin</th>
+     <th scope="col">Importance</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <td>1</td>
+     <td>user agent</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>2</td>
+     <td>user</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>3</td>
+     <td>author</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>4</td>
+     <td>CSS Animations</td>
+     <td><em>see below</em></td>
+    </tr>
+    <tr>
+     <td>5</td>
+     <td>author</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>6</td>
+     <td>user</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>7</td>
+     <td>user agent*</td>
+     <td><code>!important</code></td>
+    </tr>
+   </tbody>
+  </table>
+  <span style="font-size: 1rem; letter-spacing: -0.00278rem;">* based on <a href="https://www.w3.org/TR/css-cascade-3/#importance">w3.org CSS3 specs</a></span></li>
+</ol>
+
+<ol>
+ <li>In case of equality, the <a href="/en-US/docs/CSS/Specificity" title="/en-US/docs/CSS/Specificity">specificity</a> of a value is considered to choose one or the other.</li>
+</ol>
+
+<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2>
+
+<p><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a>, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single <code>@keyframes</code> and never mixes several of them.</p>
+
+<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p>
+
+<p>Also note that values within <code>@keyframes</code> at-rules overwrite all normal values but are overwritten by <code>!important</code> values.</p>
+
+<h2 id="Example">Example</h2>
+
+<p><strong>User-agent CSS:</strong></p>
+
+<pre>li { margin-left: 10px }</pre>
+
+<p><strong>Author CSS 1:</strong></p>
+
+<pre>li { margin-left: 0 } /* This is a reset */</pre>
+
+<p><strong>Author CSS 2:</strong></p>
+
+<pre>@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+</pre>
+
+<p><strong>User CSS:</strong></p>
+
+<pre>.specific { margin-left: 1em }</pre>
+
+<p><strong>HTML:</strong></p>
+
+<pre>&lt;ul&gt;
+  &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
+  &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code> so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p>
+
+<p>So three declarations are in competition:</p>
+
+<pre>margin-left: 0</pre>
+
+<pre>margin-left: 3px</pre>
+
+<pre>margin-left: 1px</pre>
+
+<p>The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:</p>
+
+<pre>margin-left: 3px</pre>
+
+<p>Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The very simple <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/">introduction</a> of cascading in the CSS Tutorial.</li>
+ <li>{{CSS_Key_Concepts()}}</li>
+</ul>
diff --git a/files/ru/web/css/child_combinator/index.html b/files/ru/web/css/child_combinator/index.html
new file mode 100644
index 0000000000..c7c42c79da
--- /dev/null
+++ b/files/ru/web/css/child_combinator/index.html
@@ -0,0 +1,112 @@
+---
+title: Селектор дочерних элементов
+slug: Web/CSS/Child_combinator
+translation_of: Web/CSS/Child_combinator
+---
+<p>{{CSSRef("Selectors")}}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><code>Комбинатор &gt;</code> разделяет 2 селектора, находит элементы заданные вторым селектором, являющие <strong>прямыми </strong>потомками для элементов отобранных первым селектором. Напротив, два селектора в <a href="/ru/docs/Web/CSS/Descendant_selectors">селекторе потомков</a>  находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество "прыжков" до них в DOM.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">selector1 &gt; selector2 { <em>style properties</em> }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">span { background-color: white; }
+div &gt; span {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span 1 в div
+    &lt;span&gt;Span 2 в span, который в div&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span 3. Не в div вообще&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 100) }}</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('CSS4 Selectors', '#child-combinators', 'child combinator') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#child-combinators', 'child combinators') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>7.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html
new file mode 100644
index 0000000000..d876cc3d6c
--- /dev/null
+++ b/files/ru/web/css/clamp()/index.html
@@ -0,0 +1,108 @@
+---
+title: clamp()
+slug: Web/CSS/clamp()
+translation_of: Web/CSS/clamp()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a>-функция <strong><code>clamp()</code></strong> задаёт значение в диапазоне между указанными нижней и верхней границами. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. Может использоваться везде, где допускается применение {{CSSxRef("&lt;length&gt;")}}, {{CSSxRef("&lt;frequency&gt;")}}, {{CSSxRef("&lt;angle&gt;")}}, {{CSSxRef("&lt;time&gt;")}}, {{CSSxRef("&lt;percentage&gt;")}}, {{CSSxRef("&lt;number&gt;")}}, или {{CSSxRef("&lt;integer&gt;")}}.</p>
+
+<p><code>clamp(MIN, VAL, MAX)</code> вычисляется как <code>{{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))</code></p>
+
+<pre class="brush: css; no-line-numbers notranslate">/* свойство: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);</pre>
+
+<p>В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.</p>
+
+<p>Давайте предположим, что в примере выше 1em равен 16px:</p>
+
+<pre class="brush: css; no-line-numbers notranslate">width: clamp(10px, 4em, 80px);
+/* если 1em = 16px, 4em = (16px * 4) = 64px */
+width: clamp(10px, 64px, 80px);
+/* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>clamp()</code> принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.</p>
+
+<p><em>Минимальное значение</em> – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".</p>
+
+<p><em>Предпочитаемое значение</em> – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.</p>
+
+<p><em>Максимальное значение</em> – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхную границу допустимого диапазона.</p>
+
+<p>Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("&lt;length&gt;")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции <code>calc()</code>. Также, можно использовать круглые скобки, чтобы задать порядок вычисление.</p>
+
+<p>Можно использовать разные единицы измерения для каждого значения в выражении и разные единицы измерения в любой математической функции, .являющейся частью любого из аргументов.</p>
+
+<h3 id="Примечания">Примечания</h3>
+
+<ul>
+ <li>Математические выражения, включающие в себя проценты для ширины и высоты колонок таблицы, групп колонок таблицы, строк таблицы, групп строк таблицы и ячеек таблицы и при значении "auto" и при значении "fixed" свойства "table-layout" могут обрабатываться как если бы было задано значение <code>auto</code>.</li>
+ <li>Допускается вкладывать функции <code>max()</code> и <code>min()</code> в качестве значений выражений, в этом случае внутренние обрабатываются как простые скобки. Выражения являются полностью математическими выражениями, поэтому вы можете использовать сложения, вычитание, умножение и деление без использования самой функции calc().</li>
+ <li>Выражение может быть значениями, объединяющими операторы сложения (+), вычитания (-), умножения (*) и деления (/) с использованием стандартных правил приоритета операторов. Не забудьте поставить пробелы с каждой стороны от операндов + и -. Операнды в выражении могут иметь любое значение синтаксиса {{CSSxRef ("&lt;length&gt;")}}. Вы можете использовать разные единицы для каждого значения в своём выражении. Вы также можете использовать круглые скобки, чтобы установить порядок вычислений, когда это необходимо.</li>
+ <li>Часто вам может понадобиться использовать {{CSSxRef ("min")}} и {{CSSxRef ("max")}} в функции clamp ().</li>
+</ul>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Установка_минимального_и_максимального_размера_шрифта">Установка минимального и максимального размера шрифта</h3>
+
+<p><code>clamp()</code> позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в <a href="https://css-tricks.com/snippets/css/fluid-typography/">Fluid Typography</a>, но в одну строку и без использования медиа-запросов.</p>
+
+<pre class="brush: css notranslate">p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+</pre>
+
+<pre class="brush: html; notranslate">&lt;p&gt;
+If 2.5vw is less than 1rem, the font-size will be 1rem.
+If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
+Otherwise, it will be 2.5vw.
+&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p>TBD</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.types.clamp")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{CSSxRef("calc")}}</li>
+ <li>{{CSSxRef("max")}}</li>
+ <li>{{CSSxRef("min")}}</li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS Values</a></li>
+</ul>
diff --git a/files/ru/web/css/class_selectors/index.html b/files/ru/web/css/class_selectors/index.html
new file mode 100644
index 0000000000..ce498a8a2b
--- /dev/null
+++ b/files/ru/web/css/class_selectors/index.html
@@ -0,0 +1,121 @@
+---
+title: Селекторы по классу
+slug: Web/CSS/Class_selectors
+translation_of: Web/CSS/Class_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<h2 id="Summary" name="Summary">Краткое описание</h2>
+
+<p>В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделенный пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведенному в селекторе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">.classname { <em>style properties</em> }</pre>
+
+<p>Это эквивалетно следующему {{ Cssxref("Attribute_selectors", "селектор по атрибуту") }}:</p>
+
+<pre class="syntaxbox">[class~=classname] { <em>style properties</em> }</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span.classy {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span class="classy"&gt;Здесь span с каким-то текстом.&lt;/span&gt;
+&lt;span&gt;А тут другой span.&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 50) }}</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('CSS4 Selectors', '#class-html', 'class selectors') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#class-html', 'class selectors') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#class-html', 'child selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#class-as-selector', 'child selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/clear/index.html b/files/ru/web/css/clear/index.html
new file mode 100644
index 0000000000..1a0c6172b1
--- /dev/null
+++ b/files/ru/web/css/clear/index.html
@@ -0,0 +1,237 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - Справка
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>clear</code></strong> CSS указывает, может ли элемент быть рядом с плавающими  <a href="https://developer.mozilla.org/en-US/docs/CSS/float" title="CSS/float">floating</a> элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство <code>clear</code> применяется как к плавающим, так и к неплавающим элементам.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<p>При применении к неплавающим блокам он перемещает границу края <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">border edge</a> элемента до тех пор, пока не окажется ниже края <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">margin edge</a> поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.</p>
+
+<p>Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам -  <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">margin edge</a> нижнего элемента перемещается ниже <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">margin edge</a> всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.</p>
+
+<p>Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">контексте форматирования блоков</a>. </p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется <strong>clearfix,</strong> и один из способов сделать это - это заменит <code>clear</code> замененный {{cssxref("::after")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> на нем.</p>
+
+<pre class="brush: css">#container::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+</pre>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Значения ключевых слов */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Global values */
+clear: inherit;
+clear: initial;
+clear: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент не перемещается вниз, чтобы очистить предыдущие плавающие элементы.</dd>
+ <dt><code>left</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить <em>левые</em> поплавки.</dd>
+ <dt><code>right</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы удалить прошлые <em>правые</em> поплавки.</dd>
+ <dt><code>both</code></dt>
+ <dd>Это ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левые, так и правые поплавки.</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков <em>в начале содержащего его блока</em>, то есть <em>левые</em> поплавки на скриптах <strong>ltr</strong> и <em>правые</em> поплавки на скриптах <strong>rtl</strong>.</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков <em>в конце содержащего его блока</em>, то есть <em>правые</em> поплавки на скриптах <strong>ltr</strong> и <em>левые</em> поплавки на скриптах <strong>rtl</strong>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="clear:_left" name="clear:_left">clear: left</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="left"&gt;Этот абзац очищается слева.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('clear:_left','100%','250')}}</p>
+
+<h3 id="clear:_right" name="clear:_right">clear: right</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="red"&gt;- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="right"&gt;Этот абзац очищается справа.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}</pre>
+
+<p>{{EmbedLiveSample('clear:_right','100%','250')}}</p>
+
+<h3 id="clear:_both" name="clear:_both">clear: both</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor".&lt;/p&gt;
+  &lt;p class="both"&gt;Этот абзац очищает оба.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}</pre>
+
+<p>{{EmbedLiveSample('clear:_both','100%','300')}}</p>
+
+<h2 id="Характеристики">Характеристики</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('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Добавляет значения <code>inline-start</code> и <code>inline-end</code>. </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Никаких существенных изменений, хотя детали уточняются.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("css.properties.clear")}}</p>
+
+<div> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/box_model" title="CSS/box_model">Box model</a></li>
+</ul>
diff --git a/files/ru/web/css/clip-path/index.html b/files/ru/web/css/clip-path/index.html
new file mode 100644
index 0000000000..c218eb1f00
--- /dev/null
+++ b/files/ru/web/css/clip-path/index.html
@@ -0,0 +1,586 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+translation_of: Web/CSS/clip-path
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>clip-path</strong></code> создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (<code><a href="https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle">circle()</a></code>).</p>
+
+<div class="note">
+<p><strong>Историческая справка:</strong> Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+clip-path: none;
+
+/* Image values */
+clip-path: url(resources.svg#c1);
+
+/* Box values */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Geometry values */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Box and geometry values combined */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Global values */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+</pre>
+
+<div class="hidden" id="clip-path">
+<pre class="brush: html">&lt;svg class="defs"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
+      &lt;path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;clip-path: none&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="none"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="none"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: url(#myPath)&lt;br&gt;&lt;br&gt;
+      Assuming the following clipPath definition:
+      &lt;pre&gt;
+&amp;lt;svg&amp;gt;
+  &amp;lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&amp;gt;
+    &amp;lt;path d="M0.5,1
+      C 0.5,1,0,0.7,0,0.3
+      A 0.25,0.25,1,1,1,0.5,0.3
+      A 0.25,0.25,1,1,1,1,0.3
+      C 1,0.7,0.5,1,0.5,1 Z" /&amp;gt;
+  &amp;lt;/clipPath&amp;gt;
+&amp;lt;/svg&amp;gt;&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: circle(25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape1"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape1"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: fill-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape3"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape3"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: stroke-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape4"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape4"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: view-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape5"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape5"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: margin-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape6"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape6"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: border-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape7"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape7"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: padding-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape8"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape8"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: content-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape9"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape9"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>mlk</p>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+  flex: 1;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  display: inline-block;
+  border: 1px dotted grey;
+  position:relative;
+}
+
+.container:before {
+  content: 'margin';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font: italic .6em sans-serif;
+}
+
+.viewbox {
+  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
+}
+
+.container.viewbox:after {
+  content: 'viewbox';
+  position: absolute;
+  left: 1.1rem;
+  top: 1.1rem;
+  font: italic .6em sans-serif;
+}
+
+.cell span {
+  display: block;
+  margin-bottom: .5em;
+}
+
+p {
+  font-family: sans-serif;
+  background: #000;
+  color: pink;
+  margin: 2em;
+  padding: 3em 1em;
+  border: 1em solid pink;
+  width: 6em;
+}
+
+.none { clip-path: none; }
+.svg  { clip-path: url(#myPath); }
+.shape1 { clip-path: circle(25%); }
+.shape2 { clip-path: circle(25% at 25% 25%); }
+.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
+.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
+.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
+.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
+.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
+.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
+.shape9 { clip-path: content-box circle(25% at 25% 25%); }
+
+.defs {
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+pre { margin-bottom: 0; }
+
+svg {
+  margin: 1em;
+  font-family: sans-serif;
+  width: 192px;
+  height: 192px;
+}
+
+svg rect {
+  stroke: pink;
+  stroke-width: 16px;
+}
+
+svg text {
+  fill: pink;
+  text-anchor: middle;
+}
+
+svg text.em {
+  font-style: italic;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>clip-path</code> определяется как одно или комбинация значений перечисленных ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>url()</code></dt>
+ <dd>Представляет URL ссылку на траекторию, ограничивающую элемент.</dd>
+ <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt>
+ <dd>Функция {{cssxref("&lt;basic-shape&gt;")}}. Размер и положение области определяется значением <code>&lt;geometry-box&gt;</code>. Если геометрия не определена,<code>border-box</code> будет использоваться в качестве блока.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd>Если определен в комбинации с <code>&lt;basic-shape&gt;</code>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений:
+ <dl>
+  <dt><code>fill-box</code></dt>
+  <dd>Использует границы объекта в качестве базовой области.</dd>
+  <dt><code>stroke-box</code></dt>
+  <dd>Использует stroke bounding box в качестве базовой области.</dd>
+  <dt><code>view-box</code></dt>
+  <dd>Использует ближайший SVG viewport в качестве базового блока. Если отриут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.​​​​​​​</dd>
+  <dt><code>margin-box</code></dt>
+  <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> в качестве базового блока.</dd>
+  <dt><code>border-box</code></dt>
+  <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> в качестве базового блока.</dd>
+  <dt><code>padding-box</code></dt>
+  <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> в качестве базового блока.</dd>
+  <dt><code>content-box</code></dt>
+  <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> в качестве базового блока.</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>Обрезанная область не создается.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис.">Формальный синтаксис.</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css">/* Inline SVG  */
+.target {
+  clip-path: url(#c1);
+}
+
+/* External SVG */
+.anothertarget {
+  clip-path: url(resources.svg#c1);
+}
+
+/* Circle shape */
+.circleClass {
+  clip-path: circle(15px at 20px 20px);
+}</pre>
+
+<h2 id="Живой_пример">Живой пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo"&gt;
+&lt;svg height="0" width="0"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="cross"&gt;
+      &lt;rect y="110" x="137" width="90" height="90"/&gt;
+      &lt;rect x="0" y="110" width="90" height="90"/&gt;
+      &lt;rect x="137" y="0" width="90" height="90"/&gt;
+      &lt;rect x="0" y="0" width="90" height="90"/&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;select id="clipPath"&gt;
+  &lt;option value="none"&gt;none&lt;/option&gt;
+  &lt;option value="circle(100px at 110px 100px)"&gt;circle&lt;/option&gt;
+  &lt;option value="url(#cross)" selected&gt;cross&lt;/option&gt;
+  &lt;option value="inset(20px round 20px)"&gt;inset&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath");
+clipPathSelect.addEventListener("change", function (evt) {
+  document.getElementById("clipped").style.clipPath = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Extends its application to HTML elements.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition (applies to SVG elements only).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("css.properties.clip-path")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li>
+ <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li>
+ <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li>
+ <li>{{SVGAttr("clip-path")}} SVG attribute</li>
+</ul>
diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html
new file mode 100644
index 0000000000..f40f69bcd3
--- /dev/null
+++ b/files/ru/web/css/color_value/index.html
@@ -0,0 +1,1520 @@
+---
+title: <color>
+slug: Web/CSS/color_value
+translation_of: Web/CSS/color_value
+---
+<div>{{CSSRef}}</div>
+
+<p>Тип <strong><code>&lt;color&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> предоставляет цвет в цветовом спектре <a class="external" href="https://en.wikipedia.org/wiki/SRGB">sRGB</a>. В  <code>&lt;color&gt;</code> может включать значения прозрачности Альфа-канала (<a class="external" href="https://en.wikipedia.org/wiki/Alpha_compositing">alpha-channel</a>), уыказывающие, как цвет <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">сочетается</a> с его фоном.</p>
+
+<p>В <code>&lt;color&gt;</code> может быть определена любым из следующих способов can.</p>
+
+<ul>
+ <li>Использование или подключенного свойства веденного в параметр (например, <code>blue</code> или <code>transparent</code>)</li>
+ <li>Использование <a href="https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">кубической системы координат RGB</a> (via the #-hexadecimal or the <code>rgb()</code> and <code>rgba()</code> functional notations)<img alt="Цветовая модель представлена виде куба" src="https://en.wikipedia.org/wiki/RGB_color_model#/media/File:RGB_color_solid_cube.png" style="height: 200px; width: 200px;"></li>
+ <li>Использование <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">цилиндрической системы координат HSL</a> (через фунциональные обозначения <code>hsl()</code> и <code>hsla()</code>) </li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка: </strong>В этой статье подробно описывается тип данных &lt;color&gt;. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к <a href="/en-US/docs/Web/HTML/Applying_color">элементам HTML с пмощью CSS</a>.</p>
+</div>
+
+<h2 id="Cинтаксис">Cинтаксис </h2>
+
+<p>Для типа данных задается <code>&lt;color&gt;</code>  с помощью одного из следующих параметров.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> значения <code>&lt;color&gt;</code> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устроству. Это связоно с тем что большенство устройст не откалеброваны, а некторые браузеры не поддерживают цветовые профили <a href="https://en.wikipedia.org/wiki/ICC_profile">устройств вывода</a>.</p>
+</div>
+
+<h3 id="Ключевые_цвета">Ключевые цвета</h3>
+
+<p>Ключевые слова для цвета - это идентификаторы без учета регистра, представляющие определенный цвет, например <code>red</code>, <code>blue</code>, <code>black</code> или <code>lightseagreen</code>. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. </p>
+
+<p>Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML">HTML</a> распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определенный алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и <a href="/en-US/docs/Web/SVG">SVG</a>.</li>
+ <li>В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.</li>
+ <li>Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.</li>
+ <li>Несколько ключевых слов являются псевдонимами друг для друга:
+  <ul>
+   <li><code>aqua</code> / <code>cyan</code></li>
+   <li><code>fuchsia</code> / <code>magenta</code></li>
+   <li><code>darkgray</code> / <code>darkgrey</code></li>
+   <li><code>darkslategray</code> / <code>darkslategrey</code></li>
+   <li><code>dimgray</code> / <code>dimgrey</code></li>
+   <li><code>lightgray</code> / <code>lightgrey</code></li>
+   <li><code>lightslategray</code> / <code>lightslategrey</code></li>
+   <li><code>gray</code> / <code>grey</code></li>
+   <li><code>slategray</code> / <code>slategrey</code></li>
+  </ul>
+ </li>
+ <li>Хотя многие ключевые слова были адаптированы из <a href="https://en.wikipedia.org/wiki/X_Window_System">X11</a>, их значения RGB могут отличаться от соответствующего цвета в системах X11, поскольку производители иногда адаптируют цвета X11 к своему конкретному оборудованию.</li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка:</strong> Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:</p>
+
+<ul>
+ <li>CSS Level 1 включал только 16 основных цветов, называемых цветами <a href="https://en.wikipedia.org/wiki/VGA">VGA</a>, поскольку они были взяты из набора отображаемых цветов на видеокартах VGA</li>
+ <li>CSS Level 2 добавил ключевое слово <code>orange</code>.</li>
+ <li>Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми <em>ключевыми</em> словами, <em>цветами X11</em> или цветами SVG.</li>
+ <li>CSS Colors Level 4 добавил ключевое слово rebeccapurple, <a href="https://codepen.io/trezy/post/honoring-a-great-man">чтобы почтить пионера веб-Эрика Мейера.</a></li>
+</ul>
+</div>
+
+<table id="colors_table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Эквивалент RGB</th>
+   <th scope="col">Ключевое слово</th>
+   <th scope="col">RGB hex значение</th>
+   <th scope="col">Видео сайта</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="position: relative;">
+   <td rowspan="16">{{SpecName("CSS1")}}</td>
+   <td style="background: #000;"></td>
+   <td style="text-align: center;"><code>black</code></td>
+   <td><code>#000000</code></td>
+   <td style="background: black;"></td>
+  </tr>
+  <tr>
+   <td style="background: #C0C0C0;"></td>
+   <td style="text-align: center;"><code>silver</code></td>
+   <td><code>#c0c0c0</code></td>
+   <td style="background: silver;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"></td>
+   <td style="text-align: center;"><code>gray</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: gray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #FFF;"></td>
+   <td style="text-align: center;"><code>white</code></td>
+   <td><code>#ffffff</code></td>
+   <td style="background: white;"></td>
+  </tr>
+  <tr>
+   <td style="background: #800000;"></td>
+   <td style="text-align: center;"><code>maroon</code></td>
+   <td><code>#800000</code></td>
+   <td style="background: maroon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #F00;"></td>
+   <td style="text-align: center;"><code>red</code></td>
+   <td><code>#ff0000</code></td>
+   <td style="background: red;"></td>
+  </tr>
+  <tr>
+   <td style="background: #800080;"></td>
+   <td style="text-align: center;"><code>purple</code></td>
+   <td><code>#800080</code></td>
+   <td style="background: purple;"></td>
+  </tr>
+  <tr>
+   <td style="background: #F0F;"></td>
+   <td style="text-align: center;"><code>fuchsia</code></td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: fuchsia;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008000;"></td>
+   <td style="text-align: center;"><code>green</code></td>
+   <td><code>#008000</code></td>
+   <td style="background: green;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0F0;"></td>
+   <td style="text-align: center;"><code>lime</code></td>
+   <td><code>#00ff00</code></td>
+   <td style="background: lime;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808000;"></td>
+   <td style="text-align: center;"><code>olive</code></td>
+   <td><code>#808000</code></td>
+   <td style="background: olive;"></td>
+  </tr>
+  <tr>
+   <td style="background: #FF0;"></td>
+   <td style="text-align: center;"><code>yellow</code></td>
+   <td><code>#ffff00</code></td>
+   <td style="background: yellow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #000080;"></td>
+   <td style="text-align: center;"><code>navy</code></td>
+   <td><code>#000080</code></td>
+   <td style="background: navy;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00F;"></td>
+   <td style="text-align: center;"><code>blue</code></td>
+   <td><code>#0000ff</code></td>
+   <td style="background: blue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008080;"></td>
+   <td style="text-align: center;"><code>teal</code></td>
+   <td><code>#008080</code></td>
+   <td style="background: teal;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0FF;"></td>
+   <td style="text-align: center;"><code>aqua</code></td>
+   <td><code>#00ffff</code></td>
+   <td style="background: aqua;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td style="background: #FFA500;"></td>
+   <td style="text-align: center;"><code>orange</code></td>
+   <td><code>#ffa500</code></td>
+   <td style="background: orange;"></td>
+  </tr>
+  <tr>
+   <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
+   <td style="background: #f0f8ff;"></td>
+   <td style="text-align: center;"><code>aliceblue</code></td>
+   <td><code>#f0f8ff</code></td>
+   <td style="background: aliceblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #faebd7;"></td>
+   <td style="text-align: center;"><code>antiquewhite</code></td>
+   <td><code>#faebd7</code></td>
+   <td style="background: antiquewhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7fffd4;"></td>
+   <td style="text-align: center;"><code>aquamarine</code></td>
+   <td><code>#7fffd4</code></td>
+   <td style="background: aquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0ffff;"></td>
+   <td style="text-align: center;"><code>azure</code></td>
+   <td><code>#f0ffff</code></td>
+   <td style="background: azure;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5dc;"></td>
+   <td style="text-align: center;"><code>beige</code></td>
+   <td><code>#f5f5dc</code></td>
+   <td style="background: beige;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4c4;"></td>
+   <td style="text-align: center;"><code>bisque</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: bisque;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffebcd;"></td>
+   <td style="text-align: center;"><code>blanchedalmond</code></td>
+   <td><code>#ffebcd</code></td>
+   <td style="background: blanchedalmond;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8a2be2;"></td>
+   <td style="text-align: center;"><code>blueviolet</code></td>
+   <td><code>#8a2be2</code></td>
+   <td style="background: blueviolet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a52a2a;"></td>
+   <td style="text-align: center;"><code>brown</code></td>
+   <td><code>#a52a2a</code></td>
+   <td style="background: brown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #deb887;"></td>
+   <td style="text-align: center;"><code>burlywood</code></td>
+   <td><code>#deb887</code></td>
+   <td style="background: burlywood;"></td>
+  </tr>
+  <tr>
+   <td style="background: #5f9ea0;"></td>
+   <td style="text-align: center;"><code>cadetblue</code></td>
+   <td><code>#5f9ea0</code></td>
+   <td style="background: cadetblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7fff00;"></td>
+   <td style="text-align: center;"><code>chartreuse</code></td>
+   <td><code>#7fff00</code></td>
+   <td style="background: chartreuse;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d2691e;"></td>
+   <td style="text-align: center;"><code>chocolate</code></td>
+   <td><code>#d2691e</code></td>
+   <td style="background: chocolate;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff7f50;"></td>
+   <td style="text-align: center;"><code>coral</code></td>
+   <td><code>#ff7f50</code></td>
+   <td style="background: coral;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6495ed;"></td>
+   <td style="text-align: center;"><code>cornflowerblue</code></td>
+   <td><code>#6495ed</code></td>
+   <td style="background: cornflowerblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff8dc;"></td>
+   <td style="text-align: center;"><code>cornsilk</code></td>
+   <td><code>#fff8dc</code></td>
+   <td style="background: cornsilk;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dc143c;"></td>
+   <td style="text-align: center;"><code>crimson</code></td>
+   <td><code>#dc143c</code></td>
+   <td style="background: crimson;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0ff;"></td>
+   <td style="text-align: center;"><code>cyan</code><br>
+    (synonym of <code>aqua</code>)</td>
+   <td><code>#00ffff</code></td>
+   <td style="background: cyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00008b;"></td>
+   <td style="text-align: center;"><code>darkblue</code></td>
+   <td><code>#00008b</code></td>
+   <td style="background: darkblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008b8b;"></td>
+   <td style="text-align: center;"><code>darkcyan</code></td>
+   <td><code>#008b8b</code></td>
+   <td style="background: darkcyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b8860b;"></td>
+   <td style="text-align: center;"><code>darkgoldenrod</code></td>
+   <td><code>#b8860b</code></td>
+   <td style="background: darkgoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"></td>
+   <td style="text-align: center;"><code>darkgray</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #006400;"></td>
+   <td style="text-align: center;"><code>darkgreen</code></td>
+   <td><code>#006400</code></td>
+   <td style="background: darkgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"></td>
+   <td style="text-align: center;"><code>darkgrey</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #bdb76b;"></td>
+   <td style="text-align: center;"><code>darkkhaki</code></td>
+   <td><code>#bdb76b</code></td>
+   <td style="background: darkkhaki;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b008b;"></td>
+   <td style="text-align: center;"><code>darkmagenta</code></td>
+   <td><code>#8b008b</code></td>
+   <td style="background: darkmagenta;"></td>
+  </tr>
+  <tr>
+   <td style="background: #556b2f;"></td>
+   <td style="text-align: center;"><code>darkolivegreen</code></td>
+   <td><code>#556b2f</code></td>
+   <td style="background: darkolivegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff8c00;"></td>
+   <td style="text-align: center;"><code>darkorange</code></td>
+   <td><code>#ff8c00</code></td>
+   <td style="background: darkorange;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9932cc;"></td>
+   <td style="text-align: center;"><code>darkorchid</code></td>
+   <td><code>#9932cc</code></td>
+   <td style="background: darkorchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b0000;"></td>
+   <td style="text-align: center;"><code>darkred</code></td>
+   <td><code>#8b0000</code></td>
+   <td style="background: darkred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e9967a;"></td>
+   <td style="text-align: center;"><code>darksalmon</code></td>
+   <td><code>#e9967a</code></td>
+   <td style="background: darksalmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8fbc8f;"></td>
+   <td style="text-align: center;"><code>darkseagreen</code></td>
+   <td><code>#8fbc8f</code></td>
+   <td style="background: darkseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #483d8b;"></td>
+   <td style="text-align: center;"><code>darkslateblue</code></td>
+   <td><code>#483d8b</code></td>
+   <td style="background: darkslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"></td>
+   <td style="text-align: center;"><code>darkslategray</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"></td>
+   <td style="text-align: center;"><code>darkslategrey</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00ced1;"></td>
+   <td style="text-align: center;"><code>darkturquoise</code></td>
+   <td><code>#00ced1</code></td>
+   <td style="background: darkturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9400d3;"></td>
+   <td style="text-align: center;"><code>darkviolet</code></td>
+   <td><code>#9400d3</code></td>
+   <td style="background: darkviolet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff1493;"></td>
+   <td style="text-align: center;"><code>deeppink</code></td>
+   <td><code>#ff1493</code></td>
+   <td style="background: deeppink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00bfff;"></td>
+   <td style="text-align: center;"><code>deepskyblue</code></td>
+   <td><code>#00bfff</code></td>
+   <td style="background: deepskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"></td>
+   <td style="text-align: center;"><code>dimgray</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"></td>
+   <td style="text-align: center;"><code>dimgrey</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #1e90ff;"></td>
+   <td style="text-align: center;"><code>dodgerblue</code></td>
+   <td><code>#1e90ff</code></td>
+   <td style="background: dodgerblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b22222;"></td>
+   <td style="text-align: center;"><code>firebrick</code></td>
+   <td><code>#b22222</code></td>
+   <td style="background: firebrick;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffaf0;"></td>
+   <td style="text-align: center;"><code>floralwhite</code></td>
+   <td><code>#fffaf0</code></td>
+   <td style="background: floralwhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #228b22;"></td>
+   <td style="text-align: center;"><code>forestgreen</code></td>
+   <td><code>#228b22</code></td>
+   <td style="background: forestgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dcdcdc;"></td>
+   <td style="text-align: center;"><code>gainsboro</code></td>
+   <td><code>#dcdcdc</code></td>
+   <td style="background: gainsboro;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f8f8ff;"></td>
+   <td style="text-align: center;"><code>ghostwhite</code></td>
+   <td><code>#f8f8ff</code></td>
+   <td style="background: ghostwhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffd700;"></td>
+   <td style="text-align: center;"><code>gold</code></td>
+   <td><code>#ffd700</code></td>
+   <td style="background: gold;"></td>
+  </tr>
+  <tr>
+   <td style="background: #daa520;"></td>
+   <td style="text-align: center;"><code>goldenrod</code></td>
+   <td><code>#daa520</code></td>
+   <td style="background: goldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #adff2f;"></td>
+   <td style="text-align: center;"><code>greenyellow</code></td>
+   <td><code>#adff2f</code></td>
+   <td style="background: greenyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"></td>
+   <td style="text-align: center;"><code>grey</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: grey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0fff0;"></td>
+   <td style="text-align: center;"><code>honeydew</code></td>
+   <td><code>#f0fff0</code></td>
+   <td style="background: honeydew;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff69b4;"></td>
+   <td style="text-align: center;"><code>hotpink</code></td>
+   <td><code>#ff69b4</code></td>
+   <td style="background: hotpink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #cd5c5c;"></td>
+   <td style="text-align: center;"><code>indianred</code></td>
+   <td><code>#cd5c5c</code></td>
+   <td style="background: indianred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4b0082;"></td>
+   <td style="text-align: center;"><code>indigo</code></td>
+   <td><code>#4b0082</code></td>
+   <td style="background: indigo;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffff0;"></td>
+   <td style="text-align: center;"><code>ivory</code></td>
+   <td><code>#fffff0</code></td>
+   <td style="background: ivory;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0e68c;"></td>
+   <td style="text-align: center;"><code>khaki</code></td>
+   <td><code>#f0e68c</code></td>
+   <td style="background: khaki;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e6e6fa;"></td>
+   <td style="text-align: center;"><code>lavender</code></td>
+   <td><code>#e6e6fa</code></td>
+   <td style="background: lavender;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff0f5;"></td>
+   <td style="text-align: center;"><code>lavenderblush</code></td>
+   <td><code>#fff0f5</code></td>
+   <td style="background: lavenderblush ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7cfc00;"></td>
+   <td style="text-align: center;"><code>lawngreen</code></td>
+   <td><code>#7cfc00</code></td>
+   <td style="background: lawngreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffacd;"></td>
+   <td style="text-align: center;"><code>lemonchiffon</code></td>
+   <td><code>#fffacd</code></td>
+   <td style="background: lemonchiffon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #add8e6;"></td>
+   <td style="text-align: center;"><code>lightblue</code></td>
+   <td><code>#add8e6</code></td>
+   <td style="background: lightblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f08080;"></td>
+   <td style="text-align: center;"><code>lightcoral</code></td>
+   <td><code>#f08080</code></td>
+   <td style="background: lightcoral;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e0ffff;"></td>
+   <td style="text-align: center;"><code>lightcyan</code></td>
+   <td><code>#e0ffff</code></td>
+   <td style="background: lightcyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fafad2;"></td>
+   <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
+   <td><code>#fafad2</code></td>
+   <td style="background: lightgoldenrodyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"></td>
+   <td style="text-align: center;"><code>lightgray</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #90ee90;"></td>
+   <td style="text-align: center;"><code>lightgreen</code></td>
+   <td><code>#90ee90</code></td>
+   <td style="background: lightgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"></td>
+   <td style="text-align: center;"><code>lightgrey</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffb6c1;"></td>
+   <td style="text-align: center;"><code>lightpink</code></td>
+   <td><code>#ffb6c1</code></td>
+   <td style="background: lightpink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffa07a;"></td>
+   <td style="text-align: center;"><code>lightsalmon</code></td>
+   <td><code>#ffa07a</code></td>
+   <td style="background: lightsalmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #20b2aa;"></td>
+   <td style="text-align: center;"><code>lightseagreen</code></td>
+   <td><code>#20b2aa</code></td>
+   <td style="background: lightseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #87cefa;"></td>
+   <td style="text-align: center;"><code>lightskyblue</code></td>
+   <td><code>#87cefa</code></td>
+   <td style="background: lightskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"></td>
+   <td style="text-align: center;"><code>lightslategray</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"></td>
+   <td style="text-align: center;"><code>lightslategrey</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b0c4de;"></td>
+   <td style="text-align: center;"><code>lightsteelblue</code></td>
+   <td><code>#b0c4de</code></td>
+   <td style="background: lightsteelblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffffe0;"></td>
+   <td style="text-align: center;"><code>lightyellow</code></td>
+   <td><code>#ffffe0</code></td>
+   <td style="background: lightyellow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #32cd32;"></td>
+   <td style="text-align: center;"><code>limegreen</code></td>
+   <td><code>#32cd32</code></td>
+   <td style="background: limegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #faf0e6;"></td>
+   <td style="text-align: center;"><code>linen</code></td>
+   <td><code>#faf0e6</code></td>
+   <td style="background: linen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff00ff;"></td>
+   <td style="text-align: center;"><code>magenta</code><br>
+    (synonym of <code>fuchsia</code>)</td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: magenta;"></td>
+  </tr>
+  <tr>
+   <td style="background: #66cdaa;"></td>
+   <td style="text-align: center;"><code>mediumaquamarine</code></td>
+   <td><code>#66cdaa</code></td>
+   <td style="background: mediumaquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0000cd;"></td>
+   <td style="text-align: center;"><code>mediumblue</code></td>
+   <td><code>#0000cd</code></td>
+   <td style="background: mediumblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ba55d3;"></td>
+   <td style="text-align: center;"><code>mediumorchid</code></td>
+   <td><code>#ba55d3</code></td>
+   <td style="background: mediumorchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9370db;"></td>
+   <td style="text-align: center;"><code>mediumpurple</code></td>
+   <td><code>#9370db</code></td>
+   <td style="background: mediumpurple;"></td>
+  </tr>
+  <tr>
+   <td style="background: #3cb371;"></td>
+   <td style="text-align: center;"><code>mediumseagreen</code></td>
+   <td><code>#3cb371</code></td>
+   <td style="background: mediumseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7b68ee;"></td>
+   <td style="text-align: center;"><code>mediumslateblue</code></td>
+   <td><code>#7b68ee</code></td>
+   <td style="background: mediumslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00fa9a;"></td>
+   <td style="text-align: center;"><code>mediumspringgreen</code></td>
+   <td><code>#00fa9a</code></td>
+   <td style="background: mediumspringgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #48d1cc;"></td>
+   <td style="text-align: center;"><code>mediumturquoise</code></td>
+   <td><code>#48d1cc</code></td>
+   <td style="background: mediumturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #c71585;"></td>
+   <td style="text-align: center;"><code>mediumvioletred</code></td>
+   <td><code>#c71585</code></td>
+   <td style="background: mediumvioletred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #191970;"></td>
+   <td style="text-align: center;"><code>midnightblue</code></td>
+   <td><code>#191970</code></td>
+   <td style="background: midnightblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5fffa;"></td>
+   <td style="text-align: center;"><code>mintcream</code></td>
+   <td><code>#f5fffa</code></td>
+   <td style="background: mintcream;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4e1;"></td>
+   <td style="text-align: center;"><code>mistyrose</code></td>
+   <td><code>#ffe4e1</code></td>
+   <td style="background: mistyrose;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4b5;"></td>
+   <td style="text-align: center;"><code>moccasin</code></td>
+   <td><code>#ffe4b5</code></td>
+   <td style="background: moccasin;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffdead;"></td>
+   <td style="text-align: center;"><code>navajowhite</code></td>
+   <td><code>#ffdead</code></td>
+   <td style="background: navajowhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fdf5e6;"></td>
+   <td style="text-align: center;"><code>oldlace</code></td>
+   <td><code>#fdf5e6</code></td>
+   <td style="background: oldlace;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6b8e23;"></td>
+   <td style="text-align: center;"><code>olivedrab</code></td>
+   <td><code>#6b8e23</code></td>
+   <td style="background: olivedrab;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff4500;"></td>
+   <td style="text-align: center;"><code>orangered</code></td>
+   <td><code>#ff4500</code></td>
+   <td style="background: orangered;"></td>
+  </tr>
+  <tr>
+   <td style="background: #da70d6;"></td>
+   <td style="text-align: center;"><code>orchid</code></td>
+   <td><code>#da70d6</code></td>
+   <td style="background: orchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #eee8aa;"></td>
+   <td style="text-align: center;"><code>palegoldenrod</code></td>
+   <td><code>#eee8aa</code></td>
+   <td style="background: palegoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #98fb98;"></td>
+   <td style="text-align: center;"><code>palegreen</code></td>
+   <td><code>#98fb98</code></td>
+   <td style="background: palegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #afeeee;"></td>
+   <td style="text-align: center;"><code>paleturquoise</code></td>
+   <td><code>#afeeee</code></td>
+   <td style="background: paleturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #db7093;"></td>
+   <td style="text-align: center;"><code>palevioletred</code></td>
+   <td><code>#db7093</code></td>
+   <td style="background: palevioletred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffefd5;"></td>
+   <td style="text-align: center;"><code>papayawhip</code></td>
+   <td><code>#ffefd5</code></td>
+   <td style="background: papayawhip;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffdab9;"></td>
+   <td style="text-align: center;"><code>peachpuff</code></td>
+   <td><code>#ffdab9</code></td>
+   <td style="background: peachpuff;"></td>
+  </tr>
+  <tr>
+   <td style="background: #cd853f;"></td>
+   <td style="text-align: center;"><code>peru</code></td>
+   <td><code>#cd853f</code></td>
+   <td style="background: peru;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffc0cb;"></td>
+   <td style="text-align: center;"><code>pink</code></td>
+   <td><code>#ffc0cb</code></td>
+   <td style="background: pink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dda0dd;"></td>
+   <td style="text-align: center;"><code>plum</code></td>
+   <td><code>#dda0dd</code></td>
+   <td style="background: plum;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b0e0e6;"></td>
+   <td style="text-align: center;"><code>powderblue</code></td>
+   <td><code>#b0e0e6</code></td>
+   <td style="background: powderblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #bc8f8f;"></td>
+   <td style="text-align: center;"><code>rosybrown</code></td>
+   <td><code>#bc8f8f</code></td>
+   <td style="background: rosybrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4169e1;"></td>
+   <td style="text-align: center;"><code>royalblue</code></td>
+   <td><code>#4169e1</code></td>
+   <td style="background: royalblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b4513;"></td>
+   <td style="text-align: center;"><code>saddlebrown</code></td>
+   <td><code>#8b4513</code></td>
+   <td style="background: saddlebrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fa8072;"></td>
+   <td style="text-align: center;"><code>salmon</code></td>
+   <td><code>#fa8072</code></td>
+   <td style="background: salmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f4a460;"></td>
+   <td style="text-align: center;"><code>sandybrown</code></td>
+   <td><code>#f4a460</code></td>
+   <td style="background: sandybrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2e8b57;"></td>
+   <td style="text-align: center;"><code>seagreen</code></td>
+   <td><code>#2e8b57</code></td>
+   <td style="background: seagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff5ee;"></td>
+   <td style="text-align: center;"><code>seashell</code></td>
+   <td><code>#fff5ee</code></td>
+   <td style="background: seashell;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a0522d;"></td>
+   <td style="text-align: center;"><code>sienna</code></td>
+   <td><code>#a0522d</code></td>
+   <td style="background: sienna;"></td>
+  </tr>
+  <tr>
+   <td style="background: #87ceeb;"></td>
+   <td style="text-align: center;"><code>skyblue</code></td>
+   <td><code>#87ceeb</code></td>
+   <td style="background: skyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6a5acd;"></td>
+   <td style="text-align: center;"><code>slateblue</code></td>
+   <td><code>#6a5acd</code></td>
+   <td style="background: slateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"></td>
+   <td style="text-align: center;"><code>slategray</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"></td>
+   <td style="text-align: center;"><code>slategrey</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffafa;"></td>
+   <td style="text-align: center;"><code>snow</code></td>
+   <td><code>#fffafa</code></td>
+   <td style="background: snow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00ff7f;"></td>
+   <td style="text-align: center;"><code>springgreen</code></td>
+   <td><code>#00ff7f</code></td>
+   <td style="background: springgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4682b4;"></td>
+   <td style="text-align: center;"><code>steelblue</code></td>
+   <td><code>#4682b4</code></td>
+   <td style="background: steelblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d2b48c;"></td>
+   <td style="text-align: center;"><code>tan</code></td>
+   <td><code>#d2b48c</code></td>
+   <td style="background: tan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d8bfd8;"></td>
+   <td style="text-align: center;"><code>thistle</code></td>
+   <td><code>#d8bfd8</code></td>
+   <td style="background: thistle;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff6347;"></td>
+   <td style="text-align: center;"><code>tomato</code></td>
+   <td><code>#ff6347</code></td>
+   <td style="background: tomato;"></td>
+  </tr>
+  <tr>
+   <td style="background: #40e0d0;"></td>
+   <td style="text-align: center;"><code>turquoise</code></td>
+   <td><code>#40e0d0</code></td>
+   <td style="background: turquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ee82ee;"></td>
+   <td style="text-align: center;"><code>violet</code></td>
+   <td><code>#ee82ee</code></td>
+   <td style="background: violet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5deb3;"></td>
+   <td style="text-align: center;"><code>wheat</code></td>
+   <td><code>#f5deb3</code></td>
+   <td style="background: wheat;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5f5;"></td>
+   <td style="text-align: center;"><code>whitesmoke</code></td>
+   <td><code>#f5f5f5</code></td>
+   <td style="background: whitesmoke;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9acd32;"></td>
+   <td style="text-align: center;"><code>yellowgreen</code></td>
+   <td><code>#9acd32</code></td>
+   <td style="background: yellowgreen;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td style="background: #639;"></td>
+   <td style="text-align: center;"><a href="https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life"><code>rebeccapurple</code></a></td>
+   <td><code>#663399</code></td>
+   <td style="background: rebeccapurple;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Прозрачное_ключевое_слово"><code><a name="transparent">Прозрачное</a></code> ключевое слово</h3>
+
+<p>Ключевое слово <code>transparent</code> представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически <code>transparent </code>- это ярлык для <code>rgba (0,0,0,0)</code>.</p>
+
+<div class="note">
+<p><strong>Примечание по совместимости:</strong> чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что <code>transparent</code> должен быть вычислен в <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">Альфа-предварительно умноженном цветовом пространстве</a>. Однако имейте в виду, что старые браузеры могут рассматривать его как черный с Альфа-значением <code>0</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Историческая запись:</strong> <code>transparent</code> не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <code>&lt;color&gt;</code> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, <code>transparent </code>был переопределен как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <code>&lt;color&gt;</code>.</p>
+</div>
+
+<h3 id="currentColor_ключевое_слово"><code><a id="currentColor" name="currentColor">currentColor</a></code> ключевое слово</h3>
+
+<p>Ключевое слово <code>currentColor</code> представляет значение свойства элемента {{Cssxref("color")}}. Это позволяет использовать значение <code>color</code> для свойств, которые не получают его по умолчанию.</p>
+
+<p>Если текущий цвет используется в качестве значения свойства <code>color</code> , он вместо этого принимает его значение из наследуемого значения свойства <code>color</code>.</p>
+
+<h4 id="currentColor_пример">currentColor пример</h4>
+
+<pre class="brush: html notranslate">&lt;div style="color:blue; border: 1px dashed currentColor;"&gt;
+  Цвет текста-синий.
+  &lt;div style="background:currentColor; height:9px;"&gt;&lt;/div&gt;
+  This block is surrounded by a blue border.
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample("currentColor_example")}}</p>
+
+<h3 id="RGB_цвет">RGB цвет</h3>
+
+<p>Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелеными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.</p>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<p>Цвета RGB могут быть выражены как шестнадцатеричными (с префиксом #), так и функциональными (<code>rgb ()</code>, <code>rgba ()</code>) нотациями.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> начиная с уровня цветов CSS 4,<code> rgba()</code> является псевдонимом для <code>rgb()</code>. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.</p>
+</div>
+
+<dl>
+ <dt>Шестнадцатеричное представление: <code>#RRGGBB[AA]</code></dt>
+ <dd><code>R</code> (red), <code>G</code> (green), <code>B</code> (blue), and <code>A</code> (alpha) are hexadecimal characters (0-9, A-F). <code>A</code> is optional. For example, <code>#ff0000</code> is equivalent to <code>#ff0000ff</code>. <code>R</code> (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, <code>#ff0000</code> эквивалентно<code> #ff0000ff</code>.</dd>
+ <dt>Шестнадцатеричное представление: <code>#RGB[A]</code></dt>
+ <dd><code>R</code> (красный), <code>G</code> (зеленый), <code>B</code> (синий) и <code>A</code> (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трехзначная нотация (<code>#RGB</code>) является более короткой версией шестизначной формы (<code>#RRGGBB</code>). Например, <code>#f09</code> имеет тот же цвет, что и <code>#ff0099</code>. Кроме того, четырехзначная нотация RGB (<code>#RGB</code>) является более короткой версией восьмизначной формы (<code>#RRGGBBAA</code>). Например, #0f38 имеет тот же цвет, что и <code>#00ff3388</code>.</dd>
+ <dt>Функциональная нотация: <code>rgb(R, G, B[, A])</code> или <code>rgba(R, G, B, A)</code></dt>
+ <dd><code>R</code> (красный), <code>G </code>(зеленый) и <code>B</code> (синий) могут быть либо {{cssxref("&lt;number&gt;")}}s, либо {{cssxref("&lt;percentage&gt;")}}s, где число <code>255 </code>соответствует <code>100%</code>. А (Альфа) может быть {{cssxref("&lt;number&gt;")}} между <code>0</code> и <code>1</code> или {{cssxref("&lt;percentage&gt;")}}, где число 1 соответствует <code>100%</code> (полная непрозрачность).</dd>
+ <dt>Функциональная нотация: <code>rgb(R G B[ A])</code> or <code>rgba(R G B A)</code></dt>
+ <dd>CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.</dd>
+</dl>
+
+<h4 id="Пример">Пример</h4>
+
+<h5 id="RGB_варианты_синтаксиса">RGB варианты синтаксиса</h5>
+
+<p>В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.</p>
+
+<pre class="notranslate">/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */
+
+/* Шестнадцатеричный синтаксис */
+#f09
+#F09
+#ff0099
+#FF0099
+
+/* Функциональный синтаксис */
+rgb(255,0,153)
+rgb(255, 0, 153)
+rgb(255, 0, 153.0)
+rgb(100%,0%,60%)
+rgb(100%, 0%, 60%)
+rgb(100%, 0, 60%) /* Ошибка! Не смешивайте цифры и проценты. */
+rgb(255 0 153)
+
+/* Шестнадцатеричный синтаксис с Альфа-значением */
+#f09f
+#F09F
+#ff0099ff
+#FF0099FF
+
+/* Функциональный синтаксис с Альфа-значением */
+rgb(255, 0, 153, 1)
+rgb(255, 0, 153, 100%)
+
+/* Синтаксис пробелов */
+rgb(255 0 153 / 1)
+rgb(255 0 153 / 100%)
+
+/* Функциональный синтаксис со значением floats */
+rgb(255, 0, 153.6, 1)
+rgb(1e2, .5e1, .5e0, +.25e2%)
+</pre>
+
+<h5 id="RGB_вариации_прозрачности">RGB вариации прозрачности</h5>
+
+<pre class="notranslate">/* Шестнадцатеричный синтаксис */
+#3a30                   <span style="background: #3a30;"> /*   0% непрозрачный зеленый цвет */ </span>
+#3A3F                   <span style="background: #3A3F;"> /* полный непрозрачный зеленый цвет */ </span>
+#33aa3300               <span style="background: #33aa3300;"> /*   0% непрозрачный зеленый цвет */ </span>
+#33AA3380               <span style="background: #33AA3380;"> /* 50% непрозрачный зеленый цвет */ </span>
+
+/* Функциональный синтаксис */
+rgba(51, 170, 51, .1)   <span style="background: rgba(51, 170, 51, .1);"> /* непрозрачный зеленый цвет на 10%  */ </span>
+rgba(51, 170, 51, .4)   <span style="background: rgba(51, 170, 51, .4);"> /* непрозрачный зеленый цвет на */ </span>
+rgba(51, 170, 51, .7)   <span style="background: rgba(51, 170, 51, .7);"> /* непрозрачный зеленый цвет на 70% */ </span>
+rgba(51, 170, 51,  1)   <span style="background: rgba(51, 170, 51,  1);"> /* полный непрозрачный зеленый цвет  */ </span>
+
+/* Синтаксис пробелов */
+rgba(51 170 51 / 0.4)   <span> /* непрозрачный зеленый цвет  на 40%*/ </span>
+rgba(51 170 51 / 40%)   <span> /* непрозрачный зеленый цвет на 40% */
+
+</span>/* Функциональный синтаксис со значением floats */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+</pre>
+
+<h3 id="Цвет_HSL">Цвет HSL </h3>
+
+<p>Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.</p>
+
+<p>Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и легкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).</p>
+
+<h4 id="Синтаксис_2">Синтаксис</h4>
+
+<p>Цвета HSL выражаются через функциональные обозначения <code>hsl()</code> и <code>hsla()</code>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>:  Начиная с уровня цветов CSS 4, <code>hsla()</code> является псевдонимом для <code>hsl()</code>. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.</p>
+</div>
+
+<dl>
+ <dt>Функциональная нотация: <code>hsl(H, S, L[, A])</code> или<code>hsla(H, S, L, A)</code></dt>
+ <dd><code>H</code>  (hue) - это {{cssxref("&lt;угол&gt;")}} цветового круга, заданного в <code>deg</code>S, <code>rad</code>s, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("&lt;number&gt;")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=<code>0</code> deg=<code>360</code> град, с другими цветами, распространенными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве &lt; угла &gt; он неявно обертывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.</dd>
+ <dd><code>S</code> (<code>насыщенность</code>) и <code>L</code> (<code>легкость</code>) являются процентами. <code>100%</code> насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). <code>100%</code> легкость белый, <code>0%</code> легкость черный, и <code>50%</code> легкость “<code>нормально</code>.”</dd>
+ <dd><code>A</code> (alpha) can be a {{cssxref("&lt;number&gt;")}} between <code>0</code> and <code>1</code>, or a {{cssxref("&lt;percentage&gt;")}}, where the number <code>1</code> corresponds to <code>100%</code> (full opacity). <code>A</code> (Альфа) может быть {{cssxref("&lt;number&gt;")}} между <code>0</code> и <code>1</code> или {{cssxref("&lt;percentage&gt;")}}, где число <code>1</code> соответствует <code>100%</code> (полная непрозрачность).</dd>
+</dl>
+
+<dl>
+ <dt>Функциональная нотация: <code>hsl(H S L[ A])</code> or <code>hsla(H S L A)</code></dt>
+ <dd>CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.</dd>
+</dl>
+
+<h4 id="Examples">Examples</h4>
+
+<h5 id="HSL_варианты_синтаксиса">HSL варианты синтаксиса</h5>
+
+<pre style="">/* Все эти примеры указывают один и тот же цвет: лаванда. */
+hsl(270,60%,70%)
+hsl(270, 60%, 70%)
+hsl(270 60% 70%)
+hsl(270deg, 60%, 70%)
+hsl(4.71239rad, 60%, 70%)
+hsl(.75turn, 60%, 70%)
+
+/* Все эти примеры указывают один и тот же цвет: лаванда, которая на 15% непрозрачна. */
+hsl(270, 60%, 50%, .15)
+hsl(270, 60%, 50%, 15%)
+hsl(270 60% 50% / .15)
+hsl(270 60% 50% / 15%)
+</pre>
+
+<h5 id="Полностью_насыщенные_цвета">Полностью насыщенные цвета</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Нотация</th>
+   <th scope="col">Описание:</th>
+   <th scope="col">Итог</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(0, 100%, 50%)</code></td>
+   <td>red</td>
+   <td style="background: hsl(0,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(30, 100%, 50%)</code></td>
+   <td>orange</td>
+   <td style="background: hsl(30,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(60, 100%, 50%)</code></td>
+   <td>yellow</td>
+   <td style="background: hsl(60,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(90, 100%, 50%)</code></td>
+   <td>lime green</td>
+   <td style="background: hsl(90,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 50%)</code></td>
+   <td>green</td>
+   <td style="background: hsl(120,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(150, 100%, 50%)</code></td>
+   <td>blue-green</td>
+   <td style="background: hsl(150,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(180, 100%, 50%)</code></td>
+   <td>cyan</td>
+   <td style="background: hsl(180,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(210, 100%, 50%)</code></td>
+   <td>sky blue</td>
+   <td style="background: hsl(210,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(240, 100%, 50%)</code></td>
+   <td>blue</td>
+   <td style="background: hsl(240,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(270, 100%, 50%)</code></td>
+   <td>purple</td>
+   <td style="background: hsl(270,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(300, 100%, 50%)</code></td>
+   <td>magenta</td>
+   <td style="background: hsl(300,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(330, 100%, 50%)</code></td>
+   <td>pink</td>
+   <td style="background: hsl(330,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(360, 100%, 50%)</code></td>
+   <td>red</td>
+   <td style="background: hsl(360,100%,50%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Более_светлая_и_более_темная_зелень">Более светлая и более темная зелень</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Нотация</th>
+   <th scope="col">Описание:</th>
+   <th scope="col">Итог</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(120, 100%, 0%)</code></td>
+   <td>black</td>
+   <td style="background: hsl(120,100%,0%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 20%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,20%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 40%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,40%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 60%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,60%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 80%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,80%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 100%)</code></td>
+   <td>white</td>
+   <td style="background: hsl(120,100%,100%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Насыщенная_и_ненасыщенная_зелень">Насыщенная и ненасыщенная зелень</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Нотация</th>
+   <th scope="col">Описание:</th>
+   <th scope="col">Итог</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(120, 100%, 50%)</code></td>
+   <td>green</td>
+   <td style="background: hsl(120,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 80%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,80%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 60%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,60%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 40%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,40%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 20%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,20%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 0%, 50%)</code></td>
+   <td>gray</td>
+   <td style="background: hsl(120,0%,50%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Вариации_прозрачности_HSL">Вариации прозрачности HSL</h5>
+
+<pre style="">hsla(240, 100%, 50%, .05)    <span style="background: hsla(240,100%,50%,0.05);"> /* непрозрачный синий на 5% */ </span>
+hsla(240, 100%, 50%, .4)     <span style="background: hsla(240,100%,50%,0.4);"> /* непрозрачный синий на 40% */ </span>
+hsla(240, 100%, 50%, .7)     <span style="background: hsla(240,100%,50%,0.7);"> /* непрозрачный синий на 70% */ </span>
+hsla(240, 100%, 50%, 1)      <span style="background: hsla(240,100%,50%,1);"> /* полный непрозрачный синий */ </span>
+
+/* Синтаксис пробелов */
+hsla(240 100% 50% / .05)     <span style="background: hsla(240,100%,50%,0.05);"> /* непрозрачный синий на  5% */ </span>
+
+/* Процентное значение для Альфа */
+hsla(240 100% 50% / 5%)      <span style="background: hsla(240,100%,50%,0.05);"> /*  непрозрачный синий на 5% */ </span>
+</pre>
+
+<h3 id="Системный_цвет">Системный цвет</h3>
+
+<p>Не все системные цвета поддерживаются на всех системах. {{deprecated_inline}} для использования на общедоступных веб-страницах.</p>
+
+<dl style="">
+ <dt>ActiveBorder</dt>
+ <dd>Активная граница окна.</dd>
+ <dt>ActiveCaption</dt>
+ <dd>Активный заголовок окна. Должен использоваться с текстом <code>CaptionText</code> в качестве цвета переднего плана.</dd>
+ <dt>AppWorkspace</dt>
+ <dd>Цвет фона интерфейса нескольких документов.</dd>
+ <dt>Background</dt>
+ <dd>Фон рабочего стола.</dd>
+ <dt>ButtonFace</dt>
+ <dd>Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом <code>ButtonText</code> цвет переднего плана.</dd>
+ <dt>ButtonHighlight</dt>
+ <dd>Цвет границы, обращенной к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.</dd>
+ <dt>ButtonShadow</dt>
+ <dd>Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трехмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.</dd>
+ <dt>ButtonText</dt>
+ <dd>Следует использовать с <code>ButtonFace</code> или <code>ThreeDFace</code> цвет фона.</dd>
+ <dt>CaptionText</dt>
+ <dd>Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона <code>ActiveCaption</code>.</dd>
+ <dt>GrayText</dt>
+ <dd>Серый (отключен) текст.</dd>
+ <dt>Highlight</dt>
+ <dd>Элемент(ы), выбранный в элементе управления. Следует использовать с <code>HighlightText</code> текста цветом переднего плана.</dd>
+ <dt>HighlightText</dt>
+ <dd>Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона.</dd>
+ <dt>InactiveBorder</dt>
+ <dd>Граница неактивного окна.</dd>
+ <dt>InactiveCaption</dt>
+ <dd>Заголовок неактивного окна. Должен использоваться с цветом переднего плана <code>InactiveCaptionText</code>.</dd>
+ <dt>InactiveCaptionText</dt>
+ <dd>Следует использовать с <code>InactiveCaption</code> неактивным цветом фона заголовка.</dd>
+ <dt>InfoBackground</dt>
+ <dd>Цвет фона для элементов управления всплывающей подсказки. Должен использоваться с цветом переднего плана <code>InfoText</code>.</dd>
+ <dt>InfoText</dt>
+ <dd>Цвет текста элементов подсказки. Должен использоваться с и<code>InfoBackground</code>фона.</dd>
+ <dt>Menu</dt>
+ <dd>Фон меню. Должен использоваться с <code>MenuText</code> или<code>-moz-MenuBarText</code>строки меню цвет переднего плана.</dd>
+ <dt>MenuText</dt>
+ <dd>Текст в меню. Следует использовать с меню Цвет фона.</dd>
+ <dt>Scrollbar</dt>
+ <dd>Цвет фона полос прокрутки.</dd>
+ <dt>ThreeDDarkShadow</dt>
+ <dd>Цвет более темной (как правило, внешней) из двух границ от источника света для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd>
+ <dt>ThreeDFace</dt>
+ <dd>Should be used with the <code>ButtonText</code> foreground color. Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.</dd>
+ <dt>ThreeDHighlight</dt>
+ <dd>Цвет более светлого (обычно внешнего) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd>
+ <dt>ThreeDLightShadow</dt>
+ <dd>Цвет более темной (обычно внутренней) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd>
+ <dt>ThreeDShadow</dt>
+ <dd>Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd>
+ <dt>Window</dt>
+ <dd>Фон окна. Следует использовать с <code>WindowText</code> цвет переднего плана.</dd>
+ <dt>WindowFrame</dt>
+ <dd>Оконная рама</dd>
+ <dt>WindowText</dt>
+ <dd>Текст в windows. Следует использовать с цветом фона окна.</dd>
+</dl>
+
+<h3 id="Расширеные_Цвета_Системы_Mozilla">Расширеные Цвета Системы Mozilla</h3>
+
+<dl style="">
+ <dt>-moz-ButtonDefault</dt>
+ <dd>Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.</dd>
+ <dt>-moz-ButtonHoverFace</dt>
+ <dd>Цвет фона кнопки, на которую наведен указатель мыши (который будет Трехлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.</dd>
+ <dt>-moz-ButtonHoverText</dt>
+ <dd>Цвет текста кнопки, на которую наведен указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с-<code>-moz-ButtonHoverFace background</code> color.</dd>
+ <dt>-moz-CellHighlight</dt>
+ <dd>Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана <code>-moz-CellHighlightText</code>. См. также<code>-moz-html-CellHighlight</code>.</dd>
+ <dt>-moz-CellHighlightText</dt>
+ <dd>Цвет текста для выбранного элемента в дереве. Следует использовать с цветом фона <code>moz-CellHighlight background</code>. См. также <code>-moz-html-CellHighlightText</code> выделения ячейки.</dd>
+ <dt>-moz-Combobox</dt>
+ <dd> {{Gecko_minversion_inline ("1.9.2")}} цвет фона для комбинированных полей <code>-moz-ComboboxText</code>. Должен использоваться с цветом переднего плана текста-moz-Combobox. В версиях до 1.9.2 вместо этого используйте <code>-moz-Field</code>.</dd>
+ <dt>-moz-ComboboxText</dt>
+ <dd>{Gecko_minversion_inline ("1.9.2")}} цвет текста для комбинированных полей. Следует использовать с цветом фона <code>-moz-Combobox</code>. В версиях до 1.9.2 вместо этого используйте <code>-moz-FieldText</code>.</dd>
+ <dt>-moz-Dialog</dt>
+ <dd>Цвет фона для диалоговых окон. Должен использоваться с цветом переднего плана -<code>-moz-DialogText</code>.</dd>
+ <dt>-moz-DialogText</dt>
+ <dd>Цвет текста для диалоговых окон. Должен использоваться с цветом фона <code>-moz-Dialog</code>.</dd>
+ <dt>-moz-dragtargetzone</dt>
+ <dt>-moz-EvenTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} цвет фона для четных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте-moz-поле. См. также <code>-moz-OddTreeRow</code>.</dd>
+ <dt>-moz-Field</dt>
+ <dd>Text field background color. Should be used with the <code>-moz-FieldText</code> foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана<code>-moz-FieldText</code>.</dd>
+ <dt>-moz-FieldText</dt>
+ <dd>Text field text color. Should be used with the <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, or <code>-moz-OddTreeRow</code> background color. Текстовое поле цвет текста. Следует использовать с <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code> или <code>-moz-OddTreeRow</code> цветом фона строки дерева.</dd>
+ <dt>-moz-html-CellHighlight</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>. {{gecko_minversion_inline ("1.9")}} цвет фона для выделенного элемента в HTML {{HTMLElement ("select")}} s. должен использоваться с цветом переднего плана <code>-moz-html-CellHighlight</code>. До Gecko 1.9, используйте <code>-moz-CellHighlightText</code>.                                    </dd>
+ <dt>-moz-html-CellHighlightText</dt>
+ <dd>{{gecko_minversion_inline ("1.9")}} цвет текста для  <code>-moz-html-CellHighlight </code>выделенных элементов в HTML {{HTMLElement ("select")}} s. должен использоваться с цветом фона. До Gecko 1.9, используйте <code>moz-html-CellHighlight</code>.</dd>
+ <dt>-moz-mac-accentdarkestshadow</dt>
+ <dt>-moz-mac-accentdarkshadow</dt>
+ <dt>-moz-mac-accentface</dt>
+ <dt>-moz-mac-accentlightesthighlight</dt>
+ <dt>-moz-mac-accentlightshadow</dt>
+ <dt>-moz-mac-accentregularhighlight</dt>
+ <dt>-moz-mac-accentregularshadow</dt>
+ <dt>-moz-mac-chrome-active</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-chrome-inactive</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-focusring</dt>
+ <dt>-moz-mac-menuselect</dt>
+ <dt>-moz-mac-menushadow</dt>
+ <dt>-moz-mac-menutextselect</dt>
+ <dt>-moz-MenuHover</dt>
+ <dd>Цвет фона для зависших пунктов меню. Часто похожи на <code>Highlight</code>. Следует использовать с <code>moz-MenuHoverText </code>или <code>-moz-MenuBarHoverText</code> при наведении цвет текста переднего плана.</dd>
+ <dt>-moz-MenuHoverText</dt>
+ <dd>Text color for hovered menu items. Often similar to <code>HighlightText</code>. Should be used with the <code>-moz-MenuHover</code> background color. Цвет текста для зависших пунктов меню. Часто похоже на выделение текста <code>HighlightText</code>. Следует использовать  с <code>-moz-MenuHover</code> наведите цвет фона.</dd>
+ <dt>-moz-MenuBarText</dt>
+ <dd>{{Gecko_minversion_inline ("1.9.2")}} цвет текста в строках меню. Часто похоже на текст меню  "<code>MenuText</code>". Должен использоваться поверх фона <code>Menu</code>.</dd>
+ <dt>-moz-MenuBarHoverText</dt>
+ <dd>Цвет для зависшего текста в строках меню. Часто похоже на <code>-moz-MenuHoverText</code>меню наведения текста. Следует использовать поверх <code>-moz-MenuHover</code> наведите фон.</dd>
+ <dt>-moz-nativehyperlinktext</dt>
+ <dd>{{Gecko_minversion_inline ("1.9.1")}} цвет гиперссылки платформы по умолчанию.</dd>
+ <dt>-moz-OddTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} цвет фона для нечетных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте <code>-moz-Field</code>. Смотрите также <code>-moz-EvenTreeRow</code>.</dd>
+ <dt>-moz-win-communicationstext</dt>
+ <dd>{{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с <code>{{cssxref ("- moz-appearance")}}:- moz-win-communications-toolbox;</code>.</dd>
+ <dt>-moz-win-mediatext</dt>
+ <dd>{{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с <code>{{cssxref ("- moz-appearance")}}:- moz-win-media-toolbox</code>.</dd>
+ <dt>-moz-win-accentcolor</dt>
+ <dd>{{gecko_minversion_inline ("56")}}<br>
+ Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.</dd>
+ <dt>-moz-win-accentcolortext</dt>
+ <dd>{{gecko_minversion_inline ("56")}}<br>
+ Используется для доступа к цвету текста, размещенного над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.</dd>
+</dl>
+
+<h3 id="Расширения_Цветовых_Предпочтений_Mozilla">Расширения Цветовых Предпочтений Mozilla</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;">
+ <dt>-moz-activehyperlinktext</dt>
+ <dd>Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd>
+ <dt>-moz-default-background-color</dt>
+ <dd>{{Gecko_minversion_inline ("5.0")}} предпочтения пользователя для цвета фона документа.</dd>
+ <dt>-moz-default-color</dt>
+ <dd>{{Gecko_minversion_inline ("5.0")}} предпочтения пользователя для цвета текста.</dd>
+ <dt>-moz-hyperlinktext</dt>
+ <dd>Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd>
+ <dt>-moz-visitedhyperlinktext</dt>
+ <dd>Предпочтения пользователя для цвета текста посещенных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd>
+</dl>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>В анимации и <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">градиентах </a>значения <code>&lt;color&gt;</code> интерполируются на каждый из их <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">красных, зеленых и синих компонентов</a>. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется <a href="/en-US/docs/Web/CSS/single-transition-timing-function">функцией времени</a>.</p>
+
+<h2 id="Соображения_доступности">Соображения доступности</h2>
+
+<p>Некоторые люди с трудом различают цвета. Рекомендация <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определенного сообщения, действия или результата. Дополнительную информацию см. В <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">разделе цвет и цветовой контраст</a>.</p>
+
+<h2 id="Технические_характеристики">Технические характеристики</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('CSS4 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Добавляет <code>rebeccapurple</code>, четырехзначные (<code>#RGBA</code>) и восьмизначные (<code>#RRGGBBAA</code>) шестнадцатеричные обозначения, <code>rgba() </code>и <code>hsla()</code> в качестве псевдонимов <code>rgb ()</code> и <code>hsl () </code>(оба с одинаковым синтаксисом параметров), разделенные пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах <code>hsl ()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Устаревает системные цвета. Добавляет цвета SVG и функциональные обозначения <code>rgb()</code>, <code>hsl ()</code> и <code>hsla()</code>.</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
+   <td style="vertical-align: top;">Добавляет <code>orange</code> keyword(ключевое слово) и системные цвета.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
+   <td style="vertical-align: top;">Первоначальное определение. Включает в себя 16 основных ключевых слов цвета.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>Свойство {{Cssxref("непрозрачность")}} позволяет определить прозрачность на уровне элемента.</li>
+ <li>Некоторые общие свойства, которые используют этот тип данных: {{Cssxref("цвет")}}, {{Cssxref("фон")}}, {{Cssxref("бордюр-колор")}}, {{Cssxref("окно-тень")}}, {{Cssxref("контур-цвет")}}, {{Cssxref("текст-тень")}}</li>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Применение цвета к элементам HTML с помощью CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/column-count/index.html b/files/ru/web/css/column-count/index.html
new file mode 100644
index 0000000000..33c4606e27
--- /dev/null
+++ b/files/ru/web/css/column-count/index.html
@@ -0,0 +1,97 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+tags:
+  - Свойство
+  - мультиколоночная верстка
+translation_of: Web/CSS/column-count
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS </a>свойство <strong><code>column-count</code></strong> разбивает содержимое элемента на заданное число столбцов.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значение, заданное ключевым словом */
+column-count: auto;
+
+/* целое значение */
+column-count: 3;
+
+/* глобальные значения */
+column-count: inherit;
+column-count: initial;
+column-count: unset;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Количество столбцов определяется другими свойствами CSS, такими как {{cssxref("column-width")}}.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Является строго положительным {{cssxref("&lt;integer&gt;")}}, описывающим идеальное число столбцов, в которые будет стекаться содержимое элемента.  Если {{cssxref("column-width")}}. также, не установлено в значение  -<code>auto</code>, оно указывает максимально допустимое число столбцов.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns
+  using the CSS `column-count` property. The text
+  is equally distributed over the columns.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.content-box {
+  column-count: 3;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#cc', 'column-count')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.column-count")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a> (Learn Layout)</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Basic Concepts of Multicol</a></li>
+</ul>
diff --git a/files/ru/web/css/column-fill/index.html b/files/ru/web/css/column-fill/index.html
new file mode 100644
index 0000000000..1453e8b2c9
--- /dev/null
+++ b/files/ru/web/css/column-fill/index.html
@@ -0,0 +1,117 @@
+---
+title: column-fill
+slug: Web/CSS/column-fill
+translation_of: Web/CSS/column-fill
+---
+<div>{{CSSRef("CSS Multi-columns")}}</div>
+
+<p>Свойство <code>column-fill </code>применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства <code>column-fill</code> установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения <code>auto</code>, содержимое занимает столько прострванства сколько ему потребуется.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">column-fill: auto;
+column-fill: balance;
+
+/* Значения по умолчанию */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Высота столбцов не контролируется.</dd>
+ <dt><code>balance</code></dt>
+ <dd>Разделяет содержимое на равные по высоте столбцы.</dd>
+</dl>
+
+<h3 id="Возможные_значения">Возможные значения</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css; highlight=[4]">.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+  height: 200px;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Multicol', '#column-fill', 'column-fill')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Значение по умолчанию</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}{{property_prefix('-moz')}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}{{property_prefix('-moz')}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/column-rule-color/index.html b/files/ru/web/css/column-rule-color/index.html
new file mode 100644
index 0000000000..8d6a6e55d1
--- /dev/null
+++ b/files/ru/web/css/column-rule-color/index.html
@@ -0,0 +1,98 @@
+---
+title: column-rule-color
+slug: Web/CSS/column-rule-color
+tags:
+  - мультиколоночная верстка
+translation_of: Web/CSS/column-rule-color
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS </a>свойство<strong> <code>column-rule-color</code></strong> устанавливает цвет линии, расположенной между колонками при мультиколоночной верстке.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения &lt;color&gt;  */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* Глобальные значения */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+</pre>
+
+<p>Свойство <code>column-rule-color</code> указывает одиночное значение <code>&lt;color&gt;</code>.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Цвет линий, разделяющих столбцы.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This is a bunch of text split into three columns.
+   The `column-rule-color` property is used to change
+   the color of the line that is drawn between columns.
+   Don't you think that's wonderful?&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">p {
+  column-count: 3;
+  column-rule-style: solid;
+  column-rule-color: blue;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.column-rule-color")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The {{cssxref("&lt;color&gt;")}} data type</li>
+ <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, and {{cssxref("caret-color")}}</li>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/column-rule-style/index.html b/files/ru/web/css/column-rule-style/index.html
new file mode 100644
index 0000000000..926175caa1
--- /dev/null
+++ b/files/ru/web/css/column-rule-style/index.html
@@ -0,0 +1,95 @@
+---
+title: column-rule-style
+slug: Web/CSS/column-rule-style
+tags:
+  - мультиколоночная верстка
+translation_of: Web/CSS/column-rule-style
+---
+<div>{{ CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>column-rule-style</code></strong> устанавливает стиль линии, расположенной между колонками при мультиколоночной верстке.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; значения */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* глобальные значения */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+</pre>
+
+<p>Свойство <code>column-rule-style</code> указывается как одиночное <code>&lt;'border-style'&gt;</code> значение.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Ключевое слово, определяющее  {{ cssxref("border-style") }}, описывающий стиль для линии, разделяющей столбцы. Стилизация должна быть интерпретирована как разрушающая границы модель.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This is a bunch of text split into three columns.
+   The `column-rule-style` property is used to change
+   the style of the line that is drawn between columns.
+   Don't you think that's wonderful?&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  column-count: 3;
+  column-rule-style: dashed;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Multicol', '#crs', 'column-rule-style') }}</td>
+   <td>{{ Spec2('CSS3 Multicol') }}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.column-rule-style")}}</p>
diff --git a/files/ru/web/css/column-rule/index.html b/files/ru/web/css/column-rule/index.html
new file mode 100644
index 0000000000..a74742f3e6
--- /dev/null
+++ b/files/ru/web/css/column-rule/index.html
@@ -0,0 +1,120 @@
+---
+title: column-rule
+slug: Web/CSS/column-rule
+tags:
+  - мультиколоночная верстка
+translation_of: Web/CSS/column-rule
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/Shorthand_properties">Краткая форма записи</a> <a href="/en-US/docs/Web/CSS">CSS</a> свойств <strong><code>column-rule</code></strong> устанавливает ширину, стиль и цвет линии, находящейся между колонками в мультиколоночной верстке.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div>
+
+
+
+<p>Эта краткая форма записи задает индивидуальные  <code>column-rule-*</code> свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">column-rule: dotted;
+column-rule: solid 8px;
+column-rule: solid blue;
+column-rule: thick inset blue;
+
+/* глобальные значения */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+</pre>
+
+<p>Свойство <code>column-rule</code> указывается в виде одного, двух или трех значений, перечисленных ниже, в любом порядке.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;'column-rule-width'&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} или одно из трех ключевых свойств, <code>thin</code>, <code>medium</code>, или <code>thick</code>. См. подробно -  {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'column-rule-style'&gt;</code></dt>
+ <dd>См. подробно {{cssxref("border-style")}} .</dd>
+ <dt><code>&lt;'column-rule-color'&gt;</code></dt>
+ <dd>Значение {{cssxref("&lt;color&gt;")}} .</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Example_1">Example 1</h3>
+
+<pre class="brush: css">/* Аналогично "medium dotted currentColor" */
+p.foo { column-rule: dotted; }
+
+/* Аналогично "medium solid blue" */
+p.bar { column-rule: solid blue; }
+
+/* Аналогично "8px solid currentColor" */
+p.baz { column-rule: solid 8px; }
+
+p.abc { column-rule: thick inset blue; }
+</pre>
+
+<h3 id="Example_2">Example 2</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns.
+  Take note of how the `column-rule` property is used
+  to adjust the style, width, and color of the rule
+  that appears between the columns.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.content-box {
+  padding: 0.3em;
+  background: #ff7;
+  column-count: 3;
+  column-rule: inset 2px #33f;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Example_2')}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.column-rule")}}</p>
diff --git a/files/ru/web/css/column_combinator/index.html b/files/ru/web/css/column_combinator/index.html
new file mode 100644
index 0000000000..9fad1a33a2
--- /dev/null
+++ b/files/ru/web/css/column_combinator/index.html
@@ -0,0 +1,95 @@
+---
+title: Комбинатор столбцов
+slug: Web/CSS/Column_combinator
+tags:
+  - Верстка
+  - Селекторы
+translation_of: Web/CSS/Column_combinator
+---
+<div>{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p><strong>Комбинатор столбцов</strong> (<code>||</code>) помещается между двумя селекторами CSS. Он соответствует только тем элементам, которым соответствует второй селектор, которые принадлежат элементам столбца, соответствующим первому.</p>
+
+<pre class="brush: css no-line-numbers">/* Ячейки таблицы, принадлежащие к столбцу "выделено" */
+col.selected || td {
+  background: gray;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>column-selector</var> || <var>cell-selector</var> {
+  <var>/* свойства стиля */</var>
+}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table border="1"&gt;
+  &lt;colgroup&gt;
+    &lt;col span="2"/&gt;
+    &lt;col class="selected"/&gt;
+  &lt;/colgroup&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;A
+      &lt;td&gt;B
+      &lt;td&gt;C
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td colspan="2"&gt;D&lt;/td&gt;
+      &lt;td&gt;E&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;F&lt;/td&gt;
+      &lt;td colspan="2"&gt;G&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.column")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("col")}}</li>
+ <li>{{HTMLElement("colgroup")}}</li>
+ <li>{{CSSxRef("grid")}}</li>
+</ul>
diff --git a/files/ru/web/css/common_css_questions/index.html b/files/ru/web/css/common_css_questions/index.html
new file mode 100644
index 0000000000..cecfb92b82
--- /dev/null
+++ b/files/ru/web/css/common_css_questions/index.html
@@ -0,0 +1,182 @@
+---
+title: Common CSS questions
+slug: Web/CSS/Common_CSS_Questions
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly">Why doesn't my CSS, which is valid, render correctly?</h2>
+
+<p>Браузер использует декларацию <code>DOCTYPE</code> чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме,  которую будут поддерживать старые браузеры. Правильное использование декларациии <code>DOCTYPE</code> в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.</p>
+
+<p>У современных браузеров есть два режима отображения веб-страниц:</p>
+
+<ul>
+ <li><em>Индивидуальный</em>: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы  с неполной, некорректной или отстутвующей <code>DOCTYPE</code> декларацией или с тем видом <code>DOCTYPE</code>, который использовался до 2001 года, будет отображён в индивидуальном режиме.</li>
+ <li><em>Стандартный</em>: в этом режиме браузер старается строго следовать стандартам W3C. Ожидается, что современные HTML страницы разработаны для браузеров, следуемых стандартам, и в результате, страницы с современным  <code>DOCTYPE</code> отображаются уже в стандартом режиме.</li>
+</ul>
+
+<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p>
+
+<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p>
+
+<pre>&lt;!DOCTYPE html&gt; /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+</pre>
+
+<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">Why doesn't my CSS, which is valid, render at all?</h2>
+
+<p>To be applied, a CSS stylesheet must be served with a <code>text/css</code> MIME type. If the Web server doesn't serve it with this type, it won't be applied.</p>
+
+<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">What is the difference between <code>id</code> and <code>class</code>?</h2>
+
+<p>HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.<br>
+ <br>
+ Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.<br>
+ <br>
+ Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.</p>
+
+<p>Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).</p>
+
+<p>See <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors"> CSS selectors</a></p>
+
+<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">How do I restore the default value of a property?</h2>
+
+<p>Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.</p>
+
+<p>This has changed with CSS 2; the keyword <a href="/es/CSS/initial" title="initial">initial</a> is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.</p>
+
+<h2 id="Derived_styles" name="Derived_styles">How do I derive one style from another?</h2>
+
+<p>CSS does not allow one style to be defined in terms of another. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). However, assigning multiple classes to a single element can provide the same effect.</p>
+
+<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">How do I assign multiple classes to an element?</h2>
+
+<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p>
+
+<pre>&lt;style type="text/css"&gt;
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="news today"&gt;
+... content of today's news ...
+&lt;/div&gt;
+</pre>
+
+<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p>
+
+<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">Why don't my style rules work properly?</h2>
+
+<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p>
+
+<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML elements hierarchy</h3>
+
+<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p>
+
+<pre>.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+&lt;!-- news item text is black, but corporate name is red and in bold --&gt;
+&lt;div class="news"&gt;
+   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
+&lt;/div&gt;
+</pre>
+
+<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p>
+
+<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">Explicitly re-defined style rule</h3>
+
+<p>In CSS stylesheets, order <strong>is</strong> important. If you define a rule and then you re-define the same rule, the last definition is used.</p>
+
+<pre>#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+&lt;!-- most text is in bold, except "GE", which is red and not bold --&gt;
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.</p>
+
+<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">Use of a shorthand property</h3>
+
+<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.</p>
+
+<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p>
+
+<pre>#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+</pre>
+
+<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">Use of the <code>*</code> selector</h3>
+
+<p>The <code>*</code> wildcard selector refers to any element, and it has to be used with particular care.</p>
+
+<pre>body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+&lt;div id="section"&gt;
+   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p>
+
+<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p>
+
+<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">Specificity in CSS</h3>
+
+<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p>
+
+<pre>div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
+</pre>
+
+<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p>
+
+<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?</h2>
+
+<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p>
+
+<p>The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.</p>
+
+<p>Please see the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p>
+
+<h2 id="How_does_z-index_relate_to_positioning">How does z-index relate to positioning?</h2>
+
+<p>The z-index property specifies the stack order of elements.</p>
+
+<p>An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.</p>
+
+<p>Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p>
diff --git a/files/ru/web/css/computed_value/index.html b/files/ru/web/css/computed_value/index.html
new file mode 100644
index 0000000000..964fb73790
--- /dev/null
+++ b/files/ru/web/css/computed_value/index.html
@@ -0,0 +1,55 @@
+---
+title: Вычисленное значение
+slug: Web/CSS/computed_value
+tags:
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/computed_value
+---
+<div>{{cssref}}</div>
+
+<p><strong>Вычисленное значение</strong> CSS свойства вычисляется из указанного значения посредством:</p>
+
+<ul>
+ <li>Обработки специальных значений {{cssxref("inherit")}} и {{cssxref("initial")}}, а также</li>
+ <li>Выполнения вычислений необходимых для получения значения, описанного в строке "Обработка значения" в описании свойства.</li>
+</ul>
+
+<p>Вычисления необходимые для получения <strong>вычисленного значения</strong> для свойства обычно включают в себя преобразование относительных значений (например, находящиеся в единицах <code>em</code> или в процентах) в абсолютные значения.</p>
+
+<p>Например, если у элемента указаны значения <code>font-size: 16px</code> и <code>padding-top: 2em</code>, то вычисленное значение <code>padding-top</code> будет <code>32px</code> (двойной размер шрифта).</p>
+
+<p>Однако, для некоторых свойств <em>(таких, где проценты относительны к чему-то, что может потребовать лэйаут определять(переопределить) границы, например, <code>width</code>, <code>margin-right</code>, <code>text-indent</code> и <code>top</code>)</em>, процентно указанные значения преобразуются в процентно вычисляемые значения. Кроме того, безразмерные числа, указанные в свойстве <code>line-height</code> становятся вычисленными значениями. Эти относительные единицы, которые остались в вычисленных значениях, становятся абсолютными, когда  <a href="/ru/docs/CSS/used_value">используемое значение</a> установлено.</p>
+
+<p>Основная сфера применения<strong> <em>вычисленного значения</em></strong> <em>(кроме как использования его как "шага" между <a href="/ru/docs/Web/CSS/Указанное_значение">указанным</a> и <a href="/ru/docs/Web/CSS/used_value">используемым</a> значением) </em>является <a class="internal" href="/ru/docs/Web/CSS/inheritance">наследование</a>, включая ключевое слово {{cssxref("inherit")}}.</p>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>DOM API {{domxref("Window.getComputedStyle", "getComputedStyle()")}} возвращает {{cssxref("resolved_value", "решённое значение")}}, которое может быть либо {{cssxref("computed_value", "вычисляемым")}} или {{cssxref("used_value", "используемым")}} значением, в зависимости от свойства.</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS2.1", "cascade.html#computed-value", "computed value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Руководство по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/containing_block/index.html b/files/ru/web/css/containing_block/index.html
new file mode 100644
index 0000000000..a441429524
--- /dev/null
+++ b/files/ru/web/css/containing_block/index.html
@@ -0,0 +1,271 @@
+---
+title: Разметка и содержащий блок
+slug: Web/CSS/Containing_block
+translation_of: Web/CSS/Containing_block
+---
+<div>{{cssref}}</div>
+
+<p class="summary" dir="ltr">На размер и позицию элемента часто влияет его <strong>содержащий блок</strong> (containing block). Чаще всего содержащим блоком является content область (<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a>) ближайшего блочного (<a href="/en-US/docs/Web/HTML/Block-level_elements">block-level</a>) предка, но это не всегда так. <span class="seoSummary">В этой статье мы рассмотрим факторы, которые</span> определяют <span class="seoSummary">содержащий блок элемента.</span></p>
+
+<p class="summary" dir="ltr">Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создает бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:</p>
+
+<ol dir="ltr" start="1">
+ <li>Сontent область или область контента (content area).</li>
+ <li>Padding область или область внутреннего поля (padding area).</li>
+ <li>Border область или область границы (border area).</li>
+ <li>Margin область или область внешнего поля (margin area).</li>
+</ol>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<p dir="ltr">Многие разработчики верят, что содержащий блок элемента - это всегда content область его родителя, но это не всегда является правдой. Давайте исследуем факторы, которые определяют, что представляет собой содержащий элемент блок.</p>
+
+<h2 dir="ltr" id="Эффекты_содержащего_блока">Эффекты содержащего блока</h2>
+
+<p dir="ltr">Перед изучением того, что определяет содержащий блок элемента, будет полезно сначала узнать, почему этот блок так важен.</p>
+
+<p dir="ltr">На размер и положение элемента часто влияет его содержащий блок. </p>
+
+<p dir="ltr">Значения заданные в процентах для свойств {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, и свойства задающие смещение абсолютно позиционированного элемента (т.е., такого, у которого свойство {{cssxref("position")}} имеет значение <code>absolute</code> или <code>fixed</code>) рассчитываются исходя из его содержащего блока.</p>
+
+<h2 dir="ltr" id="Определение_содержащего_блока">Определение содержащего блока</h2>
+
+<p dir="ltr">Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:</p>
+
+<ol dir="ltr" start="1">
+ <li>Если свойство <code>position</code> имеет значение  <code><strong>static</strong></code>,<strong> </strong><code><strong>relative</strong></code>, или <strong><code>sticky</code></strong>, то содержащий блок задается краем <em>content бокса</em> ближайшего предка, который:
+
+  <ul>
+   <li>либо является <strong>блочным контейнером</strong> (block container), например, если его свойство display имеет значение inline-block, block или list-item.</li>
+   <li>либо <strong>устанавливает контекст форматирования</strong> (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).</li>
+  </ul>
+ </li>
+ <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code>, то содержащий блок задается краем <em>padding бокса</em> ближайшего предка, у которого свойство <code>position</code><strong> </strong>имеет значение отличное от <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> или <code>sticky</code>).</li>
+ <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>fixed</strong></code>, то содержащий блок задается:
+  <ul>
+   <li>в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - {{glossary("viewport")}});</li>
+   <li>в случае страничного медиа (paged media) областью страницы.</li>
+  </ul>
+ </li>
+ <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code> или <code><strong>fixed</strong></code>, то содержащий блок может также задаваться краем padding бокса ближайшего предка, у которого:
+  <ol start="1">
+   <li>Свойство {{cssxref("transform")}} или {{cssxref("perspective")}} имеет значение отличное от <code>none</code>.</li>
+   <li>Свойство {{cssxref("will-change")}} имеет значение <code>transform</code> или <code>perspective</code>.</li>
+   <li>Свойство {{cssxref("filter")}}<strong> </strong> имеет значение отличное от <code>none</code> или <code>will-change</code> value of <code>filter</code> (работает только в Firefox).</li>
+   <li>Свойство {{cssxref("contain")}} имеет значение <code>paint</code> (например, <code>contain: paint;</code>).</li>
+  </ol>
+ </li>
+</ol>
+
+<div class="note">
+<p dir="ltr"><strong>Примечание: </strong>Содержащий блок в котором находится корневой элемент ({{HTMLElement("html")}}) представляет собой прямоугольник, который называется <strong>начальный содержащий блок</strong>. Он имеет размеры области просмотра (вьюпорт - viewport) для непрерывного медиа (continuous media) или области страницы (page area) для страничного медиа (paged media).</p>
+</div>
+
+<h2 dir="ltr" id="Calculating_percentage_values_from_the_containing_block">Calculating percentage values from the containing block</h2>
+
+<p dir="ltr">As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are <strong>box model properties</strong> and <strong>offset properties</strong>:</p>
+
+<ol dir="ltr" start="1">
+ <li>The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the <code>height</code><strong> </strong>of the containing block.</li>
+ <li>The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the <code>width</code><strong> </strong>of the containing block.</li>
+</ol>
+
+<h2 dir="ltr" id="Some_examples">Some examples</h2>
+
+<p dir="ltr">The HTML code for all our examples is:</p>
+
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+
+<p dir="ltr">Only the CSS is altered in each instance below.</p>
+
+<h3 id="Example_1">Example 1</h3>
+
+<p>In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_1','100%','300')}}</p>
+
+<h3 id="Example_2">Example 2</h3>
+
+<p>In this example, the paragraph's containing block is the {{HTMLElement("body")}}<strong> </strong>element, because <code>&lt;section&gt;</code> is not a block container (because of <code>display: inline</code>) and doesn’t establish a formatting context.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_2','100%','300')}}</p>
+
+<h3 id="Example_3">Example 3</h3>
+
+<p>In this example, the paragraph's containing block is <code>&lt;section&gt;</code> because the latter's <code>position</code> is <code>absolute</code>. The paragraph's percentage values are affected by the <code>padding</code> of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were <code>border-box</code> this would not be the case.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_3','100%','300')}}</p>
+
+<h3 id="Example_4">Example 4</h3>
+
+<p>In this example, the paragraph's <code>position</code> is <code>fixed</code>, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_4','100%','300')}}</p>
+
+<h3 id="Example_5">Example 5</h3>
+
+<p>In this example, the paragraph's <code>position</code> is <code>absolute</code>, so its containing block is <code>&lt;section&gt;</code>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't <code>none</code>.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_5','100%','300')}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>The {{cssxref("all")}} property resets all CSS declarations to a given known state</li>
+</ul>
diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html
new file mode 100644
index 0000000000..f708e7db61
--- /dev/null
+++ b/files/ru/web/css/content/index.html
@@ -0,0 +1,293 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - Контекст
+translation_of: Web/CSS/content
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>content</code></strong> заменяет элемент сгенерированным значением. Объекты, добавленные с помощью свойства <code>content</code> являются <em>анонимными  </em>property are <em>anonymous <a href="/en-US/docs/Web/CSS/Replaced_element">замещаемыми элементами</a>.</em></p>
+
+<pre class="brush:css no-line-numbers">/* Ключевые слова, которые нельзя комбинировать с другими значениями */
+content: normal;
+content: none;
+
+/* значение &lt;url&gt;  */
+content: url("http://www.example.com/test.png");
+
+/* значение <a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a>  */
+content: linear-gradient(#e66465, #9198e5);
+
+/* указанные ниже значения могут быть применены только к сгенерированному контенту с использованием ::before и ::after */
+
+/* значение &lt;string&gt;  */
+content: "prefix";
+
+/* значения &lt;counter&gt; */
+content: counter(chapter_counter);
+content: counters(section_counter, ".");
+
+/* значение attr() связано со значением атрибута HTML */
+content: attr(value string);
+
+/* языко- и позиция-зависимые ключевые слова */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* несколько значений могут использоваться вместе */
+content: open-quote chapter_counter;
+
+/* глобальные значения */
+content: inherit;
+content: initial;
+content: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Псевдоэлемент не генерируется.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Вычисляется <code>none</code> для псевдоэлементов <code>::before</code> и<code>::after</code>.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, <code>\000A9</code> представляет собой символ авторского права.</dd>
+ <dt>{{cssxref("&lt;url&gt;")}}</dt>
+ <dd>URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображен, он игнорируется или отображается значение по умолчанию.</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>{{cssxref("&lt;image&gt;")}}, указанный типом данных {{cssxref("&lt;url&gt;")}} или {{cssxref("&lt;gradient&gt;")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.</dd>
+ <dt>{{cssxref("&lt;counter&gt;")}}</dt>
+ <dd>Значение <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счетчика</a>, как правило число. Его можно отобразить с помощью функций  {{cssxref("counter()")}} или{{cssxref("counters()")}}.</dd>
+ <dd>
+ <p>Функция <code>counter()</code> имеет две формы записи: 'counter(<var>имя</var>)' или 'counter(<var>имя</var>, <var>стиль</var>)'. Сгенерированный текст - это значение самого вложенного счетчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию <code>decimal</code>).</p>
+
+ <p>Функция <code>counters()</code> также имеет две формы записи: 'counters(<var>name</var>, <var>string</var>)' или 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. Сгенерированный текст - это значение всех счетчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделенных указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию <code>decimal</code>).</p>
+ </dd>
+ <dt><code>attr(x)</code></dt>
+ <dd>Значение атрибута <code>x</code> элемента в виде строки. Если атрибут <code>x</code> отсутствует, вернется пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.</dd>
+ <dt><code>open-quote</code> | <code>close-quote</code></dt>
+ <dd>Эти значения заменяются соответствующей строкой из свойства {{cssxref("quotes")}}.</dd>
+ <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
+ <dd>Не вводит никакого содержимого, но увеличивает (уменьшает) уровень вложенности для кавычек.</dd>
+</dl>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Заголовки_и_двойные_кавычки">Заголовки и двойные кавычки</h3>
+
+<p>В этом примере вставляются кавычки вокруг кавычек а добавляет слово  "Глава" перед заголовками.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
+&lt;p&gt;According to Sir Tim Berners-Lee,
+  &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;I was
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.&lt;/q&gt;
+  We must understand that there is nothing fundamentally wrong
+  with building on the contributions of others.
+&lt;/p&gt;
+
+&lt;h1&gt;6&lt;/h1&gt;
+&lt;p&gt;According to the Mozilla Manifesto,
+  &lt;q cite="http://www.mozilla.org/en-US/about/manifesto/"&gt;Individuals
+    must have the ability to shape the Internet and
+    their own experiences on the Internet.&lt;/q&gt;
+  Therefore, we can infer that contributing to the open web
+  can protect our own individual experiences on it.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Chapter ";  /* Пробел в конце создает разделение
+                            между добавленным контентом
+                           и остальным контентом*/
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Заголовки_и_двойные_кавычки', '100%', 200)}}</p>
+
+<h3 id="Изображение_в_сочетании_с_текстом">Изображение в сочетании с текстом</h3>
+
+<p>В этом примере вставляется изображение перед ссылкой. Если изображение не найдено, вставляет текст.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;a href="http://www.mozilla.org/en-US/"&gt;Mozilla Home Page&lt;/a&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+  font: x-small Arial, sans-serif;
+  color: gray;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Изображение_в_сочетании_с_текстом', '100%', 60)}}</p>
+
+<h3 id="Целевые_классы">Целевые классы</h3>
+
+<p>В этом примере вставляется дополнительный текст после указанных элементов списка.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Paperback Best Sellers&lt;/h2&gt;
+&lt;ol&gt;
+  &lt;li&gt;Political Thriller&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Halloween Stories&lt;/li&gt;
+  &lt;li&gt;My Biography&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Vampire Romance&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.new-entry::after {
+  content: " New!";  /* Начальный пробел создает разделение
+                        между добавленным контентом
+                        и остальным контентом */
+  color: red;
+}</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('Целевые_классы', '100%', 160)}}</p>
+
+<h3 id="Атрибуты_изображений_и_элементов">Атрибуты изображений и элементов</h3>
+
+<p>В этом примере вставляется изображение перед каждой ссылкой и добавляет <code>id</code> атрибут после.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a id="moz" href="http://www.mozilla.org/"&gt;
+    Mozilla Home Page&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;
+    Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+}
+
+#mdn::before {
+  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+}
+
+li {
+  margin: 1em;
+}
+</pre>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample('Атрибуты_изображений_и_элементов', '100%', 160)}}</p>
+
+<h3 id="Замена_элемента">Замена элемента</h3>
+
+<p>В этом примере содержимое элемента заменяется изображением. Вы можете заменить содержимое элемента либо значением &lt;url&gt; или изменить значение &lt;image&gt; . Содержимое, добавленное с помощью ::before или ::after не будет сгенерировано, поскольку содержимое элемента будет заменено.</p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div id="replaced"&gt;Mozilla&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* не будет отображаться, если замена элемента поддерживается */
+  content: " (" attr(id) ")";
+}</pre>
+
+<h4 id="Результат_5">Результат</h4>
+
+<p>{{EmbedLiveSample('Замена_элемента', '100%', 160)}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Сгенерированный CSS контент не включен в <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Из-за этого он не будет представлен в  <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить ее в основной документ.</p>
+
+<ul>
+ <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Explanation of WCAG, Guideline 1.3 – MDN</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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("CSS3 Content", "#content-property", "content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.content")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("::before")}}</li>
+ <li>{{Cssxref("quotes")}}</li>
+</ul>
diff --git a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html
new file mode 100644
index 0000000000..785f85c87c
--- /dev/null
+++ b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html
@@ -0,0 +1,91 @@
+---
+title: Detecting CSS animation support
+slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придется решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.</p>
+
+<h2 id="Тестирование_поддержки_анимации_CSS">Тестирование поддержки анимации CSS</h2>
+
+<p>Этот код проверит, доступна ли поддержка анимации CSS:</p>
+
+<pre class="brush: js">var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для <code>animationstring</code> - <code>animation</code> , которая является свойством, которое мы хотим установить позже. Мы создаем массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.</p>
+
+<p>Затем мы проверяем, установлено ли свойство CSS {{cssxref("animation-name")}} в коллекции стилей для элемента, заданного переменной elem. Это означает, что браузер поддерживает CSS-анимацию без какого-либо префикса, чего на сегодняшний день никто из них не делает..</p>
+
+<p>Если браузер не поддерживает анимацию без префиксов и анимация по-прежнему ложна, мы перебираем все возможные префиксы, так как все основные браузеры в настоящее время префиксируют это свойство и меняют его имя на <code>AnimationName</code> .</p>
+
+<p>После завершения выполнения этого кода значение анимации будет равно false, если поддержка CSS-анимации недоступна, или true. Если это верно, то и имя свойства анимации, и keyframe prefix будут правильными. Таким образом, если вы используете новый Firefox, свойство будет <code>MozAnimation</code> и префикс ключевого кадра <code>-moz-</code> и с Chrome будет <code>WebkitAnimation</code> и <code>-webkit-</code>. Обратите внимание, что браузеры не делают это легко с переключением между camelCase и переносом.</p>
+
+<h2 id="Анимация_с_использованием_правильного_синтаксиса_для_разных_браузеров">Анимация с использованием правильного синтаксиса для разных браузеров</h2>
+
+<p>Теперь, когда вы знаете, поддерживается CSS-анимация или нет, мы можем анимировать.</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>Этот код определяет значение анимации; если оно ложно, мы знаем, что нам нужно использовать альтернативный код JavaScript для выполнения нашей анимации. В противном случае мы можем использовать JavaScript для создания желаемых анимационных эффектов CSS.</p>
+
+<p>Установка свойства анимации очень проста; просто обновите его значение в коллекции стилей. Однако добавление ключевых кадров сложнее, так как они не определяются с помощью традиционного синтаксиса CSS (что делает их более гибкими, но труднее определить из скрипта).</p>
+
+<p>Чтобы определить наши ключевые кадры с помощью JavaScript, нам нужно записать их в виде строки CSS. Все, что мы делаем, - это устанавливаем переменную keyframes, добавляя префиксы к каждому атрибуту по мере его построения. Эта переменная, будучи однажды сконструированной, содержит полное описание всех ключевых кадров, необходимых для нашей последовательности анимации.</p>
+
+<p>Следующая задача-фактически добавить ключевые кадры в CSS страницы. Первое, что нужно сделать, это посмотреть, есть ли уже таблица стилей в документе; если да, то мы просто вставляем описание ключевого кадра в эту таблицу стилей; это делается в строках 13-15.</p>
+
+<p>Если таблицы стилей еще нет, то создается новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">View on JSFiddle</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS animations</a></li>
+</ul>
diff --git a/files/ru/web/css/css_animations/index.html b/files/ru/web/css/css_animations/index.html
new file mode 100644
index 0000000000..da1fc8dd8e
--- /dev/null
+++ b/files/ru/web/css/css_animations/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Анимации</strong> - это модуль CSS, который позволяет анимировать изменение значений CSS-свойств, используя опорные кадры (<em>keyframes</em>). Для управления поведением таких анимаций можно задать хронометражную функцию, длительность, количество повторов и другие аттрибуты.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Как определить, поддерживаются ли CSS-анимации</a></dt>
+ <dd>Описаны техники определения того, поддерживает ли браузер CSS-анимации.</dd>
+ <dt><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy">Использование CSS-анимаций</a></dt>
+ <dd>Пошаговое руководство по созданию анимаций с помощью CSS. Статья описывает все касающиеся анимации CSS-свойства и @-правила и объясняет, как они взаимодействуют друг с другом.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    43.0</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}} [1]<br>
+    4.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p>
+
+<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html b/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html
new file mode 100644
index 0000000000..05f6cb5cec
--- /dev/null
+++ b/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html
@@ -0,0 +1,388 @@
+---
+title: Использование CSS-анимации
+slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
+tags:
+  - Advanced
+  - CSS
+  - CSS Animations
+  - Example
+  - Experimental
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p>{{SeeCompatTable}}{{CSSRef}}</p>
+
+<p><span class="seoSummary">CSS анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой.</span> CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.</p>
+
+<p>Есть три преимущества CSS-анимации перед традиционными способами:</p>
+
+<ol>
+ <li>Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.</li>
+ <li>Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .</li>
+ <li>Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.</li>
+</ol>
+
+<h2 id="Конфигурирование_анимации">Конфигурирование анимации</h2>
+
+<p>Чтобы создать CSS-анимацию Вы должны добавить в стиль элемента, который хотите анимировать, свойство {{ cssxref("animation") }} или его подсвойства. Это позволит Вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет Вам настроить внешний вид анимации, который настраивается с помощью {{ cssxref("@keyframes") }}, рассматриваемой далее в {{ anch("Определение последовательности анимации с помощью ключевых кадров") }}.</p>
+
+<p>Свойство {{ cssxref("animation") }} имеет следующие подсвойства:</p>
+
+<dl>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>Определяет имя {{ cssxref("@keyframes") }}, настраивающего кадры анимации.</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>Определяет время, в течение которого должен пройти один цикл анимации.</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>Настраивает ускорение анимации.</dd>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Настраивает</span> <span class="hps">задержку</span> <span class="hps">между временем загрузки элемента и временем начала анимации</span></span>.</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>Определяет количество повторений анимации; Вы можете использовать значение <code>infinite</code> для бесконечного повторения анимации.</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>Настраивает значения, используемые анимацией, до и после исполнения.</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>Позволяет приостановить и возобновить анимацию.</dd>
+</dl>
+
+<h2 id="Определение_последовательности_анимации_с_помощью_ключевых_кадров">Определение последовательности анимации с помощью ключевых кадров</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">После того, как</span> <span class="hps">вы настроили</span> <span class="hps">временные свойства (продолжительность, ускорение)</span> <span class="hps">анимации</span><span>, вы</span> <span class="hps">должны определить</span> <span class="hps">внешний вид</span> <span class="hps">анимации</span></span>. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.</p>
+
+<p>В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: <code>from</code> и <code>to</code>.</p>
+
+<p>Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<div class="note"><strong>Внимание:</strong> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своем браузере, также содержат префиксы -webkit-.</div>
+
+<h3 id="Скольжение_текста">Скольжение текста</h3>
+
+<p>Этот простой пример анимирует скольжение текста в элементе {{ HTMLElement("p") }} от правого края окна браузера.</p>
+
+<p>Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство {{cssxref("overflow")}}<code>: hidden</code>.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>В стиле для элемента {{ HTMLElement("p") }} с помощью свойства {{ cssxref("animation-duration") }} указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для  {{ cssxref("@keyframes") }}, описывающей саму анимацию, определено как "slidein".</p>
+
+<p>В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.</p>
+
+<p>Kлючевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p>
+
+<p>Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.</p>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p>
+
+<p>{{EmbedLiveSample("Скольжение_текста","100%","250")}}</p>
+
+<h3 id="Добавление_других_ключевыч_кадров">Добавление других ключевыч кадров</h3>
+
+<p>Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.</p>
+
+<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p>
+
+<p>{{ EmbedLiveSample('Добавление_других_ключевыч_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p>
+
+<h3 id="Настройка_повторения">Настройка повторения</h3>
+
+<p>Чтобы настроить повторение, нужно добавить свойство {{ cssxref("animation-iteration-count") }} и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение <code>infinite</code> для бесконечного повторения:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Настройка_повторения","100%","250")}}</p>
+
+<h3 id="Движение_текста_вправо_и_влево">Движение текста вправо и влево</h3>
+
+<p>Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова "запрыгивает" за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству {{ cssxref("animation-direction") }} значения <code>alternate</code>:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Движение_текста_вправо_и_влево', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p>
+
+<h3 id="Использование_шорткодов">Использование шорткодов</h3>
+
+<p>Шорткод {{cssxref("animation")}} полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:</p>
+
+<pre><code>p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}</code></pre>
+
+<p>можно заменить на:</p>
+
+<pre><code>p {
+  animation: 3s infinite alternate slidein;
+}</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Внимание</strong>: подробнее об этом на странице раздела {{cssxref("animation")}} </p>
+</div>
+
+<h3 id="Установка_нескольких_значений_свойствам_анимации">Установка нескольких значений свойствам анимации  </h3>
+
+<p>CSS cвойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p>
+
+<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений  — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:</p>
+
+<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</code></pre>
+
+<p>Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, <code>fadeInOut</code> имеет продолжительность 2.5 с и количество повторений 2, и т.д.</p>
+
+<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</code></pre>
+
+<p>В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у <code>fadeInOut</code> длительность будет 2.5s,  а <code>moveLeft300px</code> — 5s. Значения продолжительности закончились, теперь они берутся сначала — <code>bounce</code> получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.</p>
+
+<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</code></pre>
+
+<h3 id="Использование_событий_анимации">Использование событий анимации</h3>
+
+<p>Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью <em>событий анимации</em>. Эти события, представленные объектом {{ domxref("event/AnimationEvent", "AnimationEvent") }}, можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.</p>
+
+<p>Мы будем модифицировать текст, чтобы выводить некоторую информацию  о каждом событии анимации. Так мы сможем увидеть, как она работает.</p>
+
+<h4 id="Добавление_CSS">Добавление CSS</h4>
+
+<p>Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">animation-direction</span></font> установлено <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">alternate</span></font>. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.</p>
+
+<pre class="brush: css">.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+   margin-left: 0%;
+   width: 100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+   margin-left: 0%;
+   width: 100%;
+ }
+}</pre>
+
+<h4 id="Добавление_обработчика_события_анимации">Добавление обработчика события анимации</h4>
+
+<p>Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p>
+
+<pre class="brush: js">var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+</pre>
+
+<p>Это довольно стандартный код; Вы можете получить дополнительную информацию в документации {{ domxref("element.addEventListener()") }}. Последнее, что делает этот код - это установка класса "slidein" для анимируемого элемента; мы делаем это, чтобы запустить анимацию.</p>
+
+<p>Почему? Потому что в нашем случае событие <code>animationstart</code> происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса "slidein" для анимируемого элемента.</p>
+
+<h4 id="Регистрация_событий">Регистрация событий</h4>
+
+<p>События будут передаваться функции <code>listener()</code>, показанной ниже.</p>
+
+<pre class="brush: js">function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Этот код также очень прост. Этот код следит за {{ domxref("event.type") }}, чтобы определить тип события, и добавляет элемент {{ HTMLElement("ul") }}, чтобы залогировать произошедшее событие.</p>
+
+<p>Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:</p>
+
+<ul>
+ <li>Started: elapsed time is 0</li>
+ <li>New loop started at time 3.01200008392334</li>
+ <li>New loop started at time 6.00600004196167</li>
+ <li>Ended: elapsed time is 9.234000205993652</li>
+</ul>
+
+<p>Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие <code>animationiteration</code> ; вместо него посылается событие <code>animationend</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>Ради полноты картины приведем код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+  &lt;p&gt;This example shows how to use CSS animations to make &lt;code&gt;p&lt;/code&gt; elements
+  move across the page.&lt;/p&gt;
+  &lt;p&gt;In addition, we output some text each time an animation event fires, so you can see them in action.&lt;/p&gt;
+  &lt;ul id="output"&gt;
+  &lt;/ul&gt;
+&lt;/body&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Использование_событий_анимации', '600', '300')}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+ <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Определение поддержки CSS анимации</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Использование CSS-переходов</a></li>
+</ul>
diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html
new file mode 100644
index 0000000000..8b4468729d
--- /dev/null
+++ b/files/ru/web/css/css_animations/tips/index.html
@@ -0,0 +1,150 @@
+---
+title: CSS Animations tips and tricks
+slug: Web/CSS/CSS_Animations/Tips
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<div>{{cssref}}</div>
+
+<p>CSS-анимация позволяет делать невероятные вещи с элементами, из которых состоят ваши документы и приложения. Однако есть вещи, которые не являются очевидными и, о способах реализации которых, вы не знаете, но вы бы хотели их реализовать. Эта статья представляет собой набор советов и трюков, которые мы нашли, чтобы облегчить вашу работу. В том числе, как снова запустить остановленную анимацию.</p>
+
+<h2 id="Run_an_animation_again" name="Run_an_animation_again">Запустить анимацию снова</h2>
+
+<p>Спецификация <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.</p>
+
+<p>Предлагаем вам один из способов, который мы считаем достаточно надежным и стабильным.</p>
+
+<h3 id="HTML_содержимое">HTML содержимое</h3>
+
+<p>Во-первых, давайте определим HTML для {{HTMLElement("div")}} который мы хотим анимировать, и кнопку, которая будет запускать (или воспроизводить) анимацию.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton"&gt;Click me to run the animation&lt;/div&gt;</pre>
+
+<h3 id="CSS_содержимое">CSS содержимое</h3>
+
+<p>Теперь мы определим саму анимацию с помощью CSS. Некоторые стили CSS, которые не важны (стиль самой кнопки "выполнить"), здесь не показаны, для краткости.</p>
+
+<div class="hidden">
+<pre class="brush: css">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>Здесь есть два класса. В классе <code>"box"</code> прописано основное описание внешнего вида элемента, без какой-либо анимационной информации. Детали анимации включены в класс <code>"changing"</code> , который сообщает, что {{cssxref("@keyframes")}} с именем <code>"colorchange"</code> должен использоваться в течение 2 секунд.</p>
+
+<p>Обратите внимание, что каких-либо анимационных эффектов у элемента не наблюдается, т.е. анимации нет.</p>
+
+<h3 id="JavaScript_содержимое">JavaScript содержимое</h3>
+
+<p>Далее мы рассмотрим JavaScript, который дополняет эту работу. Основа этой техники находится в функции play (), которая вызывается, когда пользователь нажимает на кнопку "Выполнить".</p>
+
+<pre class="brush: js">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>Это выглядит странно, не так ли? Это потому, что единственный способ воспроизвести анимацию снова-удалить анимационный эффект, позволить документу пересчитать стили так, чтобы он знал, что вы это сделали, а затем добавить анимационный эффект обратно в элемент. Чтобы это произошло, мы должны быть креативными.</p>
+
+<p>Вот что происходит, когда вызывается функция <code>play()</code> :</p>
+
+<ol>
+ <li>Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс <code>"changing"</code> , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.</li>
+ <li>Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}}, указывающую обратный вызов. Наш обратный вызов выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! </li>
+ <li>Наш обратный вызов ловко вызывает <code>requestAnimationFrame()</code> второй раз! На этот раз обратный вызов выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот обратный вызов добавляет класс <code>"changing"</code> обратно в элемент, так что перерисовка снова запустит анимацию.</li>
+</ol>
+
+<p>Конечно, нам также нужно добавить обработчик событий к нашей кнопке "выполнить", чтобы она действительно что-то делала:</p>
+
+<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p>
+
+<h2 id="Остановка_анимации">Остановка анимации</h2>
+
+<p>Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:</p>
+
+<ol>
+ <li>Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на <code>animation-direction: alternate</code>. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.</li>
+ <li>Используйте JavaScript и очистите анимацию, используемую при запуске события<code>animationiteration</code> .</li>
+</ol>
+
+<p>Следующая демонстрация показывает, как вы могли бы достичь вышеупомянутой техники JavaScript:</p>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Click me to stop&lt;/h1&gt;
+</pre>
+
+<pre class="brush: js">let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) =&gt; {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =&gt;
+  watchme.addEventListener('animationiteration', listener, false)
+)
+</pre>
+
+<p>Demo <a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">https://jsfiddle.net/morenoh149/5ty5a4oy/</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>
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
new file mode 100644
index 0000000000..750bbe96f3
--- /dev/null
+++ b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html
@@ -0,0 +1,2628 @@
+---
+title: Генератор Border-image
+slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.</p>
+
+<div style="display: none;">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
+
+<p> </p>
diff --git a/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html b/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html
new file mode 100644
index 0000000000..71f94831f0
--- /dev/null
+++ b/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html
@@ -0,0 +1,1599 @@
+---
+title: Border-radius генератор
+slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генератор
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.</p>
+
+<div style="display: none;">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox &gt; label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY &amp;&amp; this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
+
+<p> </p>
diff --git a/files/ru/web/css/css_background_and_borders/index.html b/files/ru/web/css/css_background_and_borders/index.html
new file mode 100644
index 0000000000..87b26bd607
--- /dev/null
+++ b/files/ru/web/css/css_background_and_borders/index.html
@@ -0,0 +1,154 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Background_and_Borders
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt>
+ <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt>
+ <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html b/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html
new file mode 100644
index 0000000000..1e7732dd04
--- /dev/null
+++ b/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html
@@ -0,0 +1,52 @@
+---
+title: Множественные фоны
+slug: Web/CSS/CSS_Background_and_Borders/Множественные_фоны
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p><span class="seoSummary">С помощью <a href="/en/CSS/CSS3" title="CSS3">CSS3</a> вы можете применить несколько фонов к элементам. Они будут располагаться поверх друг друга: фон, заданный первым - в самом верху, последний фон - в самом низу.</span></p>
+
+<p>Задать множественные фоны легко:</p>
+
+<pre class="brush: css">.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>Вы можете сделать это сокращенным {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере три фона: логотип Firefox, <a href="/en/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">линейный градиент</a> и изображение пузырей:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="multi_bg_example"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.multi_bg_example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}</pre>
+
+<h2 id="Результат">Результат</h2>
+
+<p>(If image does not appear in CodePen, click the TIdy button in the CSS section)</p>
+
+<p>{{EmbedLiveSample('Example','100%','400')}}</p>
+
+<p>Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идет градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a></li>
+</ul>
diff --git a/files/ru/web/css/css_basic_user_interface/index.html b/files/ru/web/css/css_basic_user_interface/index.html
new file mode 100644
index 0000000000..34c7874266
--- /dev/null
+++ b/files/ru/web/css/css_basic_user_interface/index.html
@@ -0,0 +1,74 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_Basic_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Basic User Interface</strong> is a CSS module that lets you define the rendering and functionality of features related to the user interface.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("outline")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-offset")}}</li>
+ <li>{{CSSxRef("resize")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">Using URL values for the <code>cursor</code> property</a></dt>
+ <dd>Explains how a URL can be used with the {{CSSxRef("cursor")}} property to produce custom cursors.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Basic UI")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "ui.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html b/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html
new file mode 100644
index 0000000000..c629b7bffd
--- /dev/null
+++ b/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html
@@ -0,0 +1,120 @@
+---
+title: Использование URL значений для свойства cursor
+slug: >-
+  Web/CSS/CSS_Basic_User_Interface/Использование_URL_значений_для_свойства_cursor
+tags:
+  - CSS
+  - Gecko
+  - Справка
+  - справочник
+translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+---
+<div>{{cssref}}</div>
+
+<p><a href="/en-US/docs/Mozilla/Gecko">Gecko</a> 1.8 (<a href="/en-US/Firefox/Releases/1.5">Firefox 1.5</a>, SeaMonkey 1.0) поддерживает URL-значения для CSS свойства {{cssxref("cursor")}} в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.</p>
+
+<h3 id="Синтаксис">Синтаксис</h3>
+
+<p>Базовый (CSS 2.1) синтаксис для этого свойства:</p>
+
+<pre class="syntaxbox">cursor:  [&lt;url&gt;,]* ключевое_слово</pre>
+
+<p>Это означает, что устанавливать можно любое количество URL'ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определеннымы спецификацией CSS, таких как <code>auto</code> или <code>pointer</code>.</p>
+
+<p>Например, такая последовательность значений допустима:</p>
+
+<pre class="brush: css;">cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;</pre>
+
+<p>В первую очередь браузер пытается загрузить <em>foo.cur</em>. Если такой файл отсутствует или его форма не допустим по каким-то другим причинам, то дальше загружается <em>bar.gif</em>. И если он также не может быть использован, будет использовано значение <code>auto</code>.</p>
+
+<p>Поддержка CSS 3 синтаксиса для указания курсора была добавлена в Gecko 1.8 (Firefox 1.5):</p>
+
+<pre class="syntaxbox">cursor:  [&lt;uri&gt; [&lt;x&gt; &lt;y&gt;]?,]* ключевое_слово</pre>
+
+<p>Это позволяет устанавливать координаты смещения курсора, которые буду зафиксированы на границах курсора. Если координаты не указаны, то они считываются непосредственно из файла (для CUR и XBM файлов) или же устанавливаются в левый верхний угол изображения.</p>
+
+<p>Пример CSS 3 синтаксиса:</p>
+
+<pre class="brush: css;">.foo  {
+  cursor:  auto;
+  cursor:  url(cursor1.png) 4 12, auto;
+}
+
+.bar  {
+  cursor:  pointer;
+  cursor:  url(cursor2.png) 2 2, pointer;
+}
+
+/* откатываются на 'auto' и 'pointer' в IE, но должны быть установлены отдельны */
+</pre>
+
+<p>Первое число определяет координату по оси x, а вторая - по оси y. Данный пример сместит изображение на точку (4,12) относительно левого верхнего угла (0,0).</p>
+
+<h3 id="Ограничения">Ограничения</h3>
+
+<p>Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с Gecko 2.0 {{geckoRelease("2.0")}}, Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом <code>SVG</code> узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.</p>
+</div>
+
+<p>В Gecko (Firefox) максимальный размер курсора - 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться рамером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.</p>
+
+<p>(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32x32 пикселя. Это исправляется в более новых версиях.)</p>
+
+<p>Прозрачные курсоры не поддерживаются в версиях Windows ниже XP. Это ограничение для операционной системы. Прозрачность работает на любых платформах.</p>
+
+<p>URL в качестве курсора поддерживаются в Windows, OS/2, и Linux (с использованием GTK+ 2.4 или выше) версиях Mozilla. Поддержка Mac OS X была добавлена в Gecko 2 (Firefox 4).</p>
+
+<h3 id="Совместимость_с_другими_браузерами">Совместимость с другими браузерами</h3>
+
+<p>Microsoft Internet Explorer 6.0 также поддерживает URI значения для свойства <code>cursor</code>. Тем не менее:</p>
+
+<ul>
+ <li>IE поддерживает только CUR и ANI форматы.</li>
+ <li>IE не поддерживает CSS 3 синтаксис с x- и y-координатами. Изображение курсора и дальнейшее свойство игнорируются.</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Браузер</th>
+   <th>Ранняя версия</th>
+   <th>Форматы</th>
+   <th>x-y-координаты</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>6.0</strong></td>
+   <td><code>.cur | .ani</code></td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko), Windows и Linux</td>
+   <td><strong>1.5</strong> (1.8)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td>1.5 (1.8)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>4.0</strong> (2.0)</td>
+   <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
+   <td>(Gecko 2.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td rowspan="2">Safari (Webkit)</td>
+   <td><strong>3.0</strong> (522-523)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td rowspan="2">3.0 (522-523)</td>
+  </tr>
+  <tr>
+   <td colspan="2">Начиная с OS X 10.5, Safari (Mac) поддерживает <code> .cur </code>файлы</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
new file mode 100644
index 0000000000..0dc1ecbeca
--- /dev/null
+++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
@@ -0,0 +1,119 @@
+---
+title: Выравнивание блоков в разметке Flexbox
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+tags:
+  - CSS
+  - flexbox
+  - выравнивание блоков
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Спецификация <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание Блоков</a> подробно описывает, как выравнивание работает при использовании различных способов разметки.</span> <span title="">На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox.</span> <span title="">Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, ее следует читать вместе с основной страницей <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">выравнивания блоков</a>, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.</span></span></p>
+
+<h2 id="Основной_пример">Основной пример</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В этом примере три элемента flex выровнены по главной оси с помощью атрибута {{cssxref ("justify-content")}} и по поперечной оси с помощью атрибута {{cssxref ("align-items")}}.</span> <span title="">Первый элемент переопределяет значения <code>align-items</code>, устанавливая значение атрибута {{cssxref ("align-self")}} в  <code>center</code>.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Оси_и_атрибут_flex-direction">Оси и атрибут flex-direction</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Разметка flexbox следует согласно режиму чтения документа (<a href="https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode">writing mode</a>), поэтому, если вы используете английский язык и устанавливаете атрибут {{cssxref ("justify-content")}} в значение <code>flex-end</code>,  то элементы будут выровнены по концу flex контейнера.</span> <span title="">Если вы работаете со значением атрибута {{cssxref ("flex-direction")}}, установленным в <code>row</code>, то выравнивание будет происходить в линейном направлении.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Однако, работая с разметкой flexbox, вы можете изменить поведение главной оси, установив значение атрибута <code>flex-direction</code> в <code>column</code>.</span> <span title="">В этом случае, атрибут <code>justify-content</code> будет выравнивать элементы в направлении блока.</span> <span title="">Поэтому проще всего думать о главной и поперечной осях при работе с разметкой Flexbox следующим образом:</span></span></p>
+
+<ul>
+ <li>Главная ось = направление согласно атрибуту <code>flex-direction</code> = выравнивание через атрибут <code>justify-content</code></li>
+ <li>Поперечная ось = проходит поперек главной оси = выравниваие через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li>
+</ul>
+
+<h3 id="Выравнивание_по_Главной_Оси">Выравнивание по Главной Оси</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<h3 id="Выравнивание_по_Поперечной_Оси">Выравнивание по Поперечной Оси</h3>
+
+<ul>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<h3 id="Отсутствие_атрибута_justify-self_в_разметке_Flexbox">Отсутствие атрибута justify-self в разметке Flexbox</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">При использовании разметки flexbox, главная ось работает с нашим контентом как с группой.</span> <span title="">Количество места, необходимого для размещения элементов, рассчитывается, а оставшееся пространство становится доступным для заполнения.</span> <span title="">Атрибут <code>justify-content</code> контролирует использование оставшегося пространства.</span> <span title="">Если установить атрибут <code>justify-content</code> в значение <code>flex-end</code>, то дополнительное пространство заполнится перед элементами, если установить атрибут <code>justify-content</code> в значение <code>space-around</code>, то пространство заполнится с обеих сторон элемента в этом измерении и т. д.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Это означает, что атрибут <code>justify-self</code> нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Использовать атрибут <code>align-self</code> имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещен и в начало, и в конец.</span></span></p>
+
+<h2 id="Выравнивание_и_свойство_margin_auto">Выравнивание и свойство margin: auto</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значеним <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своем измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Установив значение атрибута{{cssxref ("margin")}} в <code>auto</code> для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделенную навигацию.</span> <span title="">Это хорошо работает с разметкой flexbox и свойствами выравнивания.</span> <span title="">Как только для элемента со свойством <code>margin: auto</code> не остается свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p>
+
+<h2 id="Атрибуты_разрыва">Атрибуты разрыва</h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<h3 id="Создание_разрыва_фиксированного_размера_между_элементами">Создание разрыва фиксированного размера между элементами</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">На главной оси атрибут <code>column-gap</code> будет создавать разрывы фиксированного размера между соседними элементами.</span><br>
+ <br>
+ <span title="">На поперечной оси атрибут <code>row-gap</code> создает разрыв между соседними flex линиями, поэтому необходимо также установить атрибут <code>flex-wrap</code> в значение <code>wrap</code>, чтобы применить эффект.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.</span></span></p>
+</div>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<h3 id="CSS_Атрибуты">CSS Атрибуты</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Словарь_терминов">Словарь терминов</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Cross axis")}}</li>
+ <li>{{Glossary("Main axis")}}</li>
+</ul>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Выравнивание в разметке flexbox</a></li>
+</ul>
+
+<h2 id="Внешние_ресурсы">Внешние ресурсы</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Шпаргалка по выравниваю блоков</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS разметки Grid, Flexbox и выравнивание блоков</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Размышления о частичной реализации выравнивания блоков</a></li>
+</ul>
diff --git a/files/ru/web/css/css_box_alignment/index.html b/files/ru/web/css/css_box_alignment/index.html
new file mode 100644
index 0000000000..90d8eea440
--- /dev/null
+++ b/files/ru/web/css/css_box_alignment/index.html
@@ -0,0 +1,245 @@
+---
+title: Выравнивание полей CSS
+slug: Web/CSS/CSS_Box_Alignment
+translation_of: Web/CSS/CSS_Box_Alignment
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.</p>
+</div>
+
+<h2 id="Старые_методы_выравнивания">Старые методы выравнивания</h2>
+
+<p>У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя {{cssxref("text-align")}}, центральные блоки, используя auto {{cssxref("margin")}}s, а в макетах таблицы или встроенного блока, используя {{cssxref("vertical-align")}} свойство. Выравнивание текста теперь покрывается модулями <a href="https://www.w3.org/TR/css-inline-3/">Inline Layout</a> и <a href="https://www.w3.org/TR/css-text-3/">CSS Text</a>, и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.</p>
+
+<p>Если вы изначально узнали <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, вы можете считать эти свойства частью спецификации Flexbox и некоторые из свойств действительно перечислены в Level 1 Flexbox. Однако в спецификации отмечается, что спецификация Box Alignment должна рассматриваться, поскольку она может добавить дополнительные возможности по сравнению с тем, что в настоящее время находится в Flexbox.</p>
+
+<h2 id="Основные_примеры">Основные примеры</h2>
+
+<p>Следующие примеры демонстрируют, как некоторые из Box Alignment Properties применяются в <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid</a> and <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>.</p>
+
+<h3 id="Пример_выравнивания_раскладки_сетки_CSS">Пример выравнивания раскладки сетки CSS</h3>
+
+<p>В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки {{cssxref("align-self")}} в центр.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+
+<h3 id="Пример_выравнивания_Flexbox">Пример выравнивания Flexbox</h3>
+
+<p>В этом примере три элемента гибкости выровнены по главной оси с использованием <code>justify-content</code> и на поперечной оси с использованием <code>align-items</code>. Первый элемент переопределяет <code>align-items</code>, заданные в группе <code>align-self</code> по <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Ключевые_понятия_и_терминология">Ключевые понятия и терминология</h2>
+
+<p>Спецификация описывает некоторую терминологию выравнивания, чтобы упростить обсуждение этих свойств выравнивания вне их реализации в рамках конкретного метода компоновки. Существуют также некоторые ключевые концепции, которые являются общими для всех методов макета.</p>
+
+<h3 id="Связь_с_режимами_записи">Связь с режимами записи</h3>
+
+<p>Выравнивание связано с режимами записи, когда мы выравниваем элемент, который мы не рассматриваем, если мы сопоставляем его с физическими размерами сверху, справа, снизу и слева. Вместо этого мы описываем выравнивание с точки зрения начала и конца конкретного измерения, с которым мы работаем. Это гарантирует, что выравнивание работает так же, как в режиме записи, который имеет документ.</p>
+
+<h3 id="Два_измерения_выравнивания">Два измерения выравнивания</h3>
+
+<p>При использовании свойств выравнивания ячеек вы выровняете содержимое по одной из двух осей - inline (или main) оси и block (или cross) оси. Внутренняя ось - это ось, по которой используются слова в потоке предложения в режиме записи - для английского языка, например, встроенная ось горизонтальна. Ось блока - это ось, вдоль которой выложены блоки, такие как элементы абзаца, и проходит по оси Inline.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png" style="height: 260px; width: 480px;"></p>
+
+<p>При выравнивании элементов на встроенной оси вы будете использовать свойства, начинающиеся с <code>justify-</code>:</p>
+
+<ul>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<p>При выравнивании элементов на оси блока вы будете использовать свойства, которые начинаются с <code>align-</code>:</p>
+
+<ul>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<p>Flexbox добавляет дополнительное усложнение в том, что указанное выше верно, когда {{cssxref("flex-direction")}} установлено в <code>row</code>. Свойства меняются местами, когда flexbox установлен в <code>column</code>. Поэтому при работе с flexbox легче думать о главной и поперечной оси, а не о линии и блоке. Свойства <code>justify-</code> всегда используются для выравнивания по главной оси, <code>align-</code> на поперечной оси.</p>
+
+<h3 id="The_alignment_subject">The alignment subject</h3>
+
+<p><strong>Объект выравнивания</strong> - это то, что выровнено. Для <code>justify-self</code>, или <code>align-self</code>, или при настройке этих значений как группы с <code>justify-items</code> или <code>align-items</code> это будет поле элемента, в котором используется это свойство. Свойства <code>justify-content</code> и <code>align-content</code> различаются для каждого метода макета.</p>
+
+<h3 id="The_alignment_container">The alignment container</h3>
+
+<p><strong>Контейнер выравнивания</strong> - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.</p>
+
+<p>На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>
+
+<h3 id="Fallback_alignment">Fallback alignment</h3>
+
+<p>Если вы установите выравнивание, которое не может быть выполнено, тогда <strong>возвратное выравнивания</strong> вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода.</p>
+
+<h2 id="Типы_выравнивания">Типы выравнивания</h2>
+
+<p>Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.</p>
+
+<ul>
+ <li><strong>Positional alignment</strong> (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.</li>
+ <li><strong>Baseline alignment</strong> (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.</li>
+ <li><strong>Distributed alignment</strong> (распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.</li>
+</ul>
+
+<h3 id="Значения_ключевых_слов_позиционирования">Значения ключевых слов позиционирования</h3>
+
+<p>Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с <code>justify-content</code> и <code>align-content</code>, а также для самовыравнивания с <code>justify-self</code> и <code>align-self</code>.</p>
+
+<ul>
+ <li><code>center</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>self-start</code></li>
+ <li><code>self-end</code></li>
+ <li><code>flex-start</code> for Flexbox only</li>
+ <li><code>flex-end</code> for Flexbox only</li>
+ <li><code>left</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>Помимо физических значений <code>left</code> и <code>right</code>, которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.</p>
+
+<p>Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение <code>justify-content</code> <code>start</code>, это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение <code>start</code> приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.</p>
+
+<p>Оба этих примера имеют <code>justify-content: start</code>, однако местоположение начала изменяется в соответствии с режимом записи.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>
+
+<h3 id="Исходное_выравнивание">Исходное выравнивание</h3>
+
+<p>Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью <code>justify-content</code> и <code>align-content</code>, а также для самовыравнивания с <code>justify-self</code> и <code>align-self</code>.</p>
+
+<ul>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>Исходное выравнивание содержимого - указание значения выравнивания базовой линии для <code>justify-content</code> или <code>align-content</code> - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.</p>
+
+<p>Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование <code>justify-self</code> или <code>align-self</code> или при настройке этих значений в виде группы с <code>justify-items</code> и <code>align-items</code>.</p>
+
+<h3 id="Distributed_alignment">Distributed alignment</h3>
+
+<p><strong>Ключевые слова расспеределенного выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>Например, элементы Flex Layout сначала выровнены с использованием <code>flex-start.</code> Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с <code>flex-direction</code> в виде <code>row</code> элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>
+
+<p>Если вы устанавливаете <code>justify-content: space-between</code> в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>
+
+<p>Для того, чтобы эти ключевые слова вступили в силу, должно быть доступно пространство в измерении, для которого вы хотите выровнять элементы. Без места, нечего распространять.</p>
+
+<h2 id="Выравнивание_переполнения">Выравнивание переполнения</h2>
+
+<p><code>safe</code> и <code>unsafe</code> ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово <code>safe</code> будет выравниваться для <code>start</code> в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.</p>
+
+<p>Если вы укажете <code>unsafe</code>, выравнивание будет выполнено, даже если это приведет к такой потере данных.</p>
+
+<h2 id="Пробелы_между_boxes">Пробелы между boxes</h2>
+
+<p>Спецификация выравнивания коробки также включает свойства <code>gap</code>, <code>row-gap</code> и <code>column-gap</code> . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом.</p>
+
+<p>Свойство <code>gap</code> является сокращением для <code>row-gap</code> и <code>column-gap</code>, что позволяет сразу установить эти свойства:</p>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<p>В приведенном ниже примере макет сетки использует сокращенную <code>gap</code>, чтобы установить разрыв <code>10px</code> между дорожками строк и <code>2em</code> разрыв между дорожками столбцов.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>
+
+<p>В этом примере я использую свойство {{cssxref("grid-gap")}} в дополнение к {{cssxref("gap")}}. Первоначальные свойства зазора были предварительно префиксными <code>grid-</code> в спецификации Grid Layout, а некоторые браузеры поддерживают только эти префиксные версии.</p>
+
+<ul>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<p>Префиксные версии будут поддерживаться как псевдоним неподписанных, однако вы всегда можете удвоить так, как это было бы с префиксами поставщика, добавив свойство <code>grid-gap</code>, а затем свойство <code>gap</code> с теми же значениями.</p>
+
+<p>Кроме того, имейте в виду, что другие вещи могут увеличить визуальный промежуток, отображаемый, например, используя ключевые слова распределения пространства или добавляя поля к элементам.</p>
+
+<h2 id="Страницы_детализирующие_индивидуальные_свойства_выравнивания">Страницы, детализирующие индивидуальные свойства выравнивания</h2>
+
+<p>Поскольку свойства выравнивания полей CSS реализованы по-разному в зависимости от спецификации, с которой они взаимодействуют, обратитесь к следующим страницам для каждого типа макета для получения подробных сведений о том, как использовать с ним свойства выравнивания:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box alignment in Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">Box alignment in multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">Box alignment for block, absolutely positioned and table layout</a></li>
+</ul>
+
+<h2 id="Справка">Справка</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_Entries">Glossary Entries</h3>
+
+<div class="index">
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis">Cross axis</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis">Main axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Alignment_Container">Alignment container</a></li>
+ <li><a href="/en-US/docs/Glossary/Alignment_Subject">Alignment subject</a></li>
+ <li><a href="/en-US/docs/Glossary/Fallback_Alignment">Fallback alignment</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li>CSS Flexbox guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Grid guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li>
+</ul>
+
+<h2 id="External_Resources">External Resources</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box alignment cheatsheet</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS Grid, Flexbox and Box alignment</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Thoughts on partial implementations of Box alignment</a></li>
+</ul>
diff --git a/files/ru/web/css/css_box_model/box-shadow_generator/index.html b/files/ru/web/css/css_box_model/box-shadow_generator/index.html
new file mode 100644
index 0000000000..3f46cf53ba
--- /dev/null
+++ b/files/ru/web/css/css_box_model/box-shadow_generator/index.html
@@ -0,0 +1,2884 @@
+---
+title: Генератор теней
+slug: Web/CSS/CSS_Box_Model/Box-shadow_generator
+tags:
+  - CSS3
+  - Тень
+  - инструменты
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.</p>
+
+<div style="display: none;">
+<h2 id="box-shadow_generator" name="box-shadow_generator">Генератор box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; элементы &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Параметры элемента&lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    CSS-код &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'тень ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
+
+<p><strong>Похожий инструмент: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Генератор CSS Box Shadow</a></p>
diff --git a/files/ru/web/css/css_box_model/index.html b/files/ru/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..cb4dd91343
--- /dev/null
+++ b/files/ru/web/css/css_box_model/index.html
@@ -0,0 +1,167 @@
+---
+title: CSS Box Model
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Box Model</strong> is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties">Other properties</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides_and_tools">Guides and tools</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explains one of the fundamental concept of CSS, the box model: describes the meaning of the margin, padding, as well as the different areas of a box.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt>
+ <dd>An interactive tool that allows to visually create shadows and to generate the needed syntax for the {{cssxref("box-shadow")}} property.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..ce82582529
--- /dev/null
+++ b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -0,0 +1,90 @@
+---
+title: Схлопывание внешних отступов
+slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+tags:
+  - CSS
+  - Руководство
+  - Справка
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<p>Отступы <a href="/en-US/docs/Web/CSS/margin-top">margin-top</a> и <a href="/en-US/docs/Web/CSS/margin-bottom">margin-bottom</a> иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны).<br>
+ Это поведение известно как <strong>схлопывание внешних отступов (margin collapsing).</strong><br>
+ Обратите внимание, что отступы <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">плавающих </a>и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute">абсолютно позиционированных</a> элементов никогда не схлопываются.</p>
+
+<p>Схлопывание внешних отступов происходит в трёх случаях:</p>
+
+<dl>
+ <dt>Соседние элементы (siblings)</dt>
+ <dd>Схлопываются отступы соседних элементов  (за исключением случая, когда к последнему элементу применено свойство {{cssxref("clear")}}).</dd>
+ <dt>Родительский и первый/последний дочерние элементы</dt>
+ <dd>Если отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения {{cssxref("margin-top")}} родительского элемента, от {{cssxref("margin-top")}} одного или нескольких его дочерних элементов/блоков или отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}}, {{cssxref("min-height")}} или {{cssxref("max-height")}} для отделения отступов {{cssxref("margin-bottom")}} родительского блока от {{cssxref("margin-bottom")}} отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.</dd>
+ <dt>Пустые блоки</dt>
+ <dd>Если отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}} или {{cssxref("min-height")}} для отделения {{cssxref("margin-top")}} верхнего отступа этого блока от его {{cssxref("margin-bottom")}} нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.</dd>
+</dl>
+
+<p><u>На заметку:</u></p>
+
+<ul>
+ <li>Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.</li>
+ <li>Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последниего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.</li>
+ <li>При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.</li>
+ <li>Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.</li>
+ <li>Внешние отступы <a href="/en-US/docs/Web/CSS/float">плавающих</a> и  <a href="/en-US/docs/Web/CSS/position">абсолютно позиционируемых</a> элементов никогда не схлопываются.</li>
+</ul>
+
+<h2 id="Примеры"><a id="Examples" name="Examples">Примеры</a></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Нижний отступ этого абзаца схлопнулся …<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>1.2rem<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;Этот родительский элемент содержит два</span></span></code> <code>абзаца</code><code class="language-html">!
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Этот абзац имеет отступ</code><code class="language-html"> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>.4rem<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span></code> <code class="language-html">между ним и текстом выше.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Н</span></span>ижний отступ этого абзаца схлопывается с отступом родителя, принимая значение <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>2rem<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Этот абзац имеет отступ</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>2rem<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span> от элемента выше.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">rem</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> lavender<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">p</span> <span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">.4</span><span class="token unit">rem</span> <span class="number token">0</span> <span class="number token">1.2</span><span class="token unit">rem</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> yellow<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Примеры', 'auto', 350)}}</p>
+
+<h2 id="Спецификации"><a id="Specifications" name="Specifications">Спецификации</a></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также"><a id="See also" name="See also">Смотрите также</a></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a> </li>
+</ul>
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
new file mode 100644
index 0000000000..105c608af3
--- /dev/null
+++ b/files/ru/web/css/css_colors/color_picker_tool/index.html
@@ -0,0 +1,3221 @@
+---
+title: Инструмент выбора цвета
+slug: Web/CSS/CSS_Colors/Color_picker_tool
+tags:
+  - CSS
+  - инструменты
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+        &lt;div id="palette" class="block"&gt;
+            &lt;div id="color-palette"&gt;&lt;/div&gt;
+            &lt;div id="color-info"&gt;
+                &lt;div class="title"&gt; CSS Color &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="picker" class="block"&gt;
+            &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+            &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+            &lt;div id="controls"&gt;
+                &lt;div id="delete"&gt;
+                    &lt;div id="trash-can"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="canvas" data-tutorial="drop"&gt;
+            &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+
+<p>{{CSSRef}}</p>
+
+<p>Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зеленый / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).</p>
+
+<p>Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой "пипетка" можно переключаться между HSL или HSV форматами.</p>
+
+<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p>
+
+<p> </p>
diff --git a/files/ru/web/css/css_colors/index.html b/files/ru/web/css/css_colors/index.html
new file mode 100644
index 0000000000..065d14a98c
--- /dev/null
+++ b/files/ru/web/css/css_colors/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS Colors
+slug: Web/CSS/CSS_Colors
+tags:
+  - CSS
+  - Цвета
+  - Цвета в CSS
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Colors</strong> - модуль в CSS, который работает с цветами, типами цветов и прозрачностью.</p>
+
+<h2 id="Руководство">Руководство</h2>
+
+<h3 id="Свойства">Свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="Типы_данных_в_CSS">Типы данных в CSS</h3>
+
+<p>{{cssxref("&lt;color&gt;")}}</p>
+
+<h2 id="Руководства">Руководства</h2>
+
+<p><em>Нет.</em></p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>В CSS градиенты не цвета, а <a href="/en-US/docs/Web/CSS/CSS_Images">изображения</a>.</li>
+</ul>
diff --git a/files/ru/web/css/css_columns/index.html b/files/ru/web/css/css_columns/index.html
new file mode 100644
index 0000000000..ea227ced5d
--- /dev/null
+++ b/files/ru/web/css/css_columns/index.html
@@ -0,0 +1,114 @@
+---
+title: CSS Columns
+slug: Web/CSS/CSS_Columns
+tags:
+  - CSS
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Columns</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flow between columns and how gaps and rules are handled.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Using CSS multi-column layouts</a></dt>
+ <dd>Step-by-step tutorial about how to build layouts using several columns.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix('-webkit')}}</td>
+   <td>{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}</td>
+   <td>10</td>
+   <td>11.1<br>
+    15{{property_prefix('-webkit')}}</td>
+   <td>3.0 (522){{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1{{property_prefix('-webkit')}}</td>
+   <td>{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}</td>
+   <td>10</td>
+   <td>11.5<br>
+    32{{property_prefix('-webkit')}}</td>
+   <td>3.2{{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
new file mode 100644
index 0000000000..8a4e3ce28b
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
@@ -0,0 +1,112 @@
+---
+title: Обратная совместимость Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Flexbox очень хорошо поддерживается современными браузерами, однако есть несколько проблем, с которыми вы могли столкнуться. В этом руководстве мы рассмотрим, насколько хорошо flexbox поддерживается браузерами, а так же некоторые потенциальные проблемы, ресурсы и методы для создания обходных путей и запасных вариантов.</p>
+
+<h2 id="История_flexbox">История flexbox</h2>
+
+<p>Как  и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.</p>
+
+<p>Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы всеравно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p>
+
+<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">В 2009</a> спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать <code>display: box</code> и несколько <code>box-*</code> свойств, которые делали то, что сегодня вы понимаете под flexbox.</p>
+
+<p>Очередное <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">обновление</a> спецификации поменяло синтаксис на <code>display: flexbox</code> — и опять с вендорными префиксами.</p>
+
+<p>В конечном счете спецификация была обновлена, чтобы определить <code>display: flex</code> как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновленной версии спецификации отличная.</p>
+
+<p>Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде  <code>display: box</code> или <code>display: flexbox</code>, то это уже устаревшая информация.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Браузеры отлично поддерживают flexbox, и на данный момент большинству из них не нужны префиксы для этого. Safari последним из основных браузеров избавился от префиксов после релиза Safari 9 в 2015. Два браузера, о которых вам нужно помнить для обеспечения кроссбраузерности, это:</p>
+
+<ul>
+ <li>Internet Explorer 10, который внедрил <code>display: flexbox</code> версию спецификации с префиксом <code>-ms-</code>.</li>
+ <li>UC Browser, который все еще поддерживает спецификацию версии 2009 год с <code>display: box</code> и префиксом <code>-webkit-</code>.</li>
+</ul>
+
+<p>Также возьмите на заметку, что Explorer 11 поддерживает современный <code>display: flex,</code> однако не без багов.</p>
+
+<h2 id="Common_issues">Common issues</h2>
+
+<p>The majority of issues with flexbox relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. If you are trying to ensure backwards compatibility with old versions of browsers, and in particular IE10 and 11, the <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed — which can save you many hours of puzzling.</p>
+
+<p>If you want to include very old browsers with flexbox support then you can include the vendor prefixes in your CSS in addition to the unprefixed version. This is becoming less and less of a requirement today as support is widespread.<code> </code></p>
+
+<pre class="brush: css">.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}</pre>
+
+<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. You can also check <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> for information about when prefixes were removed in browsers to make your decision.</p>
+
+<h2 id="Useful_fallback_techniques">Useful fallback techniques</h2>
+
+<p>Given that flexbox usage is initiated with value of the {{cssxref("display")}} property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. The specification defines what happens if you use other layout methods on an element which then becomes a flex item.</p>
+
+<h3 id="Floated_items">Floated items</h3>
+
+<blockquote>
+<p>“float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Flex Containers</a></p>
+</blockquote>
+
+<p>In the following live example, I have floated two blocks and then set <code>display: flex</code> on the container. The items are now flex items, which means they stretch to equal height. Any float behaviour does not apply.</p>
+
+<p>You can test the fallback behaviour by removing <code>display: flex</code> from the wrapper.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p>
+
+<h3 id="display_inline-block">display: inline-block</h3>
+
+<p>Once an <code>inline-block</code> item becomes a flex item, it is <code>block</code>ified and so behavior of <code>display: inline-block</code> like preserving white space between items no longer applies.</p>
+
+<p>Remove <code>display: flex</code> to see the fallback behavior. You'll see white space added between the items, which is what happens when using <code>display: inine-block</code> as it prefers white space like other inline items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p>
+
+<h3 id="display_table-">display: table-<em> </em></h3>
+
+<p>The CSS table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as Internet Explorer 8.</p>
+
+<p>If you use <code>display: table-cell</code> on an item in your HTML it takes on the styling of an HTML table cell. CSS creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the HTML table row, and a second one to represent the table element itself, You can’t see or style these anonymous boxes; they are there purely to fix up the tree.</p>
+
+<p>If you then declare <code>display: flex</code> on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.</p>
+
+<blockquote>
+<p>“Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Flex Items</a></p>
+</blockquote>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p>
+
+<h3 id="The_vertical-align_property">The vertical-align property</h3>
+
+<p>The live example below demonstrates use of the {{cssxref("vertical-align")}} property along with <code>display: inline-block</code>. Both <code>display: table-cell</code> and <code>display: inline-block</code> allow for the use of this property. Use of <code>vertical-align</code> enables vertical alignment prior to flexbox. The property is ignored by flexbox and so you can use it in conjunction with <code>display: table-cell</code> or <code>display: inline-block</code> as a fallback and then safely use box alignment properties in flexbox instead.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p>
+
+<h2 id="Feature_Queries_and_flexbox">Feature Queries and flexbox</h2>
+
+<p>You can use <a href="/en-US/docs/Web/CSS/%40supports">feature queries</a> to detect flexbox support:</p>
+
+<pre class="brush: css">@supports (display: flex) {
+  // code for supporting browsers
+}</pre>
+
+<p>Note that Internet Explorer 11 does not support feature queries yet <em>does</em> support flexbox. If you decide the IE11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support. Remember that if you want to include versions of browsers that had vendor-prefixed flexbox you would need to include the prefixed version in your feature query. The following feature query would include UC Browser, which supports feature queries and old flexbox syntax, prefixed:</p>
+
+<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) {
+  // code for supporting browsers
+}</pre>
+
+<p>For more information about using Feature Queries see <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a> on the Mozilla Hacks blog.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>While I’ve spent some time in this guide going through potential issues and fallbacks, flexbox is very much ready for you to be using in production work. This guide will help you in those cases where you do come across an issue or have the requirement to support older browsers.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
new file mode 100644
index 0000000000..347d429eb4
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
@@ -0,0 +1,228 @@
+---
+title: Основные понятия Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS модуль раскладки Flexible Box</strong>, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье дается краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.</p>
+
+<p>Когда мы описываем flexbox как одномерно-направленный, мы  имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.</p>
+
+<h2 id="Flexbox_две_оси">Flexbox: две оси</h2>
+
+<p>При работе с flexbox нужно мыслить с точки зрения двух осей – главной оси и побочной оси. Главная ось определяется свойством {{cssxref ("flex-direction")}}, а побочная ось проходит перпендикулярно ей. Все, что мы делаем с flexbox, относится к этим осям, поэтому стоит с самого начала понять, как они работают.</p>
+
+<h3 id="Главная_ось">Главная ось</h3>
+
+<p>Главная ось определяется свойством <code>flex-direction</code>, которая может принимать одно из следующих значений:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Если вы выберете <code>row</code> или <code>row-reverse</code>, ваша главная ось будет проходить в горизонтальном направлении <strong>(inline direction)</strong>.</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>Если вы выберете <code>column</code> или <code>column-reverse</code>, ваша главная ось будет проходить в вертикальном направлении <strong>(block direction)</strong>.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="Побочная_ось">Побочная ось</h3>
+
+<p>Побочная ось проходит перпендикулярно главной оси, поэтому, если свойство <code>flex-direction</code> (главная ось) задано как <code>row</code> или <code>row-reverse</code>, побочная ось будет проходить в вертикальном направлении.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Если свойство <code>flex-direction</code> задано как <code>column</code> или <code>column-reverse</code>, побочная ось будет проходить в горизонтальном направлении.</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Понимание того, с какой осью вы работаете (главная или побочная) очень важно для дальнейшего изучения Flexbox.</p>
+
+<h2 id="Начало_и_конец_строки">Начало и конец строки</h2>
+
+<p>Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы верстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.</p>
+
+<p>Вы можете прочитать больше о взаимосвязи между flexbox и спецификацией Writing Modes в следующей статье, однако следующее описание должно помочь объяснить, почему мы не говорим о левом, правом, верхнем и нижнем направлениях наших flex-элементов.</p>
+
+<p>Если свойству <code>flex-direction</code> задано значение <code>row</code> и вы работаете с английским языком, то начало главной оси будет слева, а конец главной оси – справа.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Если бы вы работаете с арабским языком, то начало главной оси будет справа, а конец главной оси – слева.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>В обоих случаях начало побочной оси находится вверху flex контейнера, а конец – внизу, поскольку оба языка имеют режим горизонтальной записи.</p>
+
+<p>Спустя некоторое время становится естественным думать о начале и конце оси, а не о левом и правом краях. Это будет полезно для вас при работе с другими методами, такими как CSS Grid Layout, которые следуют тем же шаблонам.</p>
+
+<h2 id="Flex_контейнер">Flex контейнер</h2>
+
+<p>Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаем значение <code>flex</code> или <code>inline-flex</code> для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.</p>
+
+<ul>
+ <li>Элементы отображаются в ряд (свойство <code>flex-direction</code> по умолчанию имеет значение <code>row</code>).</li>
+ <li>Позиционирование элементов начинается от начала главной оси.</li>
+ <li>Элементы не растягиваются по основной оси, но могут сжиматься.</li>
+ <li>Элементы будут растягиваться, чтобы заполнить размер побочной оси.</li>
+ <li>Свойству {{cssxref("flex-basis")}} задано значение <code>auto</code>.</li>
+ <li>Свойству {{cssxref("flex-wrap")}} задано значение <code>nowrap</code>.</li>
+</ul>
+
+<p>Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обернуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.</p>
+
+<p>Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p>
+
+<h3 id="Изменение_flex-direction">Изменение flex-direction</h3>
+
+<p>Добавление свойства {{cssxref ("flex-direction")}} в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка <code>flex-direction: row-reverse</code> сохранит порядок отображаения элементов вдоль строки, однако начало и конец строки поменяются местами.</p>
+
+<p>Если изменить значение свойства <code>flex-direction</code> на <code>column</code>, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра <code>column-reverse</code>, начало и конец стобца поменяются местами.</p>
+
+<p>В приведенном ниже примере значение свойства <code>flex-direction</code> установлено как <code>row-reverse</code>. Попробуйте другие значения — <code>row</code>, <code>column</code> и<code>column-reverse</code>, чтобы посмотреть как изменятся элементы контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Многострочный_флекс-контейнер_с_flex-wrap">Многострочный флекс-контейнер с flex-wrap</h2>
+
+<p>Несмотря на то, что флекс-бокс - это однонаправленная модель, есть возможность завернуть наши флекс-элементы в несколько строк. При этом вы должны рассматривать каждую строку как новый флекс контейнер. Распределение пространства будет происходить на этой конкретной линии, не привязываясь к соседним линиям.</p>
+
+<p>Чтобы включить такое поведение, добавьте параметр {{cssxref("flex-wrap")}} со значением <code>wrap</code>. Теперь, как только ваши элементы будут слишком большими для того, чтобы влезать на одну строчку, они будут переноситься на новые строки. Живой пример ниже содержит широкие элементы, у которых общая ширина больше, чем размер контейнера. Так как параметр <code>flex-wrap</code> установлен в значение <code>wrap</code>, элементы переносятся. Если Вы установите значение <code>nowrap</code>, то есть в начальное значение, то элементы ужмутся так, чтобы все элементы поместились на одной строке, потому что у них установлено значение, позволяющее им ужиматься при необходимости. Если им запретить ужиматься, или если они не смогут ужаться достаточно сильно, то при установленном значении <code>nowrap</code> будет происходить переполнение контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>Более подробно эту тема разбирается в статье <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Разбираемся с обёртыванием Flex элементов</a>.</p>
+
+<h2 id="Краткая_запись_направления_и_многострочности_flex-flow">Краткая запись направления и многострочности: flex-flow</h2>
+
+<p>Вы можете указать два свойства <code>flex-direction</code> и <code>flex-wrap</code> в одном {{cssxref("flex-flow")}}. Первое значение свойства определяет <code>flex-direction</code>, второе <code>flex-wrap</code>.</p>
+
+<p>В приведенном ниже примере вы можете изменить первое значение на одно из доступных для <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, а второе на <code>wrap</code> или <code>nowrap</code>, чтобы посмотреть как изменятся элементы контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Свойства_применяемые_к_флекс-элементам">Свойства, применяемые к флекс-элементам</h2>
+
+<p>Управлять поведением флекс-элементов более детально мы можем с помощью их собственных свойств:</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>В этом обзоре мы лишь кратко рассмотрим эти свойства. Чтобы получить более глубокое понимание обратитесь к руководству <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/%D0%9A%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%BE%D1%82%D0%BD%D0%BE%D1%88%D0%B5%D0%BD%D0%B8%D1%8F_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%B2%D0%B4%D0%BE%D0%BB%D1%8C_%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BE%D1%81%D0%B8">Управление соотношением элементов вдоль главной оси</a>.</p>
+
+<p>Чтобы понять как работают эти свойства, прежде нам необходимо разобраться с концепцией <strong>доступного пространства</strong>. Изменяя значения этих флекс свойств, мы влияем на то, как доступное пространство распределяется между нашими элементами. Эта концепция так же важна для выравнивания элементов.</p>
+
+<p>Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остается 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Если вместо этого мы хотим чтобы элементы росли и заполняли собой свободное пространство, нам нужно указать способ распределения оставшегося пространства между элементами. Это как раз то для чего предназначены <code>flex</code> свойства.</p>
+
+<h3 id="Свойство_flex-basis">Свойство <code>flex-basis</code></h3>
+
+<p>Свойство <code>flex-basis</code> определяет размер доступного пространства элемента. Начальное значение этого свойства - <code>auto </code>- в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100px, и этот размер читается браузером как <code>flex-basis</code>.<br>
+ Если элементы не имеют размера, то для размера <code>flex-basis</code> используется размер контента. Вот почему, когда мы просто объявляем <code>display: flex</code> на родительском элементе для создания flex-элементов, все элементы перемещаются в ряд и занимают столько места, сколько им нужно для отображения их содержимого.</p>
+
+<h3 id="Свойство_flex-grow">Свойство <code>flex-grow</code></h3>
+
+<p>With the <code>flex-grow</code> property set to a positive integer, flex items can grow along the main axis from their <code>flex-basis</code>. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.</p>
+
+<p>If we gave all of our items in the example above a <code>flex-grow</code> value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.</p>
+
+<p>The flex-grow property can be used to distribute space in proportion. If we give our first item a <code>flex-grow</code> value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).</p>
+
+<h3 id="Свойство_flex-shrink">Свойство <code>flex-shrink</code></h3>
+
+<p>Where the <code>flex-grow</code> property deals with adding space in the main axis, the <code>flex-shrink</code> property controls how it is taken away. If we do not have enough space in the container to lay out our items and <code>flex-shrink</code> is set to a positive integer the item can become smaller than the <code>flex-basis</code>. As with <code>flex-grow</code> different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for <code>flex-shrink</code> will shrink faster than its siblings that have lower values.</p>
+
+<p>The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.</p>
+
+<div class="note">
+<p>Note that these values for <code>flex-grow</code> and <code>flex-shrink</code> are proportions. Typically if we had all of our items set to flex: <code>1 1 200px</code> and then wanted one item to grow at twice the rate, we would set that item to flex: <code>2 1 200px</code>. However you could use flex: <code>10 1 200px</code> and flex: <code>20 1 200px</code> if you wanted.</p>
+</div>
+
+<h3 id="Краткая_запись_значений_флекс_свойств">Краткая запись значений флекс свойств</h3>
+
+<p>You will very rarely see the <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The <code>flex</code> shorthand allows you to set the three values in this order — <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>The live example below allows you to test out the different values of the flex shorthand; remember that the first value is <code>flex-grow</code>. Giving this a positive value means the item can grow. The second is <code>flex-shrink</code> — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is <code>flex-basis</code>; this is the value the items are using as their base value to grow and shrink from.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p>
+
+<p>There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;positive-number&gt;</code></li>
+</ul>
+
+<p>Setting <code>flex: initial</code> resets the item to the initial values of Flexbox. This is the same as <code>flex: 0 1 auto</code>. In this case the value of <code>flex-grow</code> is 0, so items will not grow larger than their <code>flex-basis</code> size. The value of <code>flex-shrink</code> is 1, so items can shrink if they need to rather than overflowing. The value of <code>flex-basis</code> is <code>auto</code>. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.</p>
+
+<p>Using <code>flex: auto</code> is the same as using <code>flex: 1 1 auto</code>; everything is as with <code>flex:initial</code> but in this case the items can grow and fill the container as well as shrink if required.</p>
+
+<p>Using <code>flex: none</code> will create fully inflexible flex items. It is as if you wrote <code>flex: 0 0 auto</code>. The items cannot grow or shrink but will be laid out using flexbox with a <code>flex-basis</code> of <code>auto</code>.</p>
+
+<p>The shorthand you often see in tutorials is <code>flex: 1</code> or <code>flex: 2</code> and so on. This is as if you used <code>flex: 1 1 0</code>. The items can grow and shrink from a <code>flex-basis</code> of 0.</p>
+
+<p>Try these shorthand values in the live example below.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="Alignment_justification_and_distribution_of_free_space_between_items">Alignment, justification and distribution of free space between items</h2>
+
+<p>A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>The {{cssxref("align-items")}} property will align the items on the cross axis.</p>
+
+<p>The initial value for this property is <code>stretch</code> and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.</p>
+
+<p>You could instead set <code>align-items</code> to <code>flex-start</code> in order to make the items line up at the start of the flex container, <code>flex-end</code> to align them to the end, or <code>center</code> to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which <code>flex-direction</code> has set the flow. The initial value is <code>flex-start</code> which will line the items up at the start edge of the container, but you could also set the value to <code>flex-end</code> to line them up at the end, or <code>center</code> to line them up in the centre.</p>
+
+<p>You can also use the value <code>space-between</code> to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value <code>space-around</code>. With <code>space-around</code>, items have a half-size space on either end. Or, to cause items to have equal space around them use the value <code>space-evenly</code>. With <code>space-evenly</code>, items have a full-size space on either end.</p>
+
+<p>Try the following values of <code>justify-content</code> in the live example:</p>
+
+<ul>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>In the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/index.html b/files/ru/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..d271a2bd8b
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,124 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>Способ CSS раскладки Flexible Box</strong> (CSS Flexible Box Layout или <strong>Flexbox</strong>) — это способ CSS раскладки, означающий <a href="/ru/docs/Web/CSS/CSS_Box_Model">блочную модель CSS</a>, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложеных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.</p>
+
+<h2 id="Базовый_пример">Базовый пример</h2>
+
+<p>В следующем примере контейнер объявлен как <code>display:</code><code>flex</code>, таким образом его три потомка становятся флекс-элементами. Свойству <code>justify-content</code> присвоено значение <code>space-between</code> для того, чтобы, во-первых, задать между элементами равные интервалы по основной оси, и, во-вторых, «примагнитить» первый и последний элементы к левому и правому краям контейнера соответственно. Также можно заметить, что флекс-элементы растянуты перпендикулярно оси; это происходит из-за того, что дефолтным значением <code>align-items</code> является <code>stretch</code>. Так как высота родительского контейнера не задана, элементы растягиваются по высоте и принимают значение высоты самого высокого из них.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt>
+ <dd>Step-by-step tutorial about how to build layouts using this feature.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt>
+ <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<br>
+    11.0</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
new file mode 100644
index 0000000000..0df3168e3a
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
@@ -0,0 +1,100 @@
+---
+title: Разбираемся с обёртыванием Flex элементов
+slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+tags:
+  - CSS
+  - Flex
+  - flexbox
+  - grid
+  - сворачивание элементов
+  - флекс
+  - флексбокс
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Flexbox был разработан как однонаправленный макет, то есть он подразумевает укладывание элементов либо в строчку, либо в столбец, но не одновременно и то и другое. Тем не менее, есть возможность завернуть элементы в несколько строк, создавая новые строки. Это делается с помощью установки свойства {{cssxref("flex-direction")}} (flex-направление) в значение <code>row</code> (строки) или создавая новые столбцы, устанавливая свойство <code>flex-direction</code> в значение <code>column</code> (столбец). В этой статье я объясню, как это работает, зачем это придумали и в каких случаях лучше использовать технологию <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> вместо флекс-боксов.</p>
+
+<h2 id="Делаем_вещи_завёрнутыми">Делаем вещи завёрнутыми</h2>
+
+<p>Значение по умолчанию свойства {{cssxref("flex-wrap")}} равняется <code>nowrap</code>. Это обозначает, что если у вас есть набор флекс-элементов, которые слишком широки для их контейнера, то они будут его переполнять. Если вы хотите, чтобы они переносились на следующую строку (или столбец, если у вас вертикально расположена основная ось) при переполнении, вы должны добавить свойство <code>flex-wrap</code> и установить ему значение <code>wrap</code>, или использовать сокращённую запись свойства {{cssxref("flex-flow")}} со значениями <code>row wrap</code> или <code>column wrap</code> соответственно для строк и столбцов.</p>
+
+<p>Тогда элементы будут переноситься внутри контейнера. В следующем примере у нас есть 10 элементов с <code>flex-basis</code> равным <code>160px</code> и способностью расти и сжиматься. Как только в первой строке мы попадаем в то место, когда нет возможности поместить ещё один элемент с размером 160 px, создаётся новая строка для этого элемента и так будет повторяться, пока не поместятся все элементы.Так как элементы могут расти, то их размер станет больше, чем 160px в том случае, когда все строки полностью заполнятся. Если на последней строке останется только один элемент, то он расширится до ширины всей строки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p>
+
+<p>То же самое будет происходить с колонками. Содержащему контейнеру надо задать высоту, чтобы элементы начали переноситься в следующую колонку. И высота элементов тоже будет увеличиваться, чтобы заполнить колонку по высоте полностью.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p>
+
+<h2 id="Перенос_и_направление_flex-direction">Перенос и направление (flex-direction)</h2>
+
+<p>Перенос работает, что логично ожидать, и в паре со свойством <code>flex-direction</code>. Если <code>flex-direction</code> установлен в <code>row-reverse</code>, тогда элементы начнут укладываться с конечного края контейнера и будут идти в обратном порядке.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p>
+
+<p>Обратите внимание, что обратный порядок относится только к строке (в случае построчного заполнения). Элементы начнут заполнять справа налево, затем перейдут на вторую строку и опять начнут справа. Не будет реверса сразу по обеим осям - строки не будут заполняться вверх!</p>
+
+<h2 id="Объяснение_одномерного_макета">Объяснение одномерного макета</h2>
+
+<p>Как мы уже видели в предыдущих примерах, если нашим элементам разрешено расти и сжиматься, то появляются несколько элементов в последней строке или столбце, которые расширяются, чтобы заполнить всё оставшееся пространство.</p>
+
+<p>В технологии флексбоксов нет методов, которые позволили бы сказать элементам в одной строке выстроиться так же, как в строке выше — каждая флекс-строка ведёт себя как новый флекс-контейнер. Это так же касается распределения пространства по главной оси. Если есть только один элемент и ему разрешено расти, то он будет расти и заполнять главную ось направления, так же, как будто бы он был единственным элементов в контейнере.</p>
+
+<p>Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки - Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимумальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми стоблцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p>
+
+<p>В этом разница между одно- и двух -мерной компоновкой. В одномерном методе, таком как флексбокс, мы контролируем только одно измерение - либо строки, либо столбцы. В двумерном макете, таком как grid, мы контролируем сразу оба измерения. Если вы хотите распределение пространства построчно, используйте flexbox. Если не хотите - используйте Grid.</p>
+
+<h2 id="Как_работают_грид-системы_на_основе_flexbox">Как работают грид-системы на основе flexbox?</h2>
+
+<p>Как правило, grid системы на основе flexbox работают, возвращая flexbox к привычному миру разметок на основе float. Если вы назначите процентную ширину для элементов Flex - либо задав значение параметру <code>flex-basis</code>, либо добавив ширину к самому элементу, при этом оставив значение <code>flex-basis</code> как <code>auto</code> - вы можете создать впечатление двухмерного макета. Вы можете посмотреть, как это работает на примере ниже.</p>
+
+<p>Здесь я установил <code>flex-grow</code> и <code>flex-shrink</code> на <code>0</code>, чтобы запретить flex элементам расти и сжиматься, а затем контролирую их размер с помощью процентов, как мы это делали в макетах с float.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p>
+
+<p>Если вам нужно, чтобы flex элементы выровнялись по поперечной оси, такой способ управления шириной позволит этого добиться. Тем не менее, в большинстве случаев, добавление параметра ширины непосредственно в сам flex элемент говорит о том, что возможно будет лучше, если вы переключитесь на технологию grid layout для этого компонента макета.</p>
+
+<h2 id="Создание_промежутков_между_элементами">Создание промежутков между элементами</h2>
+
+<p>При размещении flex элементов периодически возникает необходимость их разнести между собой. На данный момент у нас нет никакого решения задачи создания промежутков между элементами flexbox в пределах спецификации <a href="https://www.w3.org/TR/css-align-3/">Box Alignment module</a>. В будущем мы сможем просто использовать <code>row-gap</code> и <code>column-gap</code> для флексбоксов так же, как мы это делаем для CSS Grid макетов. Но пока всё что мы можем сделать - это использовать margin для достижения этой цели.</p>
+
+<p>Как вы можете видеть на живом примере ниже, попытки создать промежутки между элементами, при этом не создавая промежутки с границами содержащего контейнера, приводят к тому, что нам приходится использовать отрицательные маржины для самого контейнера. Любая граница в flex контейнере затем перемещается во вторую оболочку, чтобы отрицательное поле могло вытянуть элементы до этого элемента оболочки.</p>
+
+<p>Вот поэтому, когда всё-таки реализуют свойство gap, это решит проблему с промежутками. Потому что это свойство будет действовать только на промежутки между элементами, не затрагивая промежутки между элементом и содержащим контейнером.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p>
+
+<h2 id="Сворачивание_элементов">Сворачивание элементов</h2>
+
+<p>В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра <code>visibility: collapse</code> на элементе. Смотрим документацию MDN для параметра {{cssxref("visibility")}}. Спецификация описывает поведение так:</p>
+
+<blockquote>
+<p>“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы.  Однако процесс обертывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Сворачивание элементов</a></p>
+</blockquote>
+
+<p>Понимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.</p>
+
+<p>В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр <code>visibility: collapse</code>. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите <code>visibility: collapse</code> из CSS или измените значение на <code>visible</code>, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свернутыми элементами; высота флекс-контейнера при этом не изменится.</p>
+
+<div class="note">
+<p>Примечание. Используйте Firefox для двух приведенных ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p>
+
+<p>Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит <em>после</em> сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свернутым элементом в главной оси.</p>
+
+<p>Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.</p>
+
+<p>Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свернутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p>
+
+<p>Если это вызывает проблемы для вашего макета, возможно Вам стоит задуматься над переделкой структуры, например, поместить каждую строку в отдельный флекс-контейнер, чтобы они не могли смещать строки.</p>
+
+<h3 id="Разница_между_visibility_hidden_и_display_none">Разница между <code>visibility: hidden</code> и <code>display: none</code></h3>
+
+<p>Когда Вы устанавливаете элементу <code>display: none</code> чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счетчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование <code>visibility: hidden</code> сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведет себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..20d43c2b28
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,378 @@
+---
+title: Используем CSS Flexible Boxes
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>Эта статья устарела и удалена из английской версии. Вместо неё идёт перенаправление на статью:
+<h1 id="Основные_понятия_Flexbox"><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Основные понятия Flexbox</a></h1>
+
+
+
+<p>У меня не поднялась рука удалить эту статью окончательно, но я рекомендую Вам вместо неё, всё-таки, прочитать ту.</p>
+</div>
+
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS3 <strong>Flexible Box</strong>, или просто <strong>flexbox</strong> — это режим разметки, созданный для упорядочения элементов на странице таким образом, чтобы они вели себя предсказуемо в случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.</span> Во многих случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats) и не выполняет схлопывание отступлений flex-контейнера и его содержимого (margin collapse).</p>
+
+<p>Для многих дизайнеров модель использования флексбоксов будет более простой для применения. Дочерние элементы внутри флексбокса могут размещаться в любом направлении и могут менять размер, чтобы адаптироваться к различным размерам дисплея. Позиционирование элементов в таком случае является простым и комплексная разметка достигается значительно легче и с более чистым кодом, поскольку порядок отображения элементов не связан с их порядком в коде. Эта независимость умышленно касается только визуального рендеринга, оставляя порядок интерпретации и навигацию зависимыми от порядка в исходниках.</p>
+
+<div class="note"><strong>Внимание:</strong> некоторые браузеры все еще могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Совместимость_с_браузерами">таблицей совместимости</a>.</div>
+
+<h2 id="Концепция_Flexbox">Концепция Flexbox</h2>
+
+<p>Главной концепцией Flexbox есть возможность изменения высоты и/или ширины его элементов, чтобы лучше заполнять пространство любого дисплея. Flex-контейнер увеличивает элементы, чтобы заполнить доступное пространство или уменьшает чтобы предотвратить перекрытие.</p>
+
+<p>Алгоритм разметки флексбоксами агностичено направлен в противовес блочной разметке, которая ориентирована строго вертикально, или горизонтально-ориентированной инлайн-разметке. Несмотря на то что разметка блоками хорошо подходит для страницы, ей не хватает объективного механизма для поддержки компонентов, которые должны менять ориентацию, размеры а также растягиваться или сжиматься при изменениях размера экрана, изменении ориентации с вертикальной на горизонтальную и так далее. Разметка флексбоксами наиболее желательна для компонентов приложения и шаблонов, которые мало масштабируются, тогда как grid-разметка создана для больших шаблонов. Обе технологии являются частью разработки CSS Working Group которая должна способствовать совместимости web-приложений с различными браузерами, режимами а также большей гибкости.</p>
+
+<h2 id="Терминология">Терминология</h2>
+
+<p>Поскольку описание флексбоксов не включает таких словосочетаний, как горизонтальная / inline и вертикальная / block оси, объяснение модели предусматривает новую терминологию. Используйте следующую диаграмму при просмотре словаря терминов. Она изображает flex-контейнер, имеющий flex-направление ряда, что означает, что каждый flex item расположен горизонтально, друг за другом по главной оси (main axis) в соответствии с установленным направлением написания текста элемента. Слева направо в данном случае.</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>Flex-контейнер</dt>
+ <dd>Родительский элемент, в котором содержатся flex-элементы. Flex-контейнер определяется установкой свойства {{Cssxref("display")}} в <code>flex</code> или <code>inline-flex</code>.</dd>
+ <dt>Flex-элемент, flex item</dt>
+ <dd>
+ <p>Каждый дочерний элемент flex-контейнера становится flex-элементом. Текст, который напрямую содержится в flex-контейнере, оборачивается анонимным flex-элементом.</p>
+ </dd>
+ <dt>Оси</dt>
+ <dd>
+ <p>Каждый flexible-бокс шаблон строится по двум осям. Главная ось <strong>(main axis)</strong> — это ось, вдоль которой flex-элементы следуют один за другим, а перекрёстная ось <strong>(cross axis)</strong> перпендикулярна ей.</p>
+
+ <ul>
+  <li>Свойство <code>{{Cssxref("flex-direction")}}</code> устанавливает главную ось.</li>
+  <li>Свойство <code>{{Cssxref("justify-content")}}</code> определяет расположение элементов вдоль главной оси в текущем ряду.</li>
+  <li>Свойство <a href="/ru/docs/Web/CSS/align-items"><code>align-items</code></a> расположение элементов вдоль перекрёстной оси в текущем ряду.</li>
+  <li>Свойство <a href="/ru/docs/Web/CSS/align-self"><code>align-self</code></a> устанавливает, как отдельный flex-элемент выровнен по перекрёстной оси, переопределяя значения, установленные с помощью <code>align-items.</code></li>
+ </ul>
+ </dd>
+ <dt>Направления</dt>
+ <dd>
+ <p>Главное начало и конец (<strong>main</strong>) и перекрёстное начало и конец (<strong>cross start</strong>/<strong>end</strong>) — это стороны контейнера, определяющие начало и окончание потока flex-элемментов. Они следуют по главной и перекрестной осями flex-контейнера в векторе, установленном режимом написания ({{Cssxref("writing-mode")}}) (слева направо, справа налево и т. д.).</p>
+
+ <ul>
+  <li>Свойство {{Cssxref("order")}} присваивает элементы порядковым группам и определяет, в каком порядке их показывать.</li>
+  <li>Свойство {{Cssxref("flex-flow")}} — это короткая форма, состоящая из свойств {{Cssxref("flex-direction")}} и {{Cssxref("flex-wrap")}}, определяющих расплолжение элементов.</li>
+ </ul>
+ </dd>
+ <dt>Линии</dt>
+ <dd>
+ <p>Flex-элементы могут размещаться на одной или нескольких линиях в зависимости от значения свойства {{Cssxref("flex-wrap")}}, которое контролирует направление перекрестных линий и направление в котором складываются новые линии.</p>
+ </dd>
+ <dt>Размеры</dt>
+ <dd>
+ <p>Флекс элементы агностически эквивалентны высоте и ширине <strong>главного размера</strong> и <strong>поперечного размера,</strong> которые равны, соответственно,  главной оси (main axis) и поперечной оси (cross axis) флекс-контейнера.</p>
+
+ <ul>
+  <li>Свойства <code><a href="/ru/docs/Web/CSS/min-height">min-height</a></code> и <code><a href="/ru/docs/Web/CSS/min-width">min-width</a></code> принимают значение по-умолчанию 0.</li>
+  <li>Свойство <a href="/ru/docs/Web/CSS/flex"><code>flex</code></a> - это сокращённая запись свойств <a href="/ru/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <code><a href="/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и</code> <code><a href="/ru/docs/Web/CSS/flex-basis">flex-basis</a>.</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Делаем_элемент_флексбоксом">Делаем элемент флексбоксом</h2>
+
+<p>Чтобы сделать элемент flexible-боксом, укажите значение {{cssxref("display")}} следующим образом:</p>
+
+<pre class="brush: css">display: flex</pre>
+
+<p>или</p>
+
+<pre class="brush: css">display: inline-flex</pre>
+
+<p>Таким образом мы определяем элемент как флексбокс, а его дочерниие элементы — как flex-элементы. Значение <code>flex</code> делает контейнер блочным элементом, а <code>inline-flex</code> значение превращает его в инлайн-элемент.</p>
+
+<div class="note"><span class="notranslate"><strong>Внимание</strong></span><strong>:</strong> для <span class="notranslate">указания префикса вендора, добавьте строку в значение атрибута, а не к самому атрибуту</span>. <span class="notranslate">Например</span>, <code>display: -webkit-flex</code>.</div>
+
+<h2 id="Рассмотрим_flex-элементы">Рассмотрим flex-элементы</h2>
+
+<p>Текст, который содержится непосредственно внутри flex-контейнера, автоматически оборачивается анонимным flex-элементом. Однако, анонимный flex-элемент, содержащий только пробелы, не отображается (как будто было указано значение <code>display: none</code>).</p>
+
+<p>Абсолютно позиционированные дочерние элементы flex-контейнера позиционируются так, что их статическое положение определяется относительно главного начального угла содержащего их flex-контейнера.</p>
+
+<p>Отступы (margin) соседних flex-контейнеров не схлопываются. Установка значений <code>margin: auto </code>поглощает дополнительное место в вертикальном или горизонтальном направлении и может быть использовано для выравнивания или для разделения соседних flex-элементов. См. <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Выравнивание при помощи 'автоматических' отступов </a>в разделе "Модель расположения при помощи flex-контейнеров" спецификации W3C.</p>
+
+<p>Свойства выравнивания flexbox выполняют "истинное" центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены "безопасной" опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают "безопасно" и центрирование будет прекращено при переполнении. Вместо использования свойства <code>align- </code>просто установите автоматические отступы (<code>margin: auto)</code> для flex-элементов, которые вы хотите отцентрировать. Вместо свойств <code>justify-</code> установите <code>margin: auto</code> на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут "подстраиваться" и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить <code>justify-content </code>центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надежно использовать центрирование, основанное на отступах, на основной оси для замены свойства <code>justify-content</code>.</p>
+
+<p>Помните, что, несмотря на то, что порядок отображения элементов не зависит от их положения в исходном коде, эта независимость затрагивает только визуальное отображение, оставляя навигацию и голосовую помощь в исходном порядке. Даже свойство {{cssxref("order")}} не влияет на очередность голосовой помощи и навигации. Таким образом, разработчики должны уделять внимание правильному порядку элементов в исходном коде, чтобы не навредить доступности документа.</p>
+
+<h2 id="Свойства_Flexbox">Свойства Flexbox</h2>
+
+<h3 id="Свойства_не_влияющие_на_Flexbox">Свойства, не влияющие на Flexbox</h3>
+
+<p>Так как flexbox используют другой алгоритм расположения, некоторые свойства не имеют смысла для flex-контейнера:</p>
+
+<ul>
+ <li>свойства <code>column-*</code> <a href="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts">модуля с множественными столбцами</a> не влияет на flex-элементы.</li>
+ <li>{{cssxref("clear")}} не действует на flex-элементах.</li>
+ <li>{{cssxref("float")}} заставляет свойство элемента <code>display</code> считаться как <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} не оказывает эффекта на выравнивание flex-элементов.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Типичный_пример_flex">Типичный пример flex</h3>
+
+<p>Типичный пример показывает как применять "flex-эффект" к элементам и как соседние элементы ведут себя в состоянии flex.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+    .flex {
+        /* basic styling */
+        width: 350px;
+        height: 200px;
+        border: 1px solid #555;
+        font: 14px Arial;
+
+        /* flexbox setup */
+        display: flex;
+        flex-direction: row;
+    }
+
+    .flex &gt; div {
+        flex: 1 1 auto;
+        width: 30px; /* To make the transition work nicely. (Transitions to/from
+                        "width:auto" are buggy in Gecko and Webkit, at least.
+                        See http://bugzil.la/731886 for more info.) */
+        transition: width 0.7s ease-out;
+    }
+
+    /* colors */
+    .flex &gt; div:nth-child(1){ background: #009246; }
+    .flex &gt; div:nth-child(2){ background: #F1F2F1; }
+    .flex &gt; div:nth-child(3){ background: #CE2B37; }
+
+    .flex &gt; div:hover {
+        width: 200px;
+    }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+    &lt;div class="flex"&gt;
+      &lt;div&gt;uno&lt;/div&gt;
+      &lt;div&gt;due&lt;/div&gt;
+      &lt;div&gt;tre&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Пример_расположения_Священный_Грааль">Пример расположения "Священный Грааль"</h3>
+
+<p>Данный пример показывает как flexbox предоставляет возможность динамически изменять расположение для различных разрешений экрана. Следующая схема иллюстрирует преобразование.</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>Здесь изображен случай, когда расположение, подходящее для окна браузера должно быть оптимизировано для экрана смартфона. Не только элементы должны уменьшиться в размере, но и порядок, в котором они отображаются, должен измениться. Flexbox сильно упрощает это.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+    body {
+        font: 24px Helvetica;
+        background: #999999;
+    }
+
+    #main {
+        min-height: 800px;
+        margin: 0px;
+        padding: 0px;
+        display: flex;
+        flex-flow: row;
+    }
+
+    #main &gt; article {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #cccc33;
+        border-radius: 7pt;
+        background: #dddd88;
+        flex: 3 1 60%;
+        order: 2;
+    }
+
+    #main &gt; nav {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 1;
+    }
+
+    #main &gt; aside {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 3;
+    }
+
+    header, footer {
+        display: block;
+        margin: 4px;
+        padding: 5px;
+        min-height: 100px;
+        border: 1px solid #eebb55;
+        border-radius: 7pt;
+        background: #ffeebb;
+    }
+
+    /* Too narrow to support three columns */
+    @media all and (max-width: 640px) {
+        #main, #page {
+            flex-direction: column;
+        }
+
+        #main &gt; article, #main &gt; nav, #main &gt; aside {
+        /* Return them to document order */
+            order: 0;
+        }
+
+        #main &gt; nav, #main &gt; aside, header, footer {
+            min-height: 50px;
+            max-height: 50px;
+        }
+    }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;header&gt;header&lt;/header&gt;
+    &lt;div id='main'&gt;
+      &lt;article&gt;article&lt;/article&gt;
+      &lt;nav&gt;nav&lt;/nav&gt;
+      &lt;aside&gt;aside&lt;/aside&gt;
+    &lt;/div&gt;
+    &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Песочница">Песочница</h2>
+
+<p>Существует несколько песочниц с flexbox, доступных онлайн для экспериментов:</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+ <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li>
+ <li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></li>
+</ul>
+
+<h2 id="О_чем_нужно_помнить">О чем нужно помнить</h2>
+
+<p>Алгоритм, описывающий как flex-элементы располагаются, иногда может быть довольно запутанным. Вот несколько правильных решений, которые позволят избежать неприятных сюрпризов при верстке с использованием flexbox.</p>
+
+<p>Flexbox располагаются в соответствие с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode">направлением письма</a>, что означает, что <strong>главное начало</strong> и <strong>главный конец </strong>располагаются в зависимости от положения <strong>начала </strong>и <strong>конца </strong>(строки - <em>прим.</em>).</p>
+
+<p><strong>Перекрестное начало</strong> и <strong>перекрестный конец </strong>полагаются на определение позиции <strong>начала </strong>и <strong>конца, </strong>которое зависит от значения свойства <code>{{cssxref("direction")}}</code>.</p>
+
+<p>Разрывы страницы допустимы в расположении flex-контейнеров, когда это позволяет свойство <code>break-. Свойства </code>CSS3 <code>break-after</code>, <code>break-before</code> и <code>break-inside</code>, а также свойства CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> и <code>page-break-inside</code> работают на flex-контейнере, flex-элементах, а также внутри flex-элементов.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10<sup>[5]</sup><br>
+    15 {{property_prefix("-webkit")}}</td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile("22.0")}}</td>
+   <td>
+    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
+     1.1</p>
+   </td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>1.3</td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлен для поддержки финальной версии.</p>
+
+<p>[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр <code>about:config</code> <code>layout.css.flexbox.enabled</code> в значение <code>true</code>. Начиная с Firefox 22 по Firefox 27, параметр установлен в <code>true</code> по умолчанию, и полностью исключен в Firefox 28.</p>
+
+<p>[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 <a href="https://msdn.microsoft.com/ru-ru/library/dn265027(v=vs.85).aspx">был обновлен</a> для поддержки финальной версии.</p>
+
+<p>[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлен для поддержки финальной версии.</p>
+
+<p>[5] Хотя изначальная реализация в Opera 12.10 <code>flexbox</code> была без приставки, она получила приставку {{property_prefix("-webkit")}} в версиях с 15 по 16 Opera и с 15 по 19 Opera Mobile. Приставка была снова убрана в Opera 17 и Opera Mobile 24.</p>
+
+<p>[6] До Firefox 29, <code>установка visibility: collapse</code> для flex-элемента заставляет его обрабатываться как <code>display: none</code> вместо предполагаемого поведения, обрабатывающего его как <code>visibility: hidden</code>. Предложенное решение - использовать <code>visibility:hidden</code> для flex-элементов, которые должны вести себя как при установленном <code>visibility:collapse</code>. Для большей информации, см {{bug(783470)}}.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">Проект Flexbugs </a>для информации о багах в браузерных реализациях flexbox.</li>
+</ul>
diff --git a/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html b/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html
new file mode 100644
index 0000000000..9fe0b2932f
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html
@@ -0,0 +1,213 @@
+---
+title: Выравнивание элементов во Flex контейнере
+slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.</p>
+
+<p>Для центрирования элемента по перекрёстной оси (в данном случае - вертикальной) используется свойство <code>align-items</code>. Для центрирования элемента по главной оси (в данном случае - горизонтально), используется свойство <code>justify-content</code>.</p>
+
+<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+
+
+<p>На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Свойства_управления_выравниванием">Свойства управления выравниванием</h2>
+
+<p>В этом руководстве рассматриваются следующие свойства:</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — управляет выравниванием элементов по главной оси.</li>
+ <li>{{cssxref("align-items")}} — управляет выравниванием элементов по перекрёстной оси.</li>
+ <li>{{cssxref("align-self")}} — управляет выравниванием конкретного flex элемента по перекрёстной оси.</li>
+ <li>{{cssxref("align-content")}} — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.</li>
+</ul>
+
+<p>Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.</p>
+</div>
+
+<h2 id="Перекрёстная_ось">Перекрёстная ось</h2>
+
+<p>Свойства <code>align-items</code> и <code>align-self</code> управляют выравниванием flex элементов по перекрёстной оси: вертикальной для <code>flex-direction</code> установленным в <code>row,</code> и горизонтальной для <code>flex-direction</code> установленным в <code>column</code>.</p>
+
+<p>Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить <code>display: flex</code> у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.</p>
+
+<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>Все элементы становятся одной высоты, т.к. по умолчанию свойство <code>align-items</code> имеет значение <code>stretch</code>.</p>
+
+<p>Другие возможные значения свойства:</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>В примере ниже значение свойств <code>align-items</code> установлено в <code>stretch</code>. Попробуйте другие значения для понимания их действия.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="Выравнивание_одного_элемента_при_помощи_align-self">Выравнивание одного элемента при помощи <code>align-self</code></h3>
+
+<p>Свойство <code>align-items </code>устанавливает <code>align-self</code> для всех flex элементов как для группы. Это означает, что можно явно указать значение <code>align-self</code> для конкретного элемента. Свойство <code>align-self</code> может принимать все те же значения, что и свойство <code>align-items, </code>а так же значение <code>auto</code>, которое сбросит значение, установленное в flex контейнере.</p>
+
+<p>В следующем примере, у flex контейнера установлено <code>align-items: flex-start</code>, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью <code>first-child</code> селектора установлено <code>align-items: stretch</code>; у следующего элемента с классом <code>selected</code> установлено <code>align-self: </code><code>center</code>. Можно изменять значение <code>align-items</code> на контейнере или <code>align-self</code> на элементе для изучения их работы.8н</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+
+<h3 id="Изменение_основной_оси">Изменение основной оси</h3>
+
+<p>До сего момента мы изучали поведение при <code>flex-direction</code> установленном в <code>row</code>, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>Если изменить <code>flex-direction</code> на column, <code>align-items</code> и <code>align-self</code> будут сдвигать элементы влево или вправо.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>Можно попробовать пример ниже, где установлено <code>flex-direction: column</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p>
+
+<h2 id="Выравнивание_содержимого_по_перекрёстной_оси_—_свойство_align-content">Выравнивание содержимого по перекрёстной оси — свойство align-content</h2>
+
+<p>До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство <code>align-content</code> для управления свободным пространством между строками. В спецификации это описано как <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">упаковка flex-строк</a>.</p>
+
+<p>Чтобы свойство <code>align-content</code> работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.</p>
+
+<p>Свойство <code>align-content</code> принимает следующие значения:</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (не описано в спецификации Flexbox)</li>
+</ul>
+
+<p>В примере ниже flex контейнер имеет высоту 400 пикселей - больше, чем необходимо для отображения всех элементов. Значение <code>align-content</code> установлено в <code>space-between</code>, означающее, что свободное пространство разделено <em>между</em> строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.</p>
+
+<p>Попробуйте другие значения <code>align-content</code> для понимания принципа их работы.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Также можно сменить значение <code>flex-direction</code> на <code>column</code> и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Замечание</strong>: значение <code>space-evenly</code> не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.</p>
+</div>
+
+<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">документации по <code>justify-content</code> на MDN</a> приведено больше деталей о всех значениях и поддержке браузерами.</p>
+
+<h2 id="Выравнивание_содержимого_по_главной_оси">Выравнивание содержимого по главной оси</h2>
+
+<p>Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — <code>justify-content</code>. Это обсуловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство <code>justify-content</code>, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.</p>
+
+<p>В нашем первом примере с использованием свойства <code>display: flex</code>, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство <code>justify-content</code> имеет начальное значение <code>flex-start</code>. Все свободное место располагается в конце контейнера.</p>
+
+<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Свойство <code>justify-content</code> может принимать те же самые значения, что и <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (не определено в спецификации Flexbox)</li>
+</ul>
+
+<p>В примере ниже, свойству <code>justify-content</code> задано значение <code>space-between</code>. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}</p>
+
+<p>Если свойство <code>flex-direction</code> имеет значение <code>column</code>, то свойство <code>justify-content</code> распределит доступное пространство в контейнере между элементами.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p>
+
+<h3 id="Выравнивание_и_режим_записи">Выравнивание и режим записи</h3>
+
+<p>Необходимо помнить, что при использовании свойств <code>flex-start</code> и<code>flex-end</code> элементы позиционируются в режиме записи. Если свойству <code>justify-content</code> задано значение <code>start</code> и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.</p>
+
+<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.</p>
+
+<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>В примере ниже свойству <code>property</code> задано значение <code>rtl</code>, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства <code>justify-content</code>, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="Выравнивание_и_гибкое-направление">Выравнивание и гибкое-направление</h2>
+
+<p>Начальное положение элементов поменяется, если вы измените значение свойства <code>flex-direction</code> — например установите <code>row-reverse</code> вместо <code>row</code>.</p>
+
+<p>В следующем примере заданы следующие свойства: <code>flex-direction: row-reverse</code> и <code>justify-content: flex-end</code>. В языках с параметром записи <code>ltr</code> все элементы будут отображаться с левой стороны. Попробуйте изменить свойство <code>flex-direction: row-reverse</code> на <code>flex-direction: row</code>. Вы увидите, что теперь элементы отображаются реверсивно.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>Может показаться немного запутанным, но главное правило, которое необходимо запомить – до тех пор, пока вы не измените свойство <code>flex-direction</code>, элементы контейнера выстраиваются в режиме записи вашего языка (<code>ltr</code> или <code>rtl</code>). </p>
+
+<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Вы можете сделать отображение элементов контейнера блочным, задав свойству <code>flex-direction</code> значение  <code>column</code>. Свойство <code>flex-start</code> будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.</p>
+
+<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Если вы зададите свойству <code>flex-direction</code> реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство <code>flex-start</code> будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.   </p>
+
+<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Использование_авто_отступов_для_выравнивания_по_главной_оси">Использование авто отступов для выравнивания по главной оси</h2>
+
+<p>Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства <code>justify-items</code> или <code>justify-self</code> становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ <code>margin</code> со значением <code>auto</code>. </p>
+
+<p>Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.</p>
+
+<p>На первый взгляд может показаться, что это юзкейс для свойства <code>justify-self</code>. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать <code>justify-self</code> на элементе <em>d</em>, это также изменило бы выравнивание следующего элемента — <em>e</em>, что может противоречить первоначальному замыслу.</p>
+
+<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Вместо этого мы можем выбрать четвёртый элемент (<em>d</em>) и отделить его от первых трёх, задав ему значение <code>auto</code> для <code>margin-left</code>. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом cработает <code>margin-right</code>. Оба свойства со значениями <code>auto</code> отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.</p>
+
+<p>В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс <code>push</code> с заданным <code>margin-left: auto</code>. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Будущие_функции_выравнивания_для_Flexbox">Будущие функции выравнивания для Flexbox</h2>
+
+<p>В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения <code>space-evenly</code> для свойств <code>align-content</code> и <code>justify-content</code>.</p>
+
+<p>Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как <code>column-gap</code> and <code>row-gap</code>, как показано в макете <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать <code>column-gap</code> и <code>row-gap</code> во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.</p>
+
+<p>Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, а также рассмотреть как выравнивание работает в этих спецификациях в статье <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p>
+
+<p>Смотрите Также</p>
+
+<ul>
+ <li>Выравнивание Коробки</li>
+ <li>Выравнивание Коробки в Flexbox (Гибкая Коробка)</li>
+ <li>Выравнивание Коробки в Grid Layout (Макет Сетки)</li>
+</ul>
diff --git a/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html b/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html
new file mode 100644
index 0000000000..97e521c2e1
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html
@@ -0,0 +1,194 @@
+---
+title: Управление соотношением элементов вдоль главной оси
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<div>В данном руководстве, мы исследуем три свойства  применяемые к flex элементам, которые позволяют нам контролировать размер и  гибкость flex элементов по основной(main) оси. Полное понимание, как эти свойства работают,  при увеличение и уменьшение элементов, есть ключ к мастерству flexbox.</div>
+
+<h2 id="A_first_look">A first look</h2>
+
+<p>Our three properties control the following aspects of a flex item's flexibility:</p>
+
+<ul>
+ <li><code>flex-grow</code>: How much of the positive free space does this item get?</li>
+ <li><code>flex-shrink</code>: How much negative free space can be removed from this item?</li>
+ <li><code>flex-basis</code>: What is the size of the item before growing and shrinking happens?</li>
+</ul>
+
+<p>The properties are usually expressed as the shorthand {{CSSxRef("flex")}} property. The following code would set the <code>flex-grow</code> property to <code>2</code>, <code>flex-shrink</code> to <code>1</code> and <code>flex-basis</code> to <code>auto</code>.</p>
+
+<pre class="brush: css no-line-numbers">.item {
+  flex: 2 1 auto;
+}</pre>
+
+<p>If you have read the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a>, then you will have already had an introduction to the properties. Here we will explore them in depth in order that you can fully understand what the browser is doing when you use them.</p>
+
+<h2 id="Important_concepts_when_working_on_the_main_axis">Important concepts when working on the main axis</h2>
+
+<p>There are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. These relate to the <em>natural</em> size of flex items before any growing or shrinking takes place, and to the concept of free space.</p>
+
+<h3 id="Flex_item_sizing">Flex item sizing</h3>
+
+<p>In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don’t have a width or a height applied using an absolute length unit?</p>
+
+<p>There is a concept in CSS of {{CSSxRef('width','min-content','#min-content')}} and {{CSSxRef('width','max-content','#max-content')}} — these keywords are <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">defined in the CSS Intrinsic and Extrinsic Sizing Specification</a>, and can be used in place of a <a href="/en-US/docs/Web/CSS/length">length unit</a>.</p>
+
+<p>In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of <code>min-content</code>. In a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the <code>min-content</code> size of that string. Essentially, the longest word in the string is dictating the size.</p>
+
+<p>The second paragraph has a value of <code>max-content</code> and so it does the opposite. It gets as big as it possibly can be, taking no soft-wrapping opportunities. It would overflow the box it is in if that container was too narrow.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p>
+
+<p>If your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering.</p>
+
+<p><img alt="The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p>
+
+<p>Remember this behaviour and what effects <code>min-content</code> and <code>max-content</code> have as we explore <code>flex-grow</code> and <code>flex-shrink</code> later in this article.</p>
+
+<h3 id="Positive_and_negative_free_space">Positive and negative free space</h3>
+
+<p>To talk about these properties we need to understand the concept of <strong>positive and negative free space</strong>. When a flex container has positive free space, it has more space than is required to display the flex items inside the container. For example, if I have a 500 pixel-wide container, {{CSSxRef("flex-direction")}} is <code>row</code>, and I have three flex items each 100 pixels wide, then I have 200 pixels of positive free space, which could be distributed between the items if I wanted them to fill the container.</p>
+
+<p><img alt="Image showing space left over after items have been displayed." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space I need will be 600 pixels, so I have 100 pixels of negative free space. This could be removed from the items in order to make them fit the container.</p>
+
+<p><img alt="The items overflow the container" src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p>
+
+<p>It is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties.</p>
+
+<p>In the following examples I am working with {{CSSxRef("flex-direction")}} set to row, therefore the size of items will always come from their width. We will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. You could equally try out each example with <code>flex-direction: column</code>. The main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space.</p>
+
+<h2 id="The_flex-basis_property">The flex-basis property</h2>
+
+<p>The {{CSSxRef("flex-basis")}} property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is <code>auto</code>. If <code>flex-basis</code> is set to <code>auto</code> then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be the case if you had given your item a width of 200 pixels. In that case <code>200px</code> would be the <code>flex-basis</code> for this item.</p>
+
+<p>If your item is instead auto-sized, then <code>auto</code> resolves to the size of its content. At this point your knowledge of <code>min-</code> and <code>max-content</code> sizing becomes useful, as flexbox will take the <code>max-content</code> size of the item as the <code>flex-basis</code>. The following live example can help to demonstrate this.</p>
+
+<p>In this example I have created a series of inflexible boxes, with both <code>flex-grow</code> and <code>flex-shrink</code> set to <code>0</code>. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a <code>flex-basis</code> of <code>150px</code>, whereas the other two items have no width and so are sized according to their content width.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p>
+
+<p>In addition to the <code>auto</code> keyword, you can use the <code>content</code> keyword as the <code>flex-basis</code>. This will result in the <code>flex-basis</code> being taken from the content size even if there is a width set on the item. This is a newer keyword and has less browser support, however you can always get the same effect by using <code>auto</code> as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.</p>
+
+<p>If you want flexbox to completely ignore the size of the item when doing space distribution then set <code>flex-basis</code> to <code>0</code>. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this as we move on to look at <code>flex-grow</code>.</p>
+
+<h2 id="The_flex-grow_property">The flex-grow property</h2>
+
+<p>The {{CSSxRef("flex-grow")}} property specifies the <strong>flex grow factor</strong>, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.</p>
+
+<p>If all of your items have the same <code>flex-grow</code> factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use <code>1</code> as the value, however you could give them all a <code>flex-grow</code> of <code>88</code>, or <code>100</code>, or <code>1.2</code> if you like — it is a ratio. If the factor is the same for all, and there is positive free space in the flex container then it will be distributed equally to all.</p>
+
+<h3 id="Combining_flex-grow_and_flex-basis">Combining <code>flex-grow</code> and <code>flex-basis</code></h3>
+
+<p>Things can get confusing in terms of how <code>flex-grow</code> and <code>flex-basis</code> interact. Let's consider the case of three flex items of differing content lengths and the following <code>flex</code> rules applied to them:</p>
+
+<p><code>flex: 1 1 auto;</code></p>
+
+<p>In this case the <code>flex-basis</code> value is <code>auto</code> and the items don’t have a width set, and so are auto-sized. This means that flexbox is looking at the <code>max-content</code> size of the items. After laying the items out we have some positive free space in the flex container, shown in this image as the hatched area:</p>
+
+<p><img alt="Images shows the positive free space as a hatched area" src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>We are working with a <code>flex-basis</code> equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. Our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others:</p>
+
+<p><img alt="The positive space is distributed between items" src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:</p>
+
+<p><code>flex: 1 1 0;</code></p>
+
+<p>Here we are saying that the size of the item for the purposes of our space distribution calculation is <code>0</code> — all the space is up for grabs and as all of the items have the same <code>flex-grow</code> factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.</p>
+
+<p>Try changing the <code>flex-grow</code> factor from 1 to 0 in this live example to see the different behavior:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p>
+
+<h3 id="Giving_items_different_flex-grow_factors">Giving items different flex-grow factors</h3>
+
+<p>Our understanding of how <code>flex-grow</code> works with <code>flex-basis</code> allows us to have further control over our individual item sizes by assigning items different <code>flex-grow</code> factors. If we keep our <code>flex-basis</code> at <code>0</code> so all of the space can be distributed, we could assign each of the three flex items a different <code>flex-grow</code> factor. In the example below I am using the following values:</p>
+
+<ul>
+ <li><code>1</code> for the first item.</li>
+ <li><code>1</code> for the second item.</li>
+ <li><code>2</code> for the third item.</li>
+</ul>
+
+<p>Working from a <code>flex-basis</code> of <code>0</code> this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p>
+
+<p>Remember that you can use any positive value here. It is the ratio between one item and the others that matters. You can use large numbers, or decimals — it is up to you. To test that out change the values assigned in the above example to <code>.25</code>, <code>.25</code>, and <code>.50</code> — you should see the same result.</p>
+
+<h2 id="The_flex-shrink_property">The <code>flex-shrink</code> property</h2>
+
+<p>The {{CSSxRef("flex-shrink")}} property specifies the <strong>flex shrink factor</strong>, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.</p>
+
+<p>This property deals with situations where the browser calculates the <code>flex-basis</code> values of the flex items, and finds that they are too large to fit into the flex container. As long as <code>flex-shrink</code> has a positive value the items will shrink in order that they do not overflow the container.</p>
+
+<p>So where <code>flex-grow</code> deals with adding available space, <code>flex-shrink</code> manages taking away space to make boxes fit into their container without overflowing.</p>
+
+<p>In the next live example I have three items in a flex container; I’ve given each a width of 200 pixels, and the container is 500 pixels wide. With <code>flex-shrink</code> set to <code>0</code> the items are not allowed to shrink and so they overflow the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p>
+
+<p>Change the <code>flex-shrink</code> value to <code>1</code> and you will see each item shrink by the same amount, in order that all of the items now fit in the box. They have become smaller than their initial width in order to do so.</p>
+
+<h3 id="Combining_flex-shrink_and_flex-basis">Combining <code>flex-shrink</code> and <code>flex-basis</code></h3>
+
+<p>You could say that <code>flex-shrink</code> works in pretty much the same way as <code>flex-grow</code>. However there are two reasons why it isn’t <em>quite</em> the same.</p>
+
+<p>While it is usually subtle, defined in the specification is one reason why <code>flex-shrink</code> isn’t quite the same for negative space as <code>flex-grow</code> is for positive space:</p>
+
+<blockquote>
+<p>“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”</p>
+</blockquote>
+
+<p>The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their <code>min-content</code> size — the size that they become if they take advantage of any soft wrapping opportunities available to them.</p>
+
+<p>You can see this <code>min-content</code> flooring happen in the below example, where the <code>flex-basis</code> is resolving to the size of the content. If you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that <code>min-content</code> size. As the box gets smaller space is then just removed from the third item.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p>
+
+<p>In practice the shrinking behaviour does tend to give you reasonable results. You don’t usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behaviour for content that needs to be shrunk in order to fit into a container.</p>
+
+<h3 id="Giving_items_different_flex-shrink_factors">Giving items different <code>flex-shrink</code> factors</h3>
+
+<p>In the same way as <code>flex-grow</code>, you can give flex-items different <code>flex-shrink</code> factors. This can help change the default behaviour if, for example, you want an item to shrink more or less rapidly than its siblings or not shrink at all.</p>
+
+<p>In the following live example the first item has a <code>flex-shrink</code> factor of 1, the second <code>0</code> (so it won’t shrink at all), and the third <code>4</code>. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for <code>flex-grow</code> you can use decimals or larger numbers here. Choose whatever makes most sense to you.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p>
+
+<h2 id="Mastering_sizing_of_flex_items">Mastering sizing of flex items</h2>
+
+<p>The key to really understanding how flex item sizing works is in understanding the number of things that come into play. Consider the following aspects, which we have already discussed in these guides:</p>
+
+<h3 id="What_sets_the_base_size_of_the_item">What sets the base size of the item?</h3>
+
+<ol>
+ <li>Is <code>flex-basis</code> set to <code>auto</code>, and does the item have a width set? If so, the size will be based on that width.</li>
+ <li>Is <code>flex-basis</code> set to <code>auto</code> or <code>content</code> (in a supporting browser)? If so, the size is based on the item size.</li>
+ <li>Is <code>flex-basis</code> a length unit, but not zero? If so this is the size of the item.</li>
+ <li>Is <code>flex-basis</code> set to <code>0</code>? if so then the item size is not taken into consideration for the space-sharing calculation.</li>
+</ol>
+
+<h3 id="Do_we_have_available_space">Do we have available space?</h3>
+
+<p>Items can’t grow with no positive free space, and they won’t shrink unless there is negative free space.</p>
+
+<ol>
+ <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>less</strong> than the total width (or height) of the container? If so, then you have positive free space and <code>flex-grow</code> comes into play.</li>
+ <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>more</strong> than the total width (or height) of the container? If so, you have negative free space and <code>flex-shrink</code> comes into play.</li>
+</ol>
+
+<h3 id="Other_ways_to_distribute_space">Other ways to distribute space</h3>
+
+<p>If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items.</p>
+
+<p>With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.</p>
diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..99afb866d3
--- /dev/null
+++ b/files/ru/web/css/css_flow_layout/index.html
@@ -0,0 +1,53 @@
+---
+title: Поточная раскладка CSS
+slug: Web/CSS/CSS_Flow_Layout
+tags:
+  - CSS
+  - Раскладка
+  - Руководство
+  - поток
+  - поточная раскладка
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><em>Нормальный поток (normal flow) </em>или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в нее могут быть внесены изменения, например, относительное позиционирование.</p>
+
+<p class="summary">По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность <em>вынимается из потока (out of flow)</em>, то она работает независимо.</p>
+
+<p class="summary">В нормальном потоке <strong>строчные (inline)</strong> элементы отображаются в направлении строки (inline direction), то есть в том же направлении, как идут слова в предложении в соответствии с режимом письма (<a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>) документа. <strong>Блочные (block)</strong> элементы отображаются один за другим, также как параграфы в соответсвии с режимом письма документа. Поэтому в анлгийском языке строчные элементы отображаются один за другим, начиная слева, а блочные элементы выкладываются на странице сверху вниз.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.</p>
+
+<p>Два элемента параграфа с зеленой границей создают боксы уровня блока, отображающиеся один под другим.</p>
+
+<p>Первое предложение также содержит элемент span с голубым фоном. Он создает бокс уровня строки и, следовательно, размещается внутри предложения.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="Руководства">Руководства</h2>
+
+<ul>
+ <li>Блочная и строчная раскладки в нормальном потоке (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a>).</li>
+ <li>В потоке и вне потока (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a>).</li>
+ <li>Объяснение контекстов форматирования (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a>).</li>
+ <li>Поточная раскладка и режимы письма (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a>).</li>
+ <li>Поточная раскладка и переполнение (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a>).</li>
+</ul>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<h3 id="Записи_глосария">Записи глосария</h3>
+
+<ul>
+ <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
+</ul>
+
+<section class="Quick_links" 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>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html b/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html
new file mode 100644
index 0000000000..86879d343e
--- /dev/null
+++ b/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html
@@ -0,0 +1,123 @@
+---
+title: Блочное и строчное расположение в нормальном потоке
+slug: Web/CSS/CSS_Flow_Layout/Блочное_и_строчное_размещение_в_нормальном_потоке
+tags:
+  - CSS
+  - Макет
+  - Макет потока CSS
+  - Отступы
+  - Руководство
+  - Средний уровень
+  - поток
+translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">В этом руководстве мы исследуем основы поведения блочных и строчных элементов - участников нормального потока.</p>
+
+<p>Normal Flow is defined in the <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">CSS 2.1 specification</a>, which explains that any boxes in normal flow will be part of a <em>formatting context</em>. They can be either block or inline, but not both at once. We describe block-level boxes as participating in a <em>block formatting context</em>, and inline-level boxes as participating in an <em>inline formatting context</em>.</p>
+
+<p>The behaviour of elements which have a block or inline formatting context is also defined in this specification. For elements with a block formatting context, the spec says:</p>
+
+<blockquote>
+<p>“In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.<br>
+ <br>
+ In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.4.1</p>
+</blockquote>
+
+<p>For elements with an inline formatting context:</p>
+
+<blockquote>
+<p>“In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2</p>
+</blockquote>
+
+<p>Note that the CSS 2.1 specification describes documents as being in a horizontal, top to bottom writing mode. For example, by describing vertical distance between block boxes. The behavior on block and inline elements is the same when working in a vertical writing mode, and we will explore this in a future guide on Flow Layout and Writing Modes.</p>
+
+<h2 id="Elements_participating_in_a_block_formatting_context">Elements participating in a block formatting context</h2>
+
+<p>Block elements in a horizontal writing mode such as English, layout vertically, one below the other.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p>
+
+<p>In a vertical writing mode then would lay out horizontally.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p>
+
+<p>In this guide, we will be working in English and therefore a horizontal writing mode. However, everything described should work in the same way if your document is in a vertical writing mode.</p>
+
+<p>As defined in the specification, the margins between two block boxes are what creates separation between the elements. We see this with a very simple layout of two paragraphs, to which I have added a border. The default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+
+<p>If we set margins on the paragraph element to <code>0</code> then the borders will touch.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p>
+
+<p>By default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. If we give them a width, they will continue to lay out one below the other - even if there would be space for them to be side by side. Each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+
+<h3 id="Margin_collapsing">Margin collapsing</h3>
+
+<p>The spec explains that margins between block elements <em>collapse</em>. This means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins.</p>
+
+<p>In the example below, the paragraphs have a top margin of <code>20px</code> and a bottom margin of <code>40px</code>. The size of the margin between the paragraphs is <code>40px</code> as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+
+<p>You can read more about margin collapsing in our article <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering Margin Collapsing</a>.</p>
+
+<div class="note">
+<p>Note: if you are not sure whether margins are collapsing, check the Box Model values in your browser DevTools. This will give you the actual size of the margin which can help you to identify what is happening.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p>
+</div>
+
+<h2 id="Elements_participating_in_an_inline_formatting_context">Elements participating in an inline formatting context</h2>
+
+<p>Inline elements display one after the other in the direction that sentences run in that particular writing mode. While we don’t tend to think of inline elements as having a box, as with everything in CSS they do. These inline boxes are arranged one after the other. If there is not enough space in the containing block for all of the boxes a box can break onto a new line. The lines created are known as line boxes.</p>
+
+<p>In the following example, we have three inline boxes created by a paragraph with a {{HTMLElement("strong")}} element inside it.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+
+<p>The boxes around the words before the <code>&lt;strong&gt;</code> element and after the <code>&lt;strong&gt;</code> element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly.</p>
+
+<p>The line box size in the block direction (so the height when working in English) is defined by the tallest box inside it. In the next example, I have made the <code>&lt;strong&gt;</code> element 300%; that content now defines the height of the line box on that line.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p>
+
+<p>Find out more about how Block and Inline Boxes behave in our Guide to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual Formatting Model</a>.</p>
+
+<h2 id="The_display_property_and_flow_layout">The display property and flow layout</h2>
+
+<p>In addition to the rules existing in CSS2.1, new levels of CSS further describe the behaviour of block and inline boxes. The {{cssxref("display")}} property defines how a box and any boxes inside it behave. In the CSS Display Model Level 3, we can learn more about how the <code>display</code> property changes the behaviour of boxes and the boxes they generate.</p>
+
+<p>The display type of an element defines the outer display type; this dictates how the box displays alongside other elements in the same formatting context. It also defines the inner display type, which dictates how boxes inside this element behave. We can see this very clearly when considering a flex layout. In the example below I have a {{HTMLElement("div")}}, which I have given <code>display: flex</code>. The flex container behaves like a block element: it displays on a new line and takes up all of the space it can in the inline direction. This is the outer display type of <code>block</code>.</p>
+
+<p>The flex items however are participating in a flex formatting context, because their parent is the element with <code>display: flex</code>, which has an inner display type of <code>flex</code>, establishing the flex formatting context for the direct children.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p>
+
+<p>Therefore you can think of every box in CSS working in this way. The box itself has an outer display type, so it knows how to behave alongside other boxes. It then has an inner display type which changes the way its children behave. Those children then have an outer and inner display type too. The flex items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context. They have an inner display type of <em>flow</em> however, meaning that their children participate in normal flow. Items nested inside our flex item lay themselves out as block and inline elements unless something changes their display type.</p>
+
+<p>This concept of the outer and inner display type is important as this tells us that a container using a layout method such as Flexbox (<code>display: flex</code>) and Grid Layout (<code>display: grid</code>) is still participating in block and inline layout, due to the outer display type of those methods being <code>block</code>.</p>
+
+<h3 id="Changing_the_Formatting_Context_an_element_participates_in">Changing the Formatting Context an element participates in</h3>
+
+<p>Browsers display items as part of a block or inline formatting context in terms of what normally makes sense for that element. For example, a {{HTMLElement("strong")}} element is used to highlight a word and displays bold in browsers. It would not generally make sense for that <code>&lt;strong&gt;</code> element to be displayed as a block level element, breaking onto a new line. If you did want all <code>&lt;strong&gt;</code> elements to display as block elements, you could do so by setting <code>display: block</code> on <code>&lt;strong&gt;</code>. This means that you can always use most of the semantic HTML elements to markup your content, and then change the way it displays using CSS.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this guide, we have looked at how elements display in normal flow, as block and inline elements. Due to the default behaviour of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model">CSS Basic Box Model</a></li>
+ <li><em><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></em> - Learn Layout</li>
+ <li><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a></li>
+</ul>
diff --git a/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html b/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html
new file mode 100644
index 0000000000..c027e8eb3b
--- /dev/null
+++ b/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html
@@ -0,0 +1,85 @@
+---
+title: Введение в контексты форматирования
+slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_форматирования
+translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">В этой статье представлена концепция контекстов форматирования (formatting context). Существует несколько типов контекстов форматирования, например, блочный контекст форматирования (block formatting context, BFC), строчный контекст форматирования (inline formatting context), флексовый контекст форматирования (flex formatting context). В статье даны основы того, как они себя ведут, и как вы можете использовать это поведение.</span></p>
+
+<p>Всё на странице является частью <strong>контекста форматирования</strong> (formatting context), который представляет собой область, в которой происходит раскладка контента по определенным правилам. <strong>Блочный контекст форматирования</strong> (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, <strong>флексовый контекст форматирования</strong> (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.</p>
+
+<h2 id="Блочные_контексты_форматирования">Блочные контексты форматирования</h2>
+
+<p>Самый внешний элемент в документе, который использует правила блочной раскладки, устанавливает первый или <strong>начальный блочный контекст форматирования</strong> (initial block formatting context). Это означает, что все элементы внутри элемента <code>&lt;html&gt;</code> раскладываются в соответствии с нормальным потоком, следуя правилам блочной и строчной раскладки. Элементы, участвующие в <abbr title="Блочный контекст форматирования">БКФ</abbr>, используют правила, описанные в модели бокса (CSS Box Model), которая определяет, как поля (margins), границы (borders) и отступы (paddings) элемента взаимодействуют с другими блоками в том же контексте.</p>
+
+<h3 id="Создание_нового_блочного_контекста_форматирования">Создание нового блочного контекста форматирования</h3>
+
+<p>Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создает блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создает новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.</p>
+
+<p>Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создается в следующих случаях:</p>
+
+<ul>
+ <li>плавающие элементы ({{cssxref("float", "float: left", "#left")}} или {{cssxref("float", "float: right", "#right")}});</li>
+ <li>абсолютно позиционированные элементы ({{cssxref("position", "position: absolute", "#absolute")}}, {{cssxref("position", "position: fixed", "#fixed")}} или {{cssxref("position", "position: sticky", "#sticky")}});</li>
+ <li>элементы с {{cssxref("display", "display: inline-block", "#inline-block")}};</li>
+ <li>ячейки табицы или элементы с <code>display: table-cell</code>, включая анонимные ячейки таблицы, которые создаются, когда используются свойства <code>display: table-*</code>;</li>
+ <li>заголовки таблицы или элементы с <code>display: table-caption</code>;</li>
+ <li>блочные элементы, когда значение свойства overflow отлично от <code>visible</code>;</li>
+ <li>элементы с <code>display: flow-root</code> или <code>display: flow-root list-item</code>;</li>
+ <li>элементы с {{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code>, или <code>strict</code></li>
+ <li>{{Glossary("flex item", "флекс-элементы")}};</li>
+ <li>грид-элементы;</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">контейнеры мультиколонок</a>;</li>
+ <li>элементы с {{cssxref("column-span")}} в значении <code>all</code>.</li>
+</ul>
+
+
+
+<p>Let's have a look at a couple of these in order to see the effect creating a new <abbr title="Block Formatting Context">BFC</abbr>.</p>
+
+<p>In the example below, we have a floated element inside a <code>&lt;div&gt;</code> with a border applied. The content of that <code>div</code> has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the div now runs through the float. As explained in the <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">guide to in-flow and out of flow elements</a>, the float has been taken out of flow so the background and border of the div only contain the content and not the float.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>Creating a new <abbr title="Block Formatting Context">BFC</abbr> would contain the float. A typical way to do this in the past has been to set <code>overflow: auto</code> or set other values than the initial value of <code>overflow: visible</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p>Setting  <code>overflow: auto</code> created a new <abbr title="Block Formatting Context">BFC</abbr> containing the float. Our <code>div</code> now becomes a mini-layout inside our layout. Any child element will be contained inside it.</p>
+
+<p>The problem with using <code>overflow</code> to create a new <abbr title="Block Formatting Context">BFC</abbr> is that the <code>overflow</code> property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.</p>
+
+<h3 id="Explicitly_creating_a_BFC_using_display_flow-root">Explicitly creating a BFC using display: flow-root</h3>
+
+<p>Using <code>display: flow-root</code> (or <code>display: flow-root list-item)</code> on the containing block will create a new <abbr title="Block Formatting Context">BFC</abbr> without any other potentially problematic side-effects.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+
+<p>With <code>display: flow-root</code> on the {{HTMLElement("div")}}, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.</p>
+
+<p>The name of the <code>flow-root</code> keyword refers to the fact that you're creating something that serves, in essence, like a new root element (like {{HTMLElement("html")}} does), given how the new context is created and its flow layout functions.</p>
+
+<h2 id="Inline_formatting_contexts">Inline formatting contexts</h2>
+
+<p>Inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. The paragraph creates an inline formatting context inside which such things as {{HTMLElement("strong")}}, {{HTMLElement("a")}}, or {{HTMLElement("span")}} elements are used on text.</p>
+
+<p>The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may  overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+
+<h2 id="Other_formatting_contexts">Other formatting contexts</h2>
+
+<p>This guide covers flow layout and is therefore not referring to other possible formatting contexts. As such, it is useful to understand that creating any kind of formatting context will change the way elements inside that formatting context behave. This behavior is always described in the specification and also here on MDN.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this guide, we have looked in more detail at the block and Inline formatting contexts and the important subject of creating a block formatting context (<abbr title="Block Formatting Context">BFC</abbr>). In the next guide, we will find out <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">how normal flow interacts with different writing modes</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual Formatting Model</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model">CSS Box Model</a></li>
+</ul>
diff --git a/files/ru/web/css/css_fonts/index.html b/files/ru/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..4291fd6253
--- /dev/null
+++ b/files/ru/web/css/css_fonts/index.html
@@ -0,0 +1,132 @@
+---
+title: CSS Fonts
+slug: Web/CSS/CSS_Fonts
+translation_of: Web/CSS/CSS_Fonts
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Fonts</strong> - модуль в CSS, который определяет свойства связанные со шрифтами и как шрифтовые ресурсы загружаются. Модуль позволяет вам задать стиль шрифта, вроде font-family, font-size и font-weight, lineheight и варианты отображения знаков, когда для одного доступны сразу несколько</p>
+
+<h2 id="Базовый_пример">Базовый пример</h2>
+
+<p>Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг &lt;p&gt;.</p>
+
+<pre class="brush: css notranslate">p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;p&gt;Three hundred years ago&lt;br&gt;
+  I thought I might get some sleep&lt;br&gt;
+  I stretched myself out onna antique bed&lt;br&gt;
+  An' my spirit did a midnite creep&lt;/p&gt;</pre>
+
+<p>Вывод на экран будет следующим:</p>
+
+<p>{{EmbedLiveSample('Basic_example', '100%', '200')}}</p>
+
+<h2 id="Различные_примеры_шрифтов">Различные примеры шрифтов</h2>
+
+<p>Вы можете найти множетсво вариантов шрифтов на <a href="https://v-fonts.com/">v-fonts.com</a> и <a href="https://www.axis-praxis.org/">axis-praxis.org</a>; так же смотрите наше руководство <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts</a> для большей информации по использованию.</p>
+
+<h2 id="Отсылки">Отсылки</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("font-feature-settings")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+ <li>{{cssxref("font-language-override")}}</li>
+ <li>{{cssxref("font-optical-sizing")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-size-adjust")}}</li>
+ <li>{{cssxref("font-stretch")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-variation-settings")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
+</div>
+
+<h3 id="At-rules">At-rules</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+  <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
+  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+  <li>{{cssxref("@font-face/src", "src")}}</li>
+  <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{cssxref("@font-feature-values")}}</dt>
+</dl>
+
+<h2 id="Руководство">Руководство</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
+ <dd>В этой обучающей статье для новичков мы детально описываем основы стилизации текста/шрифта, включая определение жирности начертания, вида шрифта и стилей, рассматриваем сокращённую запись свойства font, декорации текста и другие эффекты, а так же межстрочные и межбуквенные интервалы.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">OpenType font features guide</a></dt>
+ <dd>Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде 'fi' или 'ffl'), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вэбе специальные свойства и свойства контроля нижнего уровня {{cssxref("font-feature-settings")}}. В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a></dt>
+ <dd><strong>Variable fonts</strong> are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Adds <code>font-variation-settings</code> (and related higher-level properties) and <code>font-optical-sizing</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Adds <code>font-feature-settings</code> (and related higher-level properties)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
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
new file mode 100644
index 0000000000..a616e84382
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -0,0 +1,724 @@
+---
+title: Основные понятия Grid Layout
+slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+---
+<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> представляет двумерную сетку для CSS. Grid (здесь и далее подразумевается <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> ) можно использовать для размещения основных областей страницы или небольших элементов пользовательского интерфейса. В этой статье описывается компоновка сетки CSS и новая терминология, которая является частью спецификации CSS Grid Layout Level 1. Функции, показанные в этом обзоре, будут более подробно описаны в остальной части данного руководства.</p>
+
+<h2 id="Что_такое_Grid">Что такое Grid?</h2>
+
+<p>Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий - один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.  Grid имеет следующие функции:</p>
+
+<h3 id="Фиксированные_и_гибкие_размеры_полос">Фиксированные и гибкие размеры полос</h3>
+
+<p>Вы можете создать сетку с фиксированными размерами полос — например, используя пиксели. Вы также можете создать сетку с гибкими размерами, используя проценты или новую единицу измерения - fr, предназначенную для этой цели.</p>
+
+<h3 id="Расположение_элемента">Расположение элемента</h3>
+
+<p>Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путем привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.</p>
+
+<h3 id="Создание_дополнительных_полос_для_хранения_контента">Создание дополнительных полос для хранения контента</h3>
+
+<p>Вы можете определить явную сетку с макетом сетки, но спецификация также касается контента, добавленного за пределами объявленной сетки, при необходимости добавляя дополнительные строки и столбцы. Включены такие функции, как добавление «столько столбцов, сколько будет помещено в контейнер».</p>
+
+<h3 id="Управление_выравниванием">Управление выравниванием</h3>
+
+<p>Grid содержит функции выравнивания, чтобы мы могли контролировать, как элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid.</p>
+
+<h3 id="Управление_перекрывающимся_контентом">Управление перекрывающимся контентом</h3>
+
+<p>В ячейку сетки может быть помещено более одного элемента, или области могут частично перекрывать друг друга. Затем это расслоение можно контролировать с помощью {{cssxref ("z-index")}}.</p>
+
+<p>Grid - это мощная спецификация и в сочетании с другими частями CSS, такими как <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, может помочь вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем <strong>grid контейнере</strong>.</p>
+
+<h2 id="Grid_контейнер">Grid контейнер</h2>
+
+<p>Мы создаем<em> grid контейнер</em>, объявляя<strong> display: grid </strong>или <strong>display: inline-grid </strong>на элементе. Как только мы это сделаем, <em>все прямые дети</em> этого элемента станут <em>элементами сетки</em>.</p>
+
+<p>В этом примере есть div, содержащий класс wrapper с пятью потомками</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Сделаем wrapper grid контейнером</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_контейнер', '200', '330') }}</p>
+
+<p>Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a>, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.</p>
+
+<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p>
+
+<p>По мере вашего обучения и последующей работы с CSS Grid Layout этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашей сеткой.</p>
+
+<p>Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.</p>
+
+<h2 id="Grid_Tracks">Grid Tracks</h2>
+
+<p>Мы определяем ряды и столбцы в нашей сетке при помощи свойств {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Это определяет полосы сетки. Полоса сетки — это место между любыми двумя линиями сетки. На изображении ниже вы можете увидеть подсветку полосы — первого трека ряда в нашей сетке.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p>
+
+<p>Можно дополнить пример выше, добавив свойство <code>grid-template-columns</code>  и  задав размеры полос колонок.</p>
+
+<p>В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.</p>
+
+<div id="grid_first">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p>
+</div>
+
+<h3 id="Единица_измерения_fr">Единица измерения fr</h3>
+
+<p>Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины <code>fr</code> представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.</p>
+
+<div id="fr_unit_ls">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p>
+</div>
+
+<p>В следующем примере мы создаем грид с треком в  <code>2fr</code> и двумя треками по  <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="Задание_треков_с_помощью_нотации_repeat">Задание треков с помощью нотации <code>repeat()</code></h3>
+
+<p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или ее часть. Например, такое задание грида:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>можно записать вот так:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создается грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с ее помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="Явный_и_неявный_грид">Явный и неявный грид</h3>
+
+<p>Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определенного данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создает строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задается автоматически в зависимости от находящегося в них контента.</p>
+
+<p>Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств {{cssxref("grid-auto-rows")}} и {{cssxref("grid-auto-columns")}}.</p>
+
+<p>В примере ниже мы задаем <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Явный_и_неявный_грид', '230', '420') }}</p>
+
+<h3 id="Масштабирование_треков_и_minmax">Масштабирование треков и <code>minmax()</code></h3>
+
+<p>При задании размеров явного грида или при определении размеров автоматически создаваемых колонок или строк может возникнуть следующая ситуация: мы хотим определить для треков минимальный размер, но при этом быть уверенными, что при необходимости треки растянутся, чтобы вместить весь добавленный в них контент. Например, нам нужно, чтобы строки никогда не становились меньше 100 пикселей, но если контент занимает, скажем, 300 пикселей в высоту, мы хотим, чтобы  строка тоже стала 300 пикселей.</p>
+
+<p>Для подобных ситуаций в Grid  предусмотрено решение с помощью функции {{cssxref("minmax", "minmax()")}}. В следующем примере  <code>minmax()</code> используется, как значение свойства {{cssxref("grid-auto-rows")}}. Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение <code>auto</code>. Использование <code>auto</code> означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке. </p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two
+   &lt;p&gt;I have some more content in.&lt;/p&gt;
+   &lt;p&gt;This makes me taller than 100 pixels.&lt;/p&gt;
+&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Масштабирование_треков_и_minmax', '240', '470') }}</p>
+
+<h2 id="Grid-линии">Grid-линии</h2>
+
+<p>Нужно заметить, что когда мы определяем грид, мы определяем грид-треки, а не грид-линии. После этого грид обеспечивает нас пронумерованными линиями, номера которых можно использовать для размещения элементов. Например, в гриде с тремя колонками и двумя рядами у нас - четыре колоночные линии.</p>
+
+<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
+
+<p>Линии нумеруются в соответствии с режимом написания (writing mode) документа. В языках с написанием слева-направо, линия 1 - самая левая линия в гриде. В языках с написанием справа-налево, линия 1 - самая правая линия в гриде. Линиям также можно давать имена, и - не переключайтесь, дальше мы узнаем, как это делать. </p>
+
+<h3 id="Размещение_элементов_по_линиям">Размещение элементов по линиям</h3>
+
+<p>В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек. </p>
+
+<p>В следующем примере мы размещаем первые два элемента в нашем гриде из трех колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.</p>
+
+<p>Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. </p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 100px;
+}
+.box1 {
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
+.box2 {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Размещение_элементов_по_линиям', '230', '420') }}</p>
+
+<p>Не забывайте, что Вы можете использовать <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.</p>
+
+<h2 id="Grid-ячейки">Grid-ячейки</h2>
+
+<p>Грид-ячейка (<em>grid cell)</em> - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определен для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.</p>
+
+<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p>
+
+<h2 id="Grid-области">Grid-области</h2>
+
+<p>Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создает грид-область (<em>grid area)</em>. Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. </p>
+
+<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p>
+
+<h2 id="Зазоры_Gutters">Зазоры (Gutters)</h2>
+
+<p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращенного свойства {{cssxref("grid-gap")}}. В примере ниже мы создаем зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Зазоры_Gutters') }}</p>
+
+<p>Любое пространство, которое занимают зазоры, добавляется в начало эластичных треков, задаваемых с помощью <code>fr</code>, поэтому зазоры используются для регулирования размеров и действуют как регулярные грид-треки, хотя что-то разместить в них нельзя. В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой грид-линии была добавлена толщина.</p>
+
+<h2 id="Вложенные_гриды">Вложенные гриды</h2>
+
+<p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трехколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p>
+
+<div id="nesting">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;
+       &lt;div class="nested"&gt;a&lt;/div&gt;
+       &lt;div class="nested"&gt;b&lt;/div&gt;
+       &lt;div class="nested"&gt;c&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="box box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box box3"&gt;Three&lt;/div&gt;
+    &lt;div class="box box4"&gt;Four&lt;/div&gt;
+    &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p>
+
+<p>Если мы задаем для <code>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p>
+
+<p>В данном случае вложенный грид не связан с родительским. Как Вы можете видеть, он не наследует значение свойства {{cssxref("grid-gap")}} родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.</p>
+
+<h3 id="Подгрид_Subgrid">Подгрид (Subgrid)</h3>
+
+<p>В спецификации гридов уровня 2 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.</p>
+
+<div class="note">
+<p>Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.</p>
+</div>
+
+<p>В приведенном выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: subgrid;
+}
+</pre>
+
+<h2 id="Размещение_элементов_с_помощью_z-index">Размещение элементов с помощью <code>z-index</code></h2>
+
+<p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещенными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p>
+
+<div id="l_ex">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;One&lt;/div&gt;
+   &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p>
+
+<p>Элемент <code>box2</code> теперь перекрывает <code>box1</code>, и отображается сверху, поскольку в исходном коде находится ниже.</p>
+
+<h3 id="Управление_порядком_отображения">Управление порядком отображения</h3>
+
+<p>Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства <code>z-index</code> - точно так же, как в случае с позиционированными элементами. Если задать <code>box2</code> значение <code>z-index</code> , меньшее, чем у <code>box1</code> , в стеке он отобразится под элементом <code>box1</code>.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   z-index: 2;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+   z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box box1"&gt;One&lt;/div&gt;
+    &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Управление_порядком_отображения', '230', '420') }}</p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Основные понятия grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
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
new file mode 100644
index 0000000000..cc8f7b4f75
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -0,0 +1,703 @@
+---
+title: Выравнивание блоков в CSS разметке Grid
+slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+---
+<p>Если вы знакомы с <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.</p>
+
+<p>Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера еще не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.</p>
+
+<p>В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнем с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.</p>
+
+<h2 id="Две_оси_grid_layout">Две оси grid layout</h2>
+
+<p>При работе с раскладкой сетки у вас есть две оси для выравнивания объектов - <em>оси</em> <em>блока или столбца</em>, <em>оси inline или строки</em>. Ось блока - это ось, на которой блоки выложены в макете блока. Если у вас есть два абзаца на вашей странице, они отображаются один под другим, поэтому в этом направлении мы описываем ось блока. В спецификации CSS Grid Layout она называется осью столбца, так как это ось, по которой выполняются наши дорожки столбцов.</p>
+
+<p><img alt="Image showing the location of the Block or Column axis." src="https://mdn.mozillademos.org/files/14725/7_Block_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p><em>Внутренняя ось (inline axis)</em> проходит по оси блока, это направление, в котором выполняется регулярный поток строк. В спецификации CSS Grid Layout его иногда называют осью строки, являющейся осью, по которой идут наши дорожки.</p>
+
+<p><img alt="Image demonstrating the Inline or Row axis location." src="https://mdn.mozillademos.org/files/14727/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p>Мы можем выровнять содержимое внутри областей сетки и сетка отслеживает себя на этих двух осях.</p>
+
+<h2 id="Выравнивание_элементов_на_блоке_или_столбце_по_оси">Выравнивание элементов на блоке или столбце по оси</h2>
+
+<p>Элементы управления {{cssxref ("align-self")}} и {{cssxref ("align-items")}} на оси блока. Когда мы используем эти свойства, мы меняем выравнивание элемента в области сетки, которую вы поместили.</p>
+
+<p>В следующем примере у меня есть четыре области сетки внутри моей сетки. Я могу использовать свойство {{cssxref ("align-items")}} в контейнере сетки, чтобы выровнять элементы, используя одно из следующих значений:</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<div id="alignment_1">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_1', '500', '450') }}</p>
+</div>
+
+<p>Имейте в виду, что после установки <code>align-self: start</code> высота каждого дочернего <code>&lt;div&gt;</code> будет определяться содержимым <code>&lt;div&gt;</code>. Это противоречит полностью отсутствию выравнивания и в этом случае высота каждого <code>&lt;div&gt; </code>растягивается, чтобы заполнить его область сетки.</p>
+
+<p>Свойство {{cssxref ("align-items")}} устанавливает свойство {{cssxref ("align-self")}} для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя <code>align-self</code> по элементу сетки.</p>
+
+<p>В следующем примере я использую свойство <code>align-self</code>, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения <code>start</code>, третий <code>end</code> и четвертый <code>center</code>.</p>
+
+<div id="alignment_2">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_2', '500', '450') }}</p>
+</div>
+
+<h3 id="Элементы_с_внутренним_соотношением_сторон">Элементы с внутренним соотношением сторон</h3>
+
+<p>Спецификация указывает, что поведение по умолчанию в {{cssxref ("align-self")}} должно растягиваться, за исключением элементов, которые имеют внутреннее соотношение сторон, в этом случае они ведут себя как <code>start</code>. Причиной этого является то, что если элементы с соотношением сторон настроены на растяжение, это значение по умолчанию будет искажать их.</p>
+
+<p>Это поведение было уточнено в спецификации, при этом браузеры еще не реализовали правильное поведение. Пока это не произойдет, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путем установки {{cssxref ("align-self")}} и {{cssxref ("justify-self") }} <code>start</code>. Это будет имитировать правильное поведение после его реализации.</p>
+
+<h2 id="Justifying_Items_on_the_Inline_or_Row_Axis">Justifying Items on the Inline or Row Axis</h2>
+
+<p>Поскольку {{cssxref ("align-items")}} и {{cssxref ("align-self")}} обрабатывают выравнивание элементов на оси блока, {{cssxref ("justify-items")}} и {{cssxref ("justify-self")}} выполнить ту же работу на оси inline или row. Значения, которые вы можете выбрать, такие же, как для <code>align-self</code>.</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>Вы можете увидеть тот же пример, что и для {{cssxref ("align-items")}} ниже. На этот раз мы применяем свойство {{cssxref ("justify-self")}}.</p>
+
+<p>Опять же, значение по умолчанию <code>stretch</code>, за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените ее, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:</p>
+
+<div id="alignment_3">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_3', '500', '450') }}</p>
+</div>
+
+<p>Как и {{cssxref ("align-self")}} и {{cssxref ("align-items")}}, вы можете применить {{cssxref ("justify-items")}} к контейнеру сетки, чтобы установить значение {{cssxref ("justify-self")}} для всех элементов.</p>
+
+<p>Свойства {{cssxref ("justify-self")}} и {{cssxref ("justify-items")}} не реализованы в flexbox. Это связано с одномерным характером <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> и может быть несколько элементов вдоль оси, что делает невозможным оправдание одного элемента. Чтобы выровнять элементы вдоль основной, встроенной оси в flexbox, вы используете свойство {{cssxref ("justify-content")}}.</p>
+
+<h2 id="Center_an_item_in_the_area">Center an item in the area</h2>
+
+<p>Объединив свойства align и justify, мы можем легко центрировать элемент внутри области сетки.</p>
+
+<div id="alignment_4">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+ &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_4', '500', '480') }}</p>
+</div>
+
+<h2 id="Aligning_the_grid_tracks_on_the_block_or_column_axis">Aligning the grid tracks on the block, or column, axis</h2>
+
+<p>Если у вас есть ситуация, когда ваши дорожки сетки используют область, которая меньше, чем контейнер сетки, вы можете выровнять трассы сетки самостоятельно внутри контейнера. И снова это работает на блочной и встроенной осях с {{cssxref ("align-content")}} выравниванием дорожек на оси блока и {{cssxref ("justify-content")}}, выполняющим выравнивание по встроенной оси. Значения для {{cssxref ("align-content")}} и {{cssxref ("justify-content")}}:</p>
+
+<ul>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>В приведенном ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным желобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.</p>
+
+<p>Свойство <code>align-content</code> применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки <code>start</code>, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:</p>
+
+<div id="alignment_5">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_5', '500', '520') }}</p>
+
+<p>Если я добавлю <code>align-conten</code> в мой контейнер со значением <code>end</code>, все треки перейдут в конечную строку контейнера сетки в размерности блока:</p>
+</div>
+
+<div id="alignment_6">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_6', '500', '520') }}</p>
+</div>
+
+<p>Мы также можем использовать значения для этого свойства, которые могут быть знакомы с flexbox; значения пространственного распределения <code>space-between</code>, <code>space-around</code> и <code>space-evenly</code>. Если мы обновим {{cssxref ("align-content")}} до <code>space-between</code>, вы увидите как выглядят элементы на нашем пространстве grid:</p>
+
+<div id="alignment_7">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_7', '500', '520') }}</p>
+</div>
+
+<p>Стоит отметить, что использование этих значений пространственного распределения может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, так как дополнительное пространство добавляется между дорожками, этот предмет должен стать большим, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших треков может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их перемещаться в начало, а не растягиваться.</p>
+
+<p>В приведенном ниже изображении я поместил сетку с <code>align-content</code>, со значением <code>start</code> рядом с сеткой, когда значение <code>align-content</code> имеет значение <code>space-between</code>. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:</p>
+
+<p><img alt="Demonstrating how items become larger if we use space-between." src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p>
+
+<h2 id="Justifying_the_grid_tracks_on_the_row_axis">Justifying the grid tracks on the row axis</h2>
+
+<p>На оси inline мы можем использовать {{cssxref ("justify-content")}} для выполнения того же типа выравнивания, что мы использовали {{cssxref ("align-content")}} для оси блока.</p>
+
+<p>Используя тот же пример, я устанавливаю {{cssxref ("justify-content")}} <code>space-around</code>. Это снова вызывает дорожки, которые охватывают более одного столбца, чтобы получить дополнительное пространство:</p>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_8', '500', '500') }}</p>
+</div>
+
+<h2 id="Alignment_and_auto_margins">Alignment and auto margins</h2>
+
+<p>Другой способ выравнивания элементов внутри их области - использовать автоматические поля. Если вы когда-либо центрировали ваш макет в окне просмотра, установив правое и левое поле блока контейнера в <code>auto</code>, вы знаете, что автоматическая маржа поглощает все доступное пространство. Установив маржу в <code>auto</code> с обеих сторон, она выдвигает блок в середину, так как оба поля пытаются взять все пространство.</p>
+
+<p>В следующем примере я дал элементу 1 левое поле <code>auto</code>. Вы можете увидеть, как содержимое теперь переместится в правую часть области, поскольку автоматическая маржа занимает оставшееся пространство после того, как было назначено место для содержимого этого элемента:</p>
+
+<div id="alignment_9">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_9', '500', '500') }}</p>
+</div>
+
+<p>Вы можете видеть, как элемент выравнивается с помощью <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a>:</p>
+
+<p><img alt="Image showing auto-margins using the Grid Highlighter." src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p>
+
+<h2 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h2>
+
+<p>Во всех этих примерах я работал на английском языке, который является языком слева направо. Это означает, что наши стартовые линии находятся сверху и слева от нашей сетки, когда мы думаем в физических направлениях.</p>
+
+<p>CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справо налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для <code>justify-content: start</code> будет состоять в том, что треки сетки начинаются с правой стороны сетки.</p>
+
+<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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
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
new file mode 100644
index 0000000000..48eec35abe
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html
@@ -0,0 +1,498 @@
+---
+title: 'CSS grids, logical values and writing modes'
+slug: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes'
+translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes'
+---
+<p class="summary">В этих руководствах я уже затронул важную особенность grid layout: поддержка различных режимов записи, встроенных в спецификацию. В этом руководстве мы рассмотрим эту особенность grid и других современных методов компоновки, немного узнав о режимах записи и логических и физических свойствах, когда мы это делаем.</p>
+
+<h2 id="Логические_и_физические_свойства_и_ценности">Логические и физические свойства и ценности</h2>
+
+<p>CSS полон <strong>физических</strong> слов позиционирования - слева и справа, сверху и снизу. Если мы позиционируем элемент с использованием абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы обжимать элемент вокруг. В нижеприведенном фрагменте кода элемент помещается в 20 пикселей сверху и 30 пикселей слева от контейнера:</p>
+
+<pre class="brush:css">.container {
+  position: relative;
+}
+.item {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="item"&gt;Item&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Еще одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать <code>text-align: right</code> выравнивать текст вправо. В CSS есть также физические <strong>свойства</strong>. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.</p>
+
+<p>Мы называем эти ключевые слова и свойства <em>физическими</em>, потому что они относятся к экрану, на который вы смотрите. Слева всегда слева, независимо от того, в каком направлении работает ваш текст.</p>
+
+<p>Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведенном ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (<code>text-align</code>) влево. Я добавил <code>dir = "rtl"</code> в элемент <code>html</code>, который переключает режим записи по умолчанию для документа на английском языке <code>ltr</code>. Вы можете видеть, что первый абзац остается слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.</p>
+
+<p><img alt="A simple example of text direction." src="https://mdn.mozillademos.org/files/14733/8_direction_simple_example.png" style="height: 354px; width: 1136px;"></p>
+
+<p>Это очень простой пример проблемы с физическими значениями и свойствами, которые используются в CSS. Они не позволяют браузеру выполнять работу по переключению режима записи, поскольку они делают предположение, что текст течет слева направо и сверху вниз.</p>
+
+<h3 id="Логические_свойства_и_значения">Логические свойства и значения</h3>
+
+<p>Логические свойства и значения не делают предположения о направлении текста. Именно поэтому в Grid Layout мы используем ключевое слово <code>start</code> при выравнивании чего-либо с началом контейнера. Для меня, работая на английском языке, <code>start</code> может быть слева, но это не обязательно и слово <code>start</code> не имеет физического местоположения.</p>
+
+<h2 id="Block_и_Inline">Block и Inline</h2>
+
+<p>Как только мы начнем заниматься логическими, а не физическими свойствами, мы перестаем видеть мир как слева направо, так и сверху вниз. Нам нужна новая контрольная точка и именно здесь понимание использования <em>блока</em> и <em>встроенных</em> осей, которые мы встретили ранее в руководстве по выравниванию, становится очень полезным. Если вы можете начать видеть макет с точки зрения блочного и встроенного, то, как все работает в сетке, становится намного больше смысла.</p>
+
+<p><img alt="An image showing the default direction of the Block and Inline Axes." src="https://mdn.mozillademos.org/files/14735/8-horizontal-tb.png" style="height: 256px; width: 500px;"></p>
+
+<h2 id="Режимы_записи_CSS">Режимы записи CSS</h2>
+
+<p>Я собираюсь представить здесь еще одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о <a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes</a>. Это более подробно описано в этой спецификации, чем мы коснемся здесь.</p>
+
+<h3 id="writing-mode">writing-mode</h3>
+
+<p>Режимы записи - это больше, чем текст слева направо и справа налево, а свойство <code>writing-mode</code> помогает отображать текст в других направлениях. Свойство {{cssxref ("write-mode")}} может иметь значения:</p>
+
+<ul>
+ <li><code>horizontal-tb</code></li>
+ <li><code>vertical-rl</code></li>
+ <li><code>vertical-lr</code></li>
+ <li><code>sideways-rl</code></li>
+ <li><code>sideways-lr</code></li>
+</ul>
+
+<p>Значение <code>horizontal-tb</code> является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. <a href="https://24ways.org/2016/css-writing-modes/">Jen’s article</a>. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию <code>horizontal-tb</code>, а второй использует <code>vertical-rl</code>. В тексте режима все еще выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.</p>
+
+<div id="writing_1">
+<div class="hidden">
+<pre class="brush: css">.wrapper &gt; p {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    margin: 1em;
+    color: #d9480f;
+    max-width: 300px;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;p style="writing-mode: horizontal-tb"&gt;I have writing mode set to the default &lt;code&gt;horizontal-tb&lt;/code&gt;&lt;/p&gt;
+  &lt;p style="writing-mode: vertical-rl"&gt;I have writing mode set to &lt;code&gt;vertical-rl&lt;/code&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_1', '500', '420') }}</p>
+</div>
+
+<h2 id="Writing_modes_в_grid_layouts">Writing modes в grid layouts</h2>
+
+<p>Если мы сейчас рассмотрим пример компоновки сетки, мы увидим, как изменение режима записи означает изменение нашей идеи о том, где находятся Block и Inline Axis.</p>
+
+<p>В моем следующем примере сетка имеет три столбца и две строки. Это означает, что на оси блока есть три дорожки. В режиме записи по умолчанию сетка автоматически помещает элементы, начинающиеся в верхнем левом углу, перемещаясь вправо, заполняя три ячейки на встроенной оси. Затем он переходит на следующую строку, создавая новый дорожку Row и заполняя больше элементов:</p>
+
+<div id="writing_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+  &lt;div class="item5"&gt;Item 5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_2', '500', '330') }}</p>
+</div>
+
+<p>Если мы добавим <code>writing-mode: vertical-lr</code> в контейнер сетки, мы увидим, что блок и встроенная ось теперь работают в другом направлении. Ось блока или столбца теперь проходит через страницу слева направо, Inline запускается вниз по странице, создавая строки сверху вниз.</p>
+
+<div id="writing_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+  &lt;div class="item5"&gt;Item 5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_3', '500', '330') }}</p>
+</div>
+
+<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="https://mdn.mozillademos.org/files/14737/8-vertical-lr.png" style="height: 360px; width: 257px;"></p>
+
+<h2 id="Логические_значения_для_выравнивания">Логические значения для выравнивания</h2>
+
+<p>Когда блок и встроенная ось могут изменять направление, логические значения свойств выравнивания начинают иметь больше смысла.</p>
+
+<p>В следующем примере я использую выравнивание для выравнивания элементов внутри сетки, которая настроена на <code>writing-mode: vertical-lr</code>. <code>start</code> и <code>end</code> свойства работают точно так же, как в режиме записи по умолчанию, и остаются логичными в том смысле, что использование левого и правого, верхнего и нижнего уровней для выравнивания элементов не будет выполнено. Это происходит, когда мы перевернули сетку сбоку, например:</p>
+
+<div id="writing_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 10px;
+}
+
+.item1 {
+    grid-column: 1 / 4;
+    align-self: start;
+}
+
+.item2 {
+    grid-column: 1 / 3;
+    grid-row: 2 / 4;
+    align-self: start;
+}
+
+.item3 {
+    grid-column: 3;
+    grid-row: 2 / 4;
+    align-self: end;
+    justify-self: end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_4', '500', '330') }}</p>
+</div>
+
+<p>Если вы хотите посмотреть, как они работают, как справа, так и сверху вниз, переключите <code>vertical-lr</code> на <code>vertical-rl,</code> который является вертикальным режимом записи, работающим справа налево.</p>
+
+<h2 id="Auto-placement_and_Writing_Modes">Auto-placement and Writing Modes</h2>
+
+<p>В примере, который уже показан, вы можете видеть, как режим записи меняет направление, в котором элементы помещаются в сетку. Элементы по умолчанию помещают себя вдоль оси Inline, а затем переходят в новую строку. Однако эта линейная ось может не всегда выполняться слева направо.</p>
+
+<h2 id="Линейное_размещение_и_режимы_записи">Линейное размещение и режимы записи</h2>
+
+<p>Главное, что следует помнить при размещении элементов по номеру строки, является то, что строка 1 является стартовой линией, независимо от того, в каком режиме записи вы находитесь. Строка -1 - это конечная строка, независимо от того, в каком режиме записи вы находитесь.</p>
+
+<p>В следующем примере у меня есть сетка, которая находится в направлении по умолчанию <code>ltr</code>. Я разместил три элемента, используя линейное размещение.</p>
+
+<ul>
+ <li>Item 1 starts at column line 1, охватывающей один трек.</li>
+ <li>Item 2 starts at column line -1, охватывая -3.</li>
+ <li>Item 3 starts at column line 1, охватывая строку столбца 3.</li>
+</ul>
+
+<div id="writing_5">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+    grid-column: 1 ;
+}
+.item2 {
+    grid-column: -1 / -3;
+}
+.item3 {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+        &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+        &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_5', '500', '330') }}</p>
+</div>
+
+<p>Если теперь добавить свойство {{cssxref ("direction")}} со значением <code>rtl</code> в контейнер сетки, строка 1 станет правой частью сетки, а строка -1 - слева.</p>
+
+<div id="writing_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  direction: rtl;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+    grid-column: 1 ;
+}
+.item2 {
+    grid-column: -1 / -3;
+}
+.item3 {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+        &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+        &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_6', '500', '330') }}</p>
+</div>
+
+<p>То, что это демонстрирует, заключается в том, что если вы переключаете направление текста на целые страницы или на части страниц и используете строки: вы можете назвать свои строки, если вы не хотите, чтобы макет полностью переключал направление , для некоторых вещей, например, когда сетка содержит текстовое содержимое, это переключение может быть именно тем, что вы хотите. Для других целей это не так.</p>
+
+<h3 id="Странный_порядок_значений_в_свойстве_grid-area">Странный порядок значений в свойстве grid-area</h3>
+
+<p>Вы можете использовать свойство {{cssxref ("grid-area")}}, чтобы указать все четыре строки области сетки как одно значение. Когда люди впервые сталкиваются с этим, они часто удивляются тому, что значения не следуют тому же порядку, что и сокращенное поле, которое работает по часовой стрелке: сверху, справа, внизу, слева.</p>
+
+<p>Порядок значений <code>grid-area</code>:</p>
+
+<ul>
+ <li><code>grid-row-start</code></li>
+ <li><code>grid-column-start</code></li>
+ <li><code>grid-row-end</code></li>
+ <li><code>grid-column-end</code></li>
+</ul>
+
+<p>Что для английского языка, слева направо означает, что заказ:</p>
+
+<ul>
+ <li><code>top</code></li>
+ <li><code>left</code></li>
+ <li><code>bottom</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>Это против часовой стрелки! Итак, обратное тому, что мы делаем для полей и заполнения. Как только вы поймете, что <code>grid-area</code> видит мир как "block и inline", вы можете помнить, что мы устанавливаем два запуска, а затем два конца. Когда вы знаете, это становится намного логичнее!</p>
+
+<h2 id="Смешанные_режимы_записи_и_макет_сетки">Смешанные режимы записи и макет сетки</h2>
+
+<p>В дополнение к отображению документов, используя правильный режим записи для языка, режимы записи могут быть использованы творчески в документах, которые в противном случае будут <code>ltr</code>. В следующем примере у меня есть макет сетки с набором ссылок вниз с одной стороны. Я использовал режимы записи, чтобы включить их на стороне в треке столбца:</p>
+
+<div id="writing_7">
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: 1fr auto;
+    font: 1em Helvetica, Arial, sans-serif;
+}
+.wrapper nav {
+    writing-mode: vertical-lr;
+}
+.wrapper ul {
+    list-style: none;
+    margin: 0;
+    padding: 1em;
+    display: flex;
+    justify-content: space-between;
+}
+.wrapper a {
+    text-decoration: none;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;div class="content"&gt;
+            &lt;p&gt;Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.&lt;/p&gt;
+
+&lt;p&gt;Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.&lt;/p&gt;
+        &lt;/div&gt;
+        &lt;nav&gt;
+            &lt;ul&gt;
+                &lt;li&gt;&lt;a href=""&gt;Link 1&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Link 2&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Link 3&lt;/a&gt;&lt;/li&gt;
+            &lt;/ul&gt;
+        &lt;/nav&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_7', '500', '330') }}</p>
+</div>
+
+<h2 id="Физические_значения_и_grid_layout">Физические значения и grid layout</h2>
+
+<p>Мы часто сталкиваемся с физическими свойствами при создании веб-сайтов и в то время как свойства и значения размещения и выравнивания сетки соответствуют режимам записи, есть вещи, которые вы можете сделать с Grid, которые заставляют вас использовать физические свойства и значения. В руководстве по <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">выравниванию ячеек и сеткам</a> я продемонстрировал, как автоматические поля работают в области сетки. Использование автоматической маржи, чтобы оттолкнуть один элемент от других, является общим трюком flexbox, однако это также связывает макет с физическим пространством.</p>
+
+<p>Если вы используете абсолютное позиционирование в области сетки, то вы снова будете использовать физические смещения, чтобы нажимать элемент вокруг области сетки. Главное, что нужно знать, - это напряжение между физическими и логическими свойствами и ценностями. Например, имейте в виду, что вам может потребоваться внести изменения в ваш CSS, чтобы справиться с переходом от <code>ltr</code> до <code>rtl</code>.</p>
+
+<h3 id="Логические_свойства_для_всего!">Логические свойства для всего!</h3>
+
+<p>Наши новые методы компоновки дают нам возможность использовать эти логические значения для размещения элементов, однако, как только мы начнем объединять их с физическими свойствами, используемыми для полей и отступов, нам нужно помнить, что эти физические свойства не изменятся в соответствии с режимом записи.</p>
+
+<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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..d02227c33f
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/index.html
@@ -0,0 +1,234 @@
+---
+title: CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<p><strong>CSS Grid layout</strong> отлично подходит для того, чтобы разделить страницу на основные области или определить взаимосвязь размера, позиционирования и уровня между частями контента, состоящего из HTML примитивов.</p>
+
+<p>Как и таблицы (&lt;table&gt;), grid layout позволяет выравнивать элементы в столбцы и строки. Тем не менее, с помощью CSS grid работать с элементами гораздо проще, чем с таблицами. Например, дочерние элементы grid-контейнера могут наслаиваться друг на друга как  и другие элементы при помощи CSS.</p>
+
+<h2 id="Basic_Example" name="Basic_Example">Базовый пример</h2>
+
+<p>В приведенном ниже примере показана сетка  состоящая из трех колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.</p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;One&lt;/div&gt;
+  &lt;div class="two"&gt;Two&lt;/div&gt;
+  &lt;div class="three"&gt;Three&lt;/div&gt;
+  &lt;div class="four"&gt;Four&lt;/div&gt;
+  &lt;div class="five"&gt;Five&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
+</div>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<h3 id="CSS_свойства">CSS свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_функции">CSS функции</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="Глоссарий">Глоссарий</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li>
+ <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li>
+</ul>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Базовая концепция Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Связь Grid Layout с другими методами компоновки</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">И</a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">спользование</a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines"> именованных линий</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Шаблон области сетки</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">И</a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">спользование</a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines"> именованных линий</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Авторазмещение в CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание блока в CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Сетка, логические Значения и Режимы Редактирования</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout и доступность</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Реализация общих макетов используя CSS Grid</a></li>
+</ul>
+</div>
+
+<h2 id="Внешние_ресурсы">Внешние ресурсы</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Примеры от Jen Simmons</a></li>
+ <li><a href="http://gridbyexample.com/">Grid by Example - Коллекция примеров использования и видео уроки</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Grid') }}</td>
+   <td>{{ Spec2('CSS3 Grid') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<section class="Quick_links" 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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
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
new file mode 100644
index 0000000000..e20cbc76c8
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -0,0 +1,493 @@
+---
+title: Layout using named grid lines
+slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
+translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
+---
+<p>В предыдущих руководствах мы рассматривали размещение элементов по линиям, созданным путем определения треков сетки, а также способы размещения элементов с помощью именованных областей шаблона. В этом руководстве мы рассмотрим, как эти две вещи работают вместе, когда мы используем именование линий. Именование линий очень полезно, но  при комбинировании именований и размеров сетки иногда получаются очень запутанный синтаксис. Представленные примеры помогут внести ясность и упростить понимание синтаксиса.</p>
+
+<h2 id="Именование_линий_при_определении_сетки">Именование линий при определении сетки</h2>
+
+<p>Когда вы определяете свою сетку с помощью свойств <code>grid-template-rows </code>и <code>grid-template-columns</code>, вы можете присвоить имя некоторым или всем линиям в вашей сетке. Для демонстрации я использую простой макет, созданный в руководстве по линейному размещению. На этот раз я создам сетку, используя именованные линии.</p>
+
+<div id="example_named_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена <code>main-start</code> для начала и <code>main-end</code> для конца контейнера, причем как для строк, так и для столбцов. Затем определил центральный блок сетки как <code>content-start</code> и <code>content-end</code>, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+</pre>
+
+<p>Теперь, когда линии имеют свои имена, мы можем использовать эти мена для размещения элементов.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('example_named_lines', '500', '330') }}</p>
+</div>
+
+<p>Теперь при линейном размещении вы можете смешивать номера строк или их имена. Именование строк полезно при создании адаптивного дизайна, в котором вы переопределяете саму сетку, а не положение содержимого внутри сетки.</p>
+
+<h3 id="Присвоение_линиям_нескольких_имен">Присвоение линиям нескольких имен</h3>
+
+<p>При необходимости можно присвоить строке более одного имени. Например, <code>sidebar-end</code> для обозначении конца области <code>sidebar</code>, и <code>main-start</code> для начала области <code>main</code>. Укажите имена внутри квадратных скобок через пробел <code>[sidebar-end main-start]</code>. В дальнейшем вы можете обращаться к этой строке по любому из этих имен.</p>
+
+<h2 id="Неявные_области_сетки_из_именованных_линий">Неявные области сетки из именованных линий</h2>
+
+<p>Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a> - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведет к путанице - например, <code>span</code>. Идентификаторы не заключаются в кавычки.</p>
+
+<p>Хотя вы можете выбрать любые имена, но если вы добавляете <code>-start</code> и <code>-end</code> к линиям вокруг области, как в приведенном выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмем приведенный выше пример, у меня есть <code>content-start</code> и <code>content-end</code> как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем <code>content</code>, которую можно по своему усмотрению.</p>
+
+<div id="implicit_areas_from_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>Я использую те же определения сетки, что и выше, однако на этот раз я собираюсь поместить один элемент в содержимое <code>content</code> области.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="thing"&gt;I am placed in an area named content.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}</p>
+</div>
+
+<p>Нам не нужно определять, где находятся наши области с помощью <code>grid-template-areas</code> поскольку наши именованные линии создали для нас эту область.</p>
+
+<h2 id="Неявные_линии_сетки_из_именованных_областей">Неявные линии сетки из именованных областей</h2>
+
+<p>Мы видели, как с помощью именованных линий можно создать именованную область. Это работает и наоборот. Именованные области создают именованные строки, которые можно использовать для размещения элементов. Если мы возьмем макет, созданный в руководстве по областям шаблона сетки, мы можем использовать линии, созданные нашими областями, чтобы увидеть, как это работает.</p>
+
+<p>В этом примере я добавил дополнительный div с классом <code>overlay</code>. Мы назвали области, созданные с помощью свойства grid-area, а затем макет, созданный в grid-template-areas. Именованные области:</p>
+
+<ul>
+ <li><code>hd</code></li>
+ <li><code>ft</code></li>
+ <li><code>main</code></li>
+ <li><code>sd</code></li>
+</ul>
+
+<p>Строки и линии:</p>
+
+<ul>
+ <li><code>hd-start</code></li>
+ <li><code>hd-end</code></li>
+ <li><code>sd-start</code></li>
+ <li><code>sd-end</code></li>
+ <li><code>main-start</code></li>
+ <li><code>main-end</code></li>
+ <li><code>ft-start</code></li>
+ <li><code>ft-end</code></li>
+</ul>
+
+<p>Вы можете видеть именованные строки на рисунке, обратите внимание, что некоторые строки имеют двойное именование - например, <code>sd-end</code> и <code>main-start</code> относящиеся к одной и той же строке столбца.</p>
+
+<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p>
+
+<p>Позиционировать <code>overlay</code> используя неявные именованные линии, это то же самое, что позиционировать элемент с помощью названных нами строк..</p>
+
+<div id="implicit_lines_from_area">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+.header {
+  grid-area: hd;
+}
+
+.footer {
+  grid-area: ft;
+}
+
+.content {
+  grid-area: main;
+}
+
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper &gt; div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;Header&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+  &lt;div class="content"&gt;Content&lt;/div&gt;
+  &lt;div class="footer"&gt;Footer&lt;/div&gt;
+  &lt;div class="overlay"&gt;Overlay&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}</p>
+</div>
+
+<p>Учитывая, что у нас есть возможность позиционировать создание линий из именованных областей и областей из именованных линий, стоит потратить время на планирование стратегии именования, когда вы начинаете создавать свой макет. Выбирайте имена, которые будут иметь смысл для вас и вашей команды, это облегчит использование созданных вами макетов.</p>
+
+<h2 id="Определение_одноименных_линий_при_помощи_функции_repeat">Определение одноименных линий при помощи функции repeat()</h2>
+
+<p>Если вы хотите дать всем линиям в вашей сетке уникальное имя, то вам нужно будет написать длинное определение трека, а не использовать синтаксис повтора, так как вам нужно добавить имя в квадратных скобках при определении треков. Если вы используете синтаксис повтора, то в конечном итоге получите несколько строк с одинаковым именем, однако это тоже может быть очень полезно.</p>
+
+<p>В следующем примере я создаю сетку с двенадцатью равными по ширине столбцами. Перед определением размера 1fr трека столбца я также определяю имя строки <code>[col-start]</code>. Это означает, что в конечном итоге мы получим сетку, содержащую 12 строк столбцов с именами <code>col-start</code> перед столбцом шириной <code>1fr</code> .</p>
+
+<div id="multiple_lines_same_name">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}</pre>
+
+<p>После того, как вы создали сетку, вы можете разместить на ней элементы. Поскольку у нас есть несколько строк с именем col-start, если вы размещаете элемент после строки col-start, сетка использует самую первую строку с именем col-start, в нашем случае это будет крайняя левая строка. Чтобы обратиться к другой строке, используйте имя плюс номер для этой строки:</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / col-start 5
+}
+</pre>
+
+<p>Вы можете использовать ключевое слово <code>span</code>. Следующий элемент будет расоложен начиная с седьмой линии и займет три линии.</p>
+
+<pre class="brush: css">.item2 {
+  grid-column: col-start 7 / span 3;
+}
+</pre>
+
+<p class="brush: html"></p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;I am placed from col-start line 1 to col-start 5&lt;/div&gt;
+  &lt;div class="item2"&gt;I am placed from col-start line 7 spanning 3 lines&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}</p>
+</div>
+
+<p>Если вы посмотрите на этот макет в Firefox Grid Highlighter вы можете увидеть, как отображаются линии столбцов и как наши элементы помещаются против этих линий..</p>
+
+<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p>
+
+<p>Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведенный ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+</pre>
+
+<p>Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имен в неповторяющемся определении трека. Следующее определение создает четыре трека 1fr, каждый из которых имеет начальную и конечную линии.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+</pre>
+
+<p>Если мы запишем это определение без использования повторяющейся нотации, то оно будет выглядеть следующим образом .</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+</pre>
+
+<p>Если вы использовали список треков, то вы можете использовать ключевое слово <code>span</code> не только для охвата ряда строк, но и для охвата ряда строк с определенным именем..</p>
+
+<div id="span_line_number">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;I am placed from col1-start line 1 to col2-start line 2&lt;/div&gt;
+  &lt;div class="item2"&gt;I am placed from col1-start line 2 spanning 2 lines named col1-start&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('span_line_number', '500', '330') }}</p>
+</div>
+
+<p>За последние три руководства вы обнаружили, что существует множество различных способов размещения элементов с помощью сетки. На первый взгляд это может показаться чрезмерно сложным, но помните, что вам не нужно использовать их все. На практике я нахожу, что для простых макетов хорошо работает использование именованных областей шаблонов, это дает хорошее визуальное представление о том, как выглядит ваш макет, и возможность легко перемещать элементы по сетке.</p>
+
+<p>Если вы работаете со строгим макетом из нескольких столбцов, например, демонстрация именованных строк в последней части этого руководства работает очень хорошо. Если вы рассматриваете сеточные системы, в таких фреймворках, как Foundation или Bootstrap, которые основаны на сетке из 12 столбцов. Затем фреймворк импортирует код для выполнения всех вычислений, чтобы убедиться, что столбцы складываются до 100%. С помощью Grid layout единственный код, который нам нужен для нашего грид-фреймворка, - это:</p>
+
+<div class="three_column">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+</pre>
+
+<p>Затем мы можем использовать этот фреймворк для верстки нашей страницы. Например, чтобы создать макет из трех столбцов с верхним и нижним колонтитулами, у меня может быть следующая разметка.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-header"&gt;I am the header&lt;/header&gt;
+  &lt;aside class="side1"&gt;I am sidebar 1&lt;/aside&gt;
+  &lt;article class="content"&gt;I am the main article&lt;/article&gt;
+  &lt;aside class="side2"&gt;I am sidebar 2&lt;/aside&gt;
+  &lt;footer class="main-footer"&gt;I am the footer&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Затем я мог бы разместить это в своей структуре компоновки сетки следующим образом.</p>
+
+<pre class="brush: css">.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('three_column', '500', '330') }}</p>
+
+<p>Опять же , маркер сетки полезен, чтобы показать нам, как работает сетка, в которую мы поместили наши элементы.</p>
+
+<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p>
+</div>
+
+<p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнете создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдете свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p>
+
+<section class="Quick_links" 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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
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
new file mode 100644
index 0000000000..ad8e4e9186
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -0,0 +1,593 @@
+---
+title: Realizing common layouts using CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
+---
+<p>Чтобы завершить набор руководств по CSS Grid Layout, я собираюсь пройтись по основным видам макетов, которые демонстрируют несколько различных методов, которые можно использовать при проектировании с помощью grid layout. Мы рассмотрим пример использования областей сетки-шаблона, типичную гибкую сеточную систему с 12 столбцами, а также список продуктов с использованием автоматического размещения. Как вы можете видеть из этого списка примеров, существует несколько способов достижения желаемого результата с помощью компоновки сетки. Выберите метод, который вы считаете наиболее полезным для решения проблем, которые вы решаете, и проектов, которые вам нужно реализовать.</p>
+
+<h2 id="Адаптивный_1-3_колоночный_макет_с_использованием_grid-template-areas"><font face="Liberation Sans, sans-serif"><font size="4">Адаптивный 1-3 колоночный макет с использованием</font></font> <code>grid-template-areas</code></h2>
+
+<p>Многие веб-сайты являются разновидностью такого типа макета, с основным содержанием, боковыми панелями, хедером и футером. В адаптивном дизайне вы можете отобразить макет в виде одного столбца, добавив боковую панель в определенном месте, а затем ввести макет из трех столбцов для более широких экранов.</p>
+
+<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p>
+
+<p>Я собираюсь создать этот макет, используя именованные области шаблонов, о которых мы узнали в руководстве <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em>.</p>
+
+<p>Моя разметка-это контейнер с элементами внутри для хедера и футера, основного контента, навигации, боковой панели и блока, в который я собираюсь поместить рекламу.</p>
+
+<div id="layout_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+    .wrapper {
+        max-width: 1024px;
+        margin: 0 auto;
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+
+    .wrapper &gt; * {
+        border: 2px solid #f08c00;
+        background-color: #ffec99;
+        border-radius: 5px;
+        padding: 10px;
+    }
+
+    nav ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;header class="main-head"&gt;The header&lt;/header&gt;
+        &lt;nav class="main-nav"&gt;
+            &lt;ul&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+            &lt;/ul&gt;
+        &lt;/nav&gt;
+        &lt;article class="content"&gt;
+            &lt;h1&gt;Main article area&lt;/h1&gt;
+            &lt;p&gt;In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.&lt;/p&gt;
+        &lt;/article&gt;
+        &lt;aside class="side"&gt;Sidebar&lt;/aside&gt;
+        &lt;div class="ad"&gt;Advertising&lt;/div&gt;
+        &lt;footer class="main-footer"&gt;The footer&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Поскольку мы используем {{cssxref("grid-template-areas")}} для создания макета, вне каких-либо медиа-запросов, мне нужно назвать области. Мы называем области, используя свойство {{cssxref("grid-area")}}.</p>
+
+<pre class="brush: css">.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+</pre>
+
+<p>Это не создаст никакого макета, однако наши элементы теперь имеют имена, которые мы можем использовать для создания. Оставаясь вне каких-либо медиа-запросов, я теперь собираюсь настроить макет для мобильной платформы. Здесь я держу все в исходном порядке, пытаясь избежать любого разрыва между источником и дисплеем, как описано в руководстве <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Grid layout and accessibility</a></em>. У меня нет столбцов или строк, т. к. такой макет предполагает один столбец, и строки будут создаваться по мере необходимости для каждого из элементов неявной сетки.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+</pre>
+
+<p>После настройки мобильного макета мы получим единственный столбец при всех размерах экрана, теперь мы можем добавить медиа-запрос и переопределить наш макет для того обстоятельства, что у нас достаточно экранного места, чтобы разместить два столбца.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>Вы можете видеть, как макет принимает форму в значении {{cssxref("grid-template-areas")}}. Заголовок охватывает две дорожки столбцов, как и навигационная система. В треке третьего ряда у нас есть боковая панель рядом с содержимым. В четвертой строке я решил разместить свой рекламный контент – так он появляется под боковой панелью, а затем футер, рядом с ним под контентом. Я использую flexbox в навигации, чтобы отобразить его в разнесенном ряду.</p>
+
+<p>Тепреь я могу добавить конечные точки в наш 3-х колоночный макет.</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+</pre>
+
+<p>Трехколоночный макет имеет две боковые колонки размером <code>1fr</code> и среднюю колонку, размером <code>4fr</code> . Это означает, что доступное пространство в контейнере разделено на 6 ячеек и распределено пропорционально нашему макету – по одной части к боковым колонкам и по 4 части к центру.</p>
+
+<p>В этом макете я показываю навигацию в левой колонке, рядом с содержимым. В правой колонке у нас есть боковая панель, а под ней блок рекламы (ad). Футер теперь охватывает всю нижнюю часть макета. Затем я использую flexbox для отображения навигации в виде столбца.</p>
+
+<p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p>
+</div>
+
+<p>Это простой пример, но он демонстрирует, как мы можем использовать grid layout для перестройки нашего макета. В частности, я изменяю расположение рекламного блока, как заложено в настройках столбцов. Этот метод очень полезен на этапе прототипирования, он легко позволяет эксперементировать с расположением элементов. Вы всегда можете использовать сетку таким образом для прототипирования, даже несмотря на особенности отражения в различных браузерах, которые показывают ваш сайт.</p>
+
+<h2 id="Гибкий_12-колоночный_макет."><font face="Liberation Sans, sans-serif"><font size="4">Гибкий 12-колоночный макет.</font></font></h2>
+
+<p>Если вы работали с фреймворками или grid системами, вам знакомо размещение сайта на гибкой сетке с 12 или 16 столбцами. Мы можем создать такой макет, используя CSS Grid Layout. В качестве простого примера я создаю гибкую сетку из 12 столбцов, которая имеет 12 линий столбцов размером 12 <code>1fr</code>-все они имеют начальную линию с именем <code>col-start</code>. Это означает, что у нас будет двенадцать линий сетки с именем <code>col-start</code>.</p>
+
+<div id="layout_2">
+<div class="hidden">
+<pre class="brush: css">.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+.wrapper &gt; * {
+  border: 2px solid #f08c00;
+  background-color: #ffec99;
+  border-radius: 5px;
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Чтобы продемонстрировать, как работает эта сеточная система, у меня внутри оболочки есть четыре дочерних элемента.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Start column line 1, span 3 column tracks.&lt;/div&gt;
+  &lt;div class="item2"&gt;Start column line 6, span 4 column tracks. 2 row tracks.&lt;/div&gt;
+  &lt;div class="item3"&gt;Start row 2 column line 2, span 2 column tracks.&lt;/div&gt;
+  &lt;div class="item4"&gt;Start at column line 3, span to the end of the grid (-1).&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Затем я могу поместить их в сетку, используя именованные линии, а также ключевое слово span.</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('layout_2', '800', '400') }}</p>
+</div>
+
+<p>Как описано в руководстве по именованным строкам, мы используем именованную строку для размещения нашего элемента. Поскольку у нас есть 12 строк с одинаковым именем, мы используем имя, а затем индекс строки. Вы также можете использовать только индекс строки, если избегаете использования именованных строк.</p>
+
+<p>Вместо того чтобы устанавливать номер конечной строки, я решил указать, сколько треков должен охватить этот элемент, используя ключевое слово span. Мне нравится этот подход, поскольку при работе с системой макета с несколькими столбцами мы обычно думаем о блоках с точки зрения количества треков сетки, которые они охватывают, и в зависимости от этого корректируем. Чтобы увидеть, как блоки выравниваются по трекам, используйте инспектор сетки <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>. Он наглядно демонстрирует, как расположены наши предметы.</p>
+
+<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p>
+
+<p>Существуют некоторые ключевые различия в том, как макет сетки работает над сеточными системами, которые вы, возможно, использовали ранее. Как вы можете видеть, нам не нужно добавлять какую-либо разметку для создания строки, сеточные системы должны сделать это, чтобы остановить элементы, появляющиеся в строке выше. С помощью CSS Grid Layout мы можем размещать элементы в строки, не опасаясь, что они поднимутся в строку выше, если она останется пустой. Благодаря этому строгому размещению столбцов и строк мы также можем легко оставить пустое пространство в нашем макете. Нам также не нужны специальные классы, чтобы тянуть или толкать элементы, чтобы вдавливать их в сетку. Все, что нам нужно сделать, это указать начальную и конечную строку для элемента.</p>
+
+<h3 id="Построение_макета_с_использованием_12-столбцовой_системы"><font face="Liberation Sans, sans-serif"><font size="4">Построение макета с использованием 12-столбцовой системы</font></font></h3>
+
+<p>Чтобы увидеть, как этот метод макета работает на практике, мы можем создать тот же самый макет, который мы создали с {{cssxref("grid-template-areas")}}, на этот раз используя сеточную систему из 12 столбцов. Я начинаю с той же разметки, которая используется для примера областей шаблона сетки.</p>
+
+<div id="layout_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+    .wrapper {
+        max-width: 1024px;
+        margin: 0 auto;
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+
+    .wrapper &gt; * {
+        border: 2px solid #f08c00;
+        background-color: #ffec99;
+        border-radius: 5px;
+        padding: 10px;
+    }
+
+    nav ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;header class="main-head"&gt;The header&lt;/header&gt;
+        &lt;nav class="main-nav"&gt;
+            &lt;ul&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+            &lt;/ul&gt;
+        &lt;/nav&gt;
+        &lt;article class="content"&gt;&lt;h1&gt;Main article area&lt;/h1&gt;
+        &lt;p&gt;In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.&lt;/p&gt;&lt;/article&gt;
+        &lt;aside class="side"&gt;Sidebar&lt;/aside&gt;
+        &lt;div class="ad"&gt;Advertising&lt;/div&gt;
+        &lt;footer class="main-footer"&gt;The footer&lt;/footer&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>Затем я настраиваю сетку как в примере выше.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Мы снова собираемся сделать этот макет адаптивным, но на этот раз с использованием именованных линий. Каждая контрольная точка будет использовать сетку из 12 столбцов, однако количество дорожек, которые будут охватывать элементы, будет меняется в зависимости от размера экрана.</p>
+
+<p>Прежде всего мы запускаем мобильные устройства, и все, что нам нужно для самых узких экранов, - это чтобы элементы оставались в исходном порядке и были расположены прямо по сетке.</p>
+
+<pre class="brush: css">.wrapper &gt; * {
+  grid-column: col-start / span 12;
+}
+</pre>
+
+<p>В следующей контрольной точке мы хотим перейти к двухколоночному макету. Наш заголовок и навигация по-прежнему охватывают всю сетку, поэтому нам не нужно указывать для них какое-либо позиционирование. Боковая панель начинается с первой строки столбца с именем col-start, охватывающей 3 строки. Он идет после строки 3, так как заголовок и навигация находятся в первых двух дорожках строки.</p>
+
+<p>Панель объявлений находится ниже боковой панели, поэтому начинается с строки сетки 4. Затем у нас есть основное содержимое и футер, начинающийся с col-start 4 и охватывающий 9 треков, ведущих их к концу сетки.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>Наконец, мы переходим к трехколоночной версии этого макета. Заголовок продолжает распространяться прямо по сетке, но теперь навигация перемещается вниз, чтобы стать первой боковой панелью с основным содержимым, а затем боковой панелью рядом с ней. Футер теперь также охватывает весь макет.</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+</pre>
+
+<p>{{ EmbedLiveSample('layout_3', '800', '450') }}</p>
+</div>
+
+<p>Снова смотрим <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a>, чтобы увидеть, какую форму принял наш макет.</p>
+
+<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p>
+
+<p>При создании этого макета следует отметить, что нам не нужно было явно размещать каждый элемент сетки в каждой контрольной точке. Мы унаследовали ранее настроенное размещение – преимущество работы “сначала мобильный". Мы также можем воспользоваться преимуществами автоматического размещения сетки. Сохраняя элементы в логическом порядке, автоматическое размещение делает довольно много работы за нас при размещении элементов в сетке. В последнем примере этого руководства мы создадим макет, который полностью зависит от автоматического размещения.</p>
+
+<h2 id="Создание_списка_с_помощью_авторазмещения">Создание списка с помощью авторазмещения</h2>
+
+<p>Многие макеты, по сути, представляют собой наборы "карточек" - списки продуктов, галереи изображений и так далее. Сетка может очень легко создавать эти списки таким образом, чтобы они были отзывчивыми, без необходимости добавлять медиа-запросы. В следующем примере я комбинирую CSS Grid и Flexbox макеты, чтобы сделать простой макет списка продуктов.</p>
+
+<p>Разметка моего списка-это неупорядоченный список элементов. Каждый элемент содержит заголовок, некоторый текст различной высоты и ссылку с призывом к действию.</p>
+
+<div id="layout_4">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Item One&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Item Two&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Item Three&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;
+     &lt;p&gt;This one has more text than the other items.&lt;/p&gt;
+     &lt;p&gt;Quite a lot more&lt;/p&gt;
+     &lt;p&gt;Perhaps we could do something different with it?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Item Four&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Item Five&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+    img {max-width: 100%; display: block;}
+    body {
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+    a:link, a:visited {
+      text-decoration: none;
+      color: #f08c00;
+    }
+
+    h2 {
+      background-color: #f08c00;
+      color: #fff;
+      text-align: center;
+      margin: 0;
+      padding: 20px;
+    }
+</pre>
+</div>
+
+<p>Мы собираемся создать сетку с гибким количеством гибких столбцов. Я хочу, чтобы они никогда не становились меньше 200 пикселей, а затем делили любое доступное оставшееся пространство поровну – так мы всегда получаем одинаковые по ширине дорожки столбцов. Мы достигаем этого с помощью функции  <code>minmax()</code> в нашей повторной нотации для определения размера трека.</p>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+</pre>
+
+<p>Как только я добавляю этот CSS, элементы начинают раскладываться в виде сетки. Если я сделаю окно меньше или шире, количество дорожек столбцов изменится – без необходимости переопределять сетку.</p>
+
+<p>Затем я могу привести в порядок внутренние части ячеек, используя flexbox. Я установил для элемента списка <code>display: flex</code> and theи <code>flex-direction</code> для <code>column</code>. Затем я могу использовать margin auto для   <code>.cta</code> чтобы подтолкнуть этот элемент вниз к нижней части ячейки.</p>
+
+<pre class="brush: css">.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+
+<p>Это действительно одна из ключевых причин, по которой я буду использовать flexbox, а не сетку, если я просто выравниваю или распределяю что-то в одном измерении, это вариант использования flexbox.</p>
+
+<p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p>
+</div>
+
+<p>Теперь все это выглядит более завершенным. Однако иногда у нас есть эти элементы, которые содержат больше контента, чем другие. Было бы неплохо, чтобы они охватывали два трека, и тогда они не будут такими высокими. У меня есть класс <code>wide</code> для большого элемента, и я добавляю правило {{cssxref("grid-column-end")}} со значением  <code>span 2</code>. Теперь, когда grid столкнется с этим элементом, он назначит ему два трека. В некоторых точках это означает, что мы получим разрыв в сетке – там, где нет места для размещения двухтрекового элемента.</p>
+
+<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p>
+
+<p>Я могу привести причину недостатка заполнения с помощью {{cssxref("grid-auto-flow")}}<code>: dense </code> в грид ячейке. Будьте осторожны, когда делаете это, поскольку это действительно уводит элементы от их логического исходного порядка. Вы должны делать это только в том случае, если ваши элементы не имеют установленного порядка – и быть в курсе проблем порядка вкладок после источника, а не вашего переупорядоченного отображения.</p>
+
+<div id="layout_5">
+<div class="hidden">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Item One&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Item Two&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Item Three&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;
+     &lt;p&gt;This one has more text than the other items.&lt;/p&gt;
+     &lt;p&gt;Quite a lot more&lt;/p&gt;
+     &lt;p&gt;Perhaps we could do something different with it?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Item Four&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Item Five&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+    img {max-width: 100%; display: block;}
+    body {
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+    a:link, a:visited {
+      text-decoration: none;
+      color: #f08c00;
+    }
+
+    h2 {
+      background-color: #f08c00;
+      color: #fff;
+      text-align: center;
+      margin: 0;
+      padding: 20px;
+    }
+
+.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p>
+
+<p>Этот метод использования автоматического размещения с некоторыми правилами, применяемыми к определенным элементам, очень полезен и может помочь вам с контентом, который выводится CMS, например, где у вас есть повторяющиеся элементы и, возможно, вы можете добавить класс к определенным элементам, когда они отображаются в HTML.</p>
+</div>
+
+<h2 id="Дальнейшие_исследования">Дальнейшие исследования</h2>
+
+<p>Лучший способ научиться использовать сеточный макет-это продолжать строить примеры, подобные тем, которые мы рассмотрели здесь. Выберите что-то, что вы обычно строите, используя свой фреймворк выбора или используя поплавки, и посмотрите, сможете ли вы построить его с помощью сетки. Не забудьте найти примеры, которые невозможно построить с помощью современных методов. Это может означать, что вы черпаете вдохновение из журналов или других источников, не связанных с интернетом. Сеточный макет открывает возможности, которых у нас раньше не было, нам не нужно быть привязанными к тем же старым макетам, чтобы использовать его.</p>
+
+<ul>
+ <li>For inspiration see the <a href="http://labs.jensimmons.com/"><em>Layout Labs</em> from Jen Simmons</a>, she has been creating layouts based on a range of sources.</li>
+ <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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
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
new file mode 100644
index 0000000000..1278783254
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -0,0 +1,626 @@
+---
+title: Связь Grid позиционирования с другими методами позиционирования
+slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+tags:
+  - Руководство
+  - Сетка
+translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+---
+<p><strong>CSS Grid Layout </strong>спроектирован таким образом, чтобы работать вместе с другими частями CSS и составлять с ними законченную систему создания макетов страниц. В рамках этого руководства, мы объясним, каким образом сочетать гриды с другими техниками, которыми Вы, возможно, уже пользуетесь в своей работе. </p>
+
+<h2 id="Grid_и_flexbox">Grid и flexbox</h2>
+
+<p>Основное различие между CSS Grid Layout<strong> </strong>и <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox Layout</a>  в том, что flexbox предназначен для позиционирования элементов в одном направлении, то есть, либо в строке, либо в колонке. Grid же был разработан для позиционирования элементов в двумерной системе, то есть, для одновременного позиционирования и в строке, и в колонке. Однако, в двух спецификациях есть некоторые общие черты, и если вы уже научились укрощать flexbox, вы увидите сходства, которые помогут вам разобраться и с Grid.</p>
+
+<h3 id="Одномерное_vs_Двумерное_позиционирование">Одномерное vs Двумерное позиционирование</h3>
+
+<p>Простой пример поможет нам продемонстрировать разницу между одно- и двумерным позиционированием.</p>
+
+<p>В пером примере мы воспользуемся flexbox для того, чтобы разместить несколько блоков. Предположим, что у нас есть пять дочерних элементов в контейнере, зададим им значения flex-свойств таким образом, чтобы их размер увеличивался и уменьшался, начиная с базового в 200px.</p>
+
+<p>Также установим свойство {{cssxref("flex-wrap")}} в значение <code>wrap</code> . Это приведет к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку. </p>
+
+<div id="onedtwod">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: flex;
+   flex-wrap: wrap;
+}
+.wrapper &gt; div {
+   flex: 1 1 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p>
+
+<p>На картинке вы видите, что два элемента перешли на новую строку. Эти элементы поделили свободное пространство между собой, а не выравнялись по элементам над ними. Происходит это потому, что каждая новая строка (или колонка, если мы работаем с колонками) становится новым flex-контейнером. А во flex-контейнере распределение свободного пространства действует в рамках <strong>всей </strong>строки. </p>
+
+<p>Общий вопрос заключается в том, как заставить наши перебежавшие элементы выравняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.</p>
+
+<h3 id="Те_же_яйца_вид_в_профиль_тот_же_макет_но_с_CSS_гридами">Те же яйца, вид в профиль: тот же макет, но с CSS гридами</h3>
+
+<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как Вы видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p>
+
+<div class="Two_Dimensional_With_Grid">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p>
+</div>
+
+<p>Если Вы колеблетесь, что выбрать - flexbox или грид, задайте себе простой вопрос:</p>
+
+<ul>
+ <li>мне нужно управлять размещением элементов в строке <u>или </u>в колонке - окей, нужен flexbox</li>
+ <li>мне нужно управлять размещением элементов <u>и </u>в строке, <u>и </u>в колонке – окей, нужен грид</li>
+</ul>
+
+<h3 id="Что_важнее_контент_или_макет">Что важнее: контент или макет?</h3>
+
+<p>В дополнение к различию между позиционированию в одном направлении и позиционированию в двух направлениях, существует еще один способ решить, нужен ли Вам макет, основанный на flexbox или макет, основанный на гридах. Flexbox работает исходя из размеров контента. Идеальный случай использования flexbox - когда у Вас есть набор элементов, а Вам нужно распределить их в контейнере равномерно. Вы позволяете размеру содержимого элементов решить, сколько пространства должен забрать каждый элемент. Если элементы переходят на новую строку, они забирают для себя пространство, исходя из своих размеров и того свободного места, которое есть в <em>этой строке</em>.</p>
+
+<p>Грид работает, исходя из макета. Когда Вы используете CSS Grid Layout, Вы создаете структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жестко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.</p>
+
+<p>Поэтому, если Вы используете flexbox и вдруг обнаруживаете, что ограничиваете эластичность элементов, возможно, Вам нужно посмотреть в сторону CSS Grid Layout. Например, в том случае, если Вы процентами подгоняете ширину flex-элемента, чтобы выровнять его по элементам в строке сверху. В такой ситуации гриды кажутся более оптимальным выбором. </p>
+
+<h3 id="Выравнивание_блоков">Выравнивание блоков</h3>
+
+<p>Самой волнующей функциональностью flexbox для многих из нас была возможность впервые управлять выравниванием блоков. С помощью flexbox можно легко отцентрировать блок на странице. Флекс-элементы способны растягиваться на всю длину контейнера - значит, колонки равной высоты из мечты стали реальностью. Существовал целый ряд вещей, которые нам хотелось сделать очень давно, и для воплощения которых приходилось изобретать различные хаки.</p>
+
+<p>Свойства выравнивания из спецификации flexbox были добавлены в новую спецификацию, названную <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. А это означает, что они могут использоваться и в других спецификациях, в том числе и в Grid Layout. </p>
+
+<p>Дальше в нашем руководстве мы подробно рассмотрим выравнивание блоков Box Alignment и то, как оно работает в Grid Layout, а здесь давайте рассмотрим два простых примера, и сравним flexbox и гриды.</p>
+
+<p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обертки wrapper установлено свойство {{cssxref("min-height")}}, и оно задает высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code>  таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: flex;
+   align-items: flex-end;
+   min-height: 200px;
+}
+.box1 {
+   align-self: stretch;
+}
+.box2 {
+   align-self: flex-start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p>
+
+<h3 id="Тем_временем_в_параллельной_вселенной_выравнивание_в_CSS_Гридах">Тем временем в параллельной вселенной: выравнивание в CSS Гридах</h3>
+
+<p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаем <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3,1fr);
+   align-items: end;
+   grid-auto-rows: 200px;
+}.box1 {
+   align-self: stretch;
+}
+.box2 {
+   align-self: start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p>
+
+<h3 id="Единица_fr_и_flex-basis">Единица <code>fr</code> и <code>flex-basis</code></h3>
+
+<p>Мы уже видели, как работает единица <code>fr</code> в случае пропорционального распределения доступного пространства между грид-треками в грид-контейнере.  При комбинировании <code>fr</code> с функцией {{cssxref("minmax", "minmax()")}} мы получаем поведение, очень похожее на свойство <code>flex</code> в flexbox - и при этом по-прежнему можем создавать макет в двумерной системе.</p>
+
+<p>Если вернуться к примеру, демонстрирующему различия между одно-и двумерным позиционированиями, можно увидеть, что существует также и различие в самом способе того, как две техники работают с отзывчивыми макетами.  С макетом на flex, если мы уменьшаем или увеличиваем размер окна, flexbox аккуратно перераспределяет количество элементов в каждой строке в соответствии с доступным пространством. Так, если у нас достаточно места, чтобы разместить все пять наших элементов в одной строке, они и будут размещены в одной строке. Если же контейнер узкий, то в строке у нас будет место только для одного элемента.</p>
+
+<p>В сравнении грид-версия <strong>всегда </strong>содержит три трека-колонки. Эти треки-колонки будут расширяться и сужаться, но их всегда будет три, раз мы запросили три при задании грида. </p>
+
+<h4 id="Автозаполнение_грид-треков">Автозаполнение грид-треков</h4>
+
+<p>Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жесткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства <code>auto-fill</code> и <code>auto-fit</code>.</p>
+
+<p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаем структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, 200px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p>
+
+<h3 id="Переменное_количество_треков">Переменное количество треков</h3>
+
+<p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаем автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p>
+
+<p>Собственно, теперь у нас есть возможность создавать гриды с переменным количеством или с переменным размером треков и при этом по-прежнему держать элементы в жесткой сетке из строк и колонок.</p>
+
+<h2 id="Гриды_и_абсолютно_позиционированные_элементы">Гриды и абсолютно позиционированные элементы</h2>
+
+<p>Грид взаимодействует с абсолютно позиционированными элементами, что отнюдь не бесполезно, если Вы хотите разместить элемент внутри грида или грид-области. В спецификации описано поведение грида и тогда, когда грид-контейнер является контейнерным блоком (containing block) и тогда, когда грид-контейнер - родительский элемент для абсолютно позиционированного элемента.</p>
+
+<h3 id="Грид-контейнер_как_контейнерный_блок">Грид-контейнер как контейнерный блок</h3>
+
+<p>Для того, чтобы превратить грид-контейнер в контейнерный блок Вам нужно добавить ему свойство position со значением relative. Если после этого задать какому-нибудь грид-элементу <code>position:</code> <code>absolute</code> , грид-контейнер станет контейнерным блоком для данного элемента.</p>
+
+<p>В примере ниже у нас есть блок-обертка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещен в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;
+    Этот блок абсолютно позиционирован.
+В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещен элемент.
+   &lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+   position: relative;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: absolute;
+   top: 40px;
+   left: 40px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p>
+
+<p>Вы видите, что наш элемент занимает область от колоночной грид-линии 2 до колоночной грид-линии 4 и начинается после строчной линии 1. С помощью свойств left и top мы сдвигаем его относительно этой области. В то же время, он изымается из потока так же, как и любой другой элемент с абсолютным позиционированием, поэтому правила авторазмещения теперь помещают другие элементы на его место. Абсолютное позиционирование нашего элемент также не приводит к появлению новой строки.</p>
+
+<p>Попробуйте удалить<code>position:</code> <code>absolute</code> из правил для <code>.box3</code> , и увидете, как он размещался бы без абсолютного позиционирования.</p>
+
+<h3 id="Грид-контейнер_в_качестве_родительского_элемента">Грид-контейнер в качестве родительского элемента</h3>
+
+<p>Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создает этот контекст позиционирования. Словом, если в нашем примере мы уберем <code>position:</code> <code>relative</code> из блока-обертки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.</p>
+
+<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p>
+
+<p>Еще раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.</p>
+
+<h3 id="А_что_если_родительский_элемент_-_это_грид-область">А что если родительский элемент - это грид-область?</h3>
+
+<p>Если абсолютно позиционированный элемент находится в грид-области, Вы можете создать контекст позиционирования из этой области. В примере ниже у нас тот же грид-макет, что и раньше, но теперь мы разместили элемент внутри <code>.box3</code> .</p>
+
+<p>Задаем <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига.  В данном случае контекстом позиционирования является грид-область.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three
+       &lt;div class="abspos"&gt;
+        Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования являетсягрид-область, поэтому значения сдвига отсчитываются от внешних краев грид-области.
+       &lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: relative;
+}
+.abspos {
+   position: absolute;
+   top: 40px;
+   left: 40px;
+   background-color: rgba(255,255,255,.5);
+   border: 1px solid rgba(0,0,0,0.5);
+   color: #000;
+   padding: 10px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p>
+
+<h2 id="Грид_и_display_contents">Грид и <code>display:</code> <code>contents</code></h2>
+
+<p>Последнее, о чем нужно упомянуть, говоря о взаимодействии гридов с другими спецификациями, касающимися позиционирования элементов, - это взаимодействие между CSS Grid Layout и <code>display:</code> <code>contents</code>. Значение <code>contents</code> свойства display - новое свойство CSS, которое описывается в спецификации <a href="https://drafts.csswg.org/css-display/#box-generation">Display</a> следующим образом:</p>
+
+<blockquote>
+<p>“Сам элемент не генерирует никаких блоков (боксов), но его дочерние элементы и его псевдо-элементы по-прежнему генерируют блоки, в установленном порядке. Относительно генерации и позиционирования блоков элемент должен восприниматься так, как если бы он полностью замещался своими дочерними элементами и псевдо-элементами в дереве документа.”</p>
+</blockquote>
+
+<p>Если Вы пишете для элемента  <code>display:</code> <code>contents</code> , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберемся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.</p>
+
+<div id="Display_Contents_Before">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;
+       &lt;div class="nested"&gt;a&lt;/div&gt;
+       &lt;div class="nested"&gt;b&lt;/div&gt;
+       &lt;div class="nested"&gt;c&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p>
+</div>
+
+<p>Если мы теперь добавим правило <code>display:</code> <code>contents</code> для  <code>box1</code>, блок этого бокса исчезнет, зато дочерние элементы станут грид-элементами и будут расположены в соответствии с правилами авторазмещения.</p>
+
+<div id="Display_Contents_After">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;
+       &lt;div class="nested"&gt;a&lt;/div&gt;
+       &lt;div class="nested"&gt;b&lt;/div&gt;
+       &lt;div class="nested"&gt;c&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   display: contents;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p>
+</div>
+
+<p>Таким образом мы можем заставить вложенные элементы вести себя, словно они часть грида (и в некотором смысле имитация того поведения, которое должны будут реализовать подгриды (subgrids), когда руки разработчиков браузеров до них доберутся). Точно так же можно использовать <code>display:</code> <code>contents</code> с flexbox, чтобы вложенные элементы становились flex-элементами.</p>
+
+<p><em>UPD: На 04.02.2018 главная проблема с <code>display:</code> <code>contents</code> в том, что "редкий браузер долетел до середины Днепра", поддержка у свойства - отсутствует. Следите за обновлениями <a href="https://caniuse.com/#feat=css-display-contents">https://caniuse.com/#feat=css-display-contents</a></em></p>
+
+<p>Как Вы могли увидеть, CSS Grid Layout - это часть Вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.</p>
+
+<section class="Quick_links" 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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Расположение элементов по грид-линиям</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/subgrid/index.html b/files/ru/web/css/css_grid_layout/subgrid/index.html
new file mode 100644
index 0000000000..f3e0b898d1
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/subgrid/index.html
@@ -0,0 +1,115 @@
+---
+title: Subgrid
+slug: Web/CSS/CSS_Grid_Layout/Subgrid
+translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
+---
+<p>{{CSSRef}}</p>
+
+<p>2 уровень спецификации CSS Grid включает в себя значение <code>subgrid</code> для свойств <a href="/ru/docs/Web/CSS/grid-template-columns">grid-template-columns</a> и <a href="/ru/docs/Web/CSS/grid-template-rows">grid-template-rows</a>. Это руководство содержит описание принципа работы subgrid и показывает некоторые примеры использования этой функции.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Важно</strong>: Эта функция поставляется с Firefox 71, являющимся в данный момент единственным браузером, в котором реализован subgrid.</p>
+</div>
+
+<h2 id="Введение_в_subgrid">Введение в subgrid</h2>
+
+<p>При добавлении grid-контейнеру объявления <code>display: grid</code>, только непосредственно дочерние элементы становятся grid-элементами и могут быть помещены в созданную сетку. А дети этих grid-элементов отображаются уже в обычном потоке.</p>
+
+<p>Вы можете "вкладывать" сетки, делая grid-элементы grid-контейнерами. Эти вложенные сетки, однако, не зависят от родителя и друг от друга, а это значит, что они не берут размер своих треков из родительской сетки. Это затрудняет выстраивание элементов вложенных сеток в соответствии с основной.</p>
+
+<p>Если вы устанавливаете значение <code>subgrid</code> для свойства <code>grid-template-columns</code>, <code>grid-template-rows</code>, или для обоих, вместо создания новых треков, вложенная сетка использует треки, определённые для родителя.</p>
+
+<p>Например, если вы используете <code>grid-template-columns: subgrid</code> и вложенная сетка охватывает три колоночных трека родителя, её треки будут такого же размера, как и у родительской сетки. Промежутки (<a href="/en-US/docs/Web/CSS/gap">gap</a>) наследуются, но могут быть переопределены другими значениями. Имена линий могут быть переданы от родителя в subgrid, но можно объявить также и свои собственные.</p>
+
+<h2 id="Subgrid_для_колонок">Subgrid для колонок</h2>
+
+<p>В примере ниже приведена сетка с девятью колонками шириной <code>1fr</code>, и четырьмя строками высотой минимум 100px. </p>
+
+<p>Я изменяю позиционирование элемента с классом <code>.item</code> от 2 к 7 линии колонки и от 2 к 4 линии строки. После чего превращаю этот grid-элемент в grid-контейнер, определяя колоночные треки как subgrid, а строки оставляя обычными. Поскольку данный элемент охватывает пять колоночных треков, то и subgrid имеет пять колоночных треков. Затем я могу поместить на сетку элемент <code>.subitem</code>.</p>
+
+<p>Строки в примере не являются subgrid, поэтому ведут себя как у обычной вложенной сетки. Grid-область родителя расширяется, чтобы стать достаточно большой для этой вложенной сетки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p>
+
+<p>Обратите внимание, что внутри subgrid нумерация линий не наследуется от родителя, а начинается по новой – колоночная линия 1 внутри subgrid всегда является его начальной линией. Это значит, что вы можете безопасно добавить компонент, который может быть помещен в разных позициях на главной сетке, зная, что номера линий внутри компонента всегда будут оставаться одинаковыми.</p>
+
+<h2 id="Subgrid_для_строк">Subgrid для строк</h2>
+
+<p>Следующий пример повторяет предыдущий, только в этот раз мы используем <code>subgrid</code> как значение свойства <code>grid-template-rows</code> и явно определяем колоночные треки. Таким образом, колоночный трек ведёт себя как обычная вложенная сетка, но строки привязаны к двум трекам, которые охватывает дочерний элемент.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}</p>
+
+<h2 id="Subgrid_в_обоих_измерениях">Subgrid в обоих измерениях</h2>
+
+<p>Конечно, вы можете определить и строки и колонки как subgrid, как в примере ниже. Это значит, что ваш subgrid в обоих измерениях привязан к количеству треков родителя.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}</p>
+
+<h3 id="В_subgrid-измерении_отсутствует_неявная_сетка">В subgrid-измерении отсутствует неявная сетка</h3>
+
+<p>Если вам нужно автоматическое размещение элементов и неизвестно их будущее количество, будьте внимательны при создании subgrid, поскольку это заблокирует функцию создания дополнительных строк для размещения этих элементов.</p>
+
+<p>Взгляните на следующий пример – в нём используется такая же родительская и дочерняя сетка, как в примере выше, однако внутри subgrid присутствует двенадцать элементов, пытающихся автоматически разместиться в десяти grid-ячейках. Так как subgrid задан в обоих измерениях, двум дополнительным элементам некуда деться, поэтому они размещаются в последнем треке сетки, что и определено спецификацией.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}</p>
+
+<p>Если удалить значение свойства <code>grid-template-rows</code>, мы включим обычное создание неявных треков и, хотя они не выстроятся по сетке родителя, будет создано столько треков, сколько потребуется.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}</p>
+
+<h2 id="Subgrid_и_свойства_gap">Subgrid и свойства gap</h2>
+
+<p>Если у родителя задан <a href="/en-US/docs/Web/CSS/gap">gap</a>, <a href="/en-US/docs/Web/CSS/column-gap">column-gap</a> или <a href="/en-US/docs/Web/CSS/row-gap">row-gap</a>, это будет передано и в subgrid, поэтому он будет иметь такие же промежутки между треками, как и родитель. Тем не менее, в определённых ситуациях вы можете захотеть, чтобы промежутки между треками в subgrid отличались или отсутствовали вовсе. Этого можно достичь, определяя свойства <code>gap–*</code> непосредственно в subgrid.</p>
+
+<p>Вы можете видеть это в примере ниже. Родительский grid имеет промежутки 20px для строк и колонок. Subgrid имеет <code>row-gap</code> со значением <code>0</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}</p>
+
+<p>Если вы откроете Firefox Grid Inspector, сможете увидеть, как линия сетки находится в правильном месте по центру промежутка, поэтому когда мы устанавливаем gap = 0, он действует аналогично применению отрицательного margin для элемента, создавая пространство от промежутка обратно до элемента.</p>
+
+<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p>
+
+<h2 id="Именованные_grid-линии">Именованные grid-линии</h2>
+
+<p>При использовании CSS Grid, вы можете именовать линии сетки и затем позиционировать элементы, используя эти имена, а не номера линий. Имена линий у родительской сетки передаются в subgrid, что позволяет с их помощью позиционировать элементы. В примере ниже я назвала линии родителя <code>col-start</code> и <code>col-end</code> и затем использовала их для размещения элементов subgrid..</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}</p>
+
+<p>Также можно указывать имена линий для subgrid. Это достигается путём добавления списка имён линий, заключённого в квадратные скобки после ключевого слова <code>subgrid</code>. Если в subgrid имеется четыре линии, для именования их всех достаточно использовать синтаксис <code>grid-template-columns: subgrid [line1] [line2] [line3] [line4]</code>.</p>
+
+<p>Имена линий, указанные в subgrid, добавляются к любым линиям, указанным в родительском элементе, поэтому можно использовать одно из этих названий или оба. Чтобы продемонстрировать это, в примере ниже я расположила один элемент, используя линии родителя, а другой – используя линии subgrid</p>
+
+<p><br>
+ {{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}</p>
+
+<h2 id="Использование_subgrid">Использование subgrid</h2>
+
+<p>Не считая необходимости следить за элементами, которые могут не поместиться при автоматическом размещении, subgrid работает аналогично любой вложенной сетке; единственное отличие заключается в том, что размер трека у subgrid задаётся в родительской сетке. Однако, как и в случае с любой вложенной сеткой, размер содержимого в subgrid может изменить размер трека, если конечно содержимому позволено влиять на размер.</p>
+
+<p>Поскольку значение subgrid во многом работает так же, как и обычная вложенная сетка, между ними достаточно легко переключаться. Например, если вы понимаете, что нужна неявная сетка для строк, всё что нужно сделать, удалить значение <code>subgrid</code> для свойства <code>grid-template-rows</code> и, возможно, задать значение свойству <code>grid-auto-rows</code> для контроля размера неявных треков.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>На YouTube-канале Mozilla Developers смотрите видео <a href="https://www.youtube.com/watch?v=gmQlK3kRft4">Laying out forms using subgrid</a> и <a href="https://www.youtube.com/watch?v=lLnFtK1LNu4">Don't Wait To Use Subgrid For Better Card Layouts</a></li>
+ <li><a href="https://noti.st/rachelandrew/i6gUcF/hello-subgrid">Hello Subgrid!</a> Презентация с CSSConf.eu</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid 2")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>Изначальнео определение <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a>.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_grid_layout/грид-области/index.html b/files/ru/web/css/css_grid_layout/грид-области/index.html
new file mode 100644
index 0000000000..6d2d3b6892
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/грид-области/index.html
@@ -0,0 +1,529 @@
+---
+title: Шаблоны грид-областей
+slug: Web/CSS/CSS_Grid_Layout/Грид-области
+translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
+---
+<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">предыдущем обзоре</a> мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надежный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именнованных, заранее определенных грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймете, почему его называют методом ascii-искусства в концепции макетов на гридах!</p>
+
+<h2 id="Имя_для_грид-области">Имя для грид-области</h2>
+
+<p>Вы уже знакомы со свойством {{cssxref("grid-area")}}. Это то свойство, которое принимает в качестве значения номера четырех грид-линий, определяющих расположение грид-области.</p>
+
+<pre class="brush: css">.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+</pre>
+
+<p>Что мы делаем, когда задаем все четыре значения? Мы определяем область, ограниченную данными грид-линиями. </p>
+
+<p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p>
+
+<p>Другой способ определить грид-область, - задать ей имя и определить местоположение как значения свойства {{cssxref("grid-template-areas")}}. Вы можете выбрать для грид-области любое имя. Например, если нам нужно создать макет согласно картинке ниже, мы можем назвать четыре основных области следующим образом:</p>
+
+<ul>
+ <li>header</li>
+ <li>footer</li>
+ <li>sidebar</li>
+ <li>основное содержимое content</li>
+</ul>
+
+<p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p>
+
+<p>С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именнованные области, которые мы можем в нем использовать.</p>
+
+<div id="Grid_Area_1">
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+</pre>
+
+<p>Определив имена, мы можем приступить к созданию макета. На этот раз вместо того, чтобы расположить элементы с помощью номеров линий, заданных для самих элементов, мы создаем весь макет в грид-контейнере.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p> </p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}</p>
+</div>
+
+<p>Если мы используем этот метод, то нам не нужно задавать что-то отдельно для грид-элементов, все задается для грид-контейнера. Весь макет описывается значением свойства {{cssxref("grid-template-areas")}}.</p>
+
+<h2 id="Оставляем_ячейку_пустой">Оставляем ячейку пустой</h2>
+
+<p>В данном примере мы полностью заполнили грид областями и не оставили пустого пространства. Однако, наш метод также позволяет оставлять грид-ячейки пустыми. Чтобы сделать это воспользуйтесь символом точки, '<code>.</code>'. Если нам нужно отображать футер только под основным содержимым страницы, значит, мы должны оставить три ячейки под сайдбаром пустыми.</p>
+
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Leaving_a_grid_cell_empty', '300', '330') }}</p>
+
+<p>Чтобы сделать наш макет чище, мы можем использовать множество символов <code>.</code>. Если между точками нет пробелов, то они считаются одной ячейкой. В комплексных макетах подобная возможность помогает аккуратно выравнивать строки и колонки. То есть, Вы прямо в CSS можете видеть, как выглядит Ваш макет.</p>
+
+<h2 id="Охватываем_несколько_ячеек">Охватываем несколько ячеек</h2>
+
+<p>В нашем примере каждая из областей охватывает несколько грид-ячеек, и получаем мы подобный эффект за счет того, что через пробел повторяем имя этой грид-области несколько раз. Вы можете добавить дополнительные пробелы, чтобы аккуратно выравнять значения в <code>grid-template-areas</code>. В нашем примере мы пробелами подравняли <code>hd</code> и <code>ft</code> , чтобы они коррелировали с  <code>main</code>.</p>
+
+<p>Область, которую мы создаем подобными цепочками имен, должна быть прямоугольной. На данном этапе нельзя создать L-образную область. В спецификации говорится, что, возможно, в будущем подобная функциональность добавится. А сейчас мы можем охватывать строки так же легко, как и колонки. Например, давайте сделаем так, чтобы наш сайдбар простирался до конца футера. Для этого поменяем <code>.</code> на <code>sd</code>.</p>
+
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Spanning_multiple_cells', '300', '330') }}</p>
+
+<p>Значение {{cssxref("grid-template-areas")}} должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у Вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.</p>
+
+<h2 id="Переопределение_грида_с_медиа-запросами">Переопределение грида с медиа-запросами</h2>
+
+<p>Поскольку наш макет теперь содержится в одной части CSS, вносить изменения для различных контрольных точек (breakpoints) становится крайне легко. Сделать это можно либо переопределив сам грид, либо положение элементов на гриде, либо и то, и другое одновеременно.</p>
+
+<p>При этом определяйте имена для ваших грид-областей за пределами медиа-запросов. В таком случае, область основного содержимого (content) всегда будет называться <code>main</code> независимо от того, где она находится на сетке.</p>
+
+<p>Мы можем теперь изменить наш макет для узкой ширины экрана на более простой, где все грид-области будут друг над другом в одном столбце.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+.wrapper {
+    display: grid;
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "hd"
+      "main"
+      "sd"
+      "ft";
+}
+</pre>
+
+<p>Внутри медиа-запросов, мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства, на трехколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью <code>grid-template-areas</code> я указываю куда стоит разместить грид-области. </p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+    .wrapper {
+        grid-template-columns: repeat(9, 1fr);
+        grid-template-areas:
+          "hd hd hd hd   hd   hd   hd   hd   hd"
+          "sd sd sd main main main main main main"
+          "sd sd sd  ft  ft   ft   ft   ft   ft";
+    }
+}
+@media (min-width: 700px) {
+    .wrapper {
+        grid-template-areas:
+          "hd hd hd   hd   hd   hd   hd   hd hd"
+          "sd sd main main main main main ft ft";
+    }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Redefining_the_grid_using_media_queries', '550', '330') }}</p>
+
+<h2 id="Использование_grid-template-areas_для_элементов_UI">Использование <code>grid-template-areas</code> для элементов UI</h2>
+
+<p>Многие из примеров grid, которые вы найдете в Интернете, предполагают, что вы будете использовать grid для макета главной страницы, однако grid может быть столь же полезна для небольших элементов. Использование {{cssxref ("grid-template-areas")}} может быть особенно приятным, так как в коде легко видеть, как выглядит ваш элемент.</p>
+
+<p>В качестве очень простого примера мы можем создать «медиа-объект». Это компонент с пространством для изображения или другого носителя с одной стороны, а контент - с другой. Изображение может отображаться справа или слева от окна.</p>
+
+<p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p>
+
+<p>Наша сетка представляет собой двухколоночную трековую сетку, со столбцом для изображения размером <code>1fr</code> и текстом <code>3fr</code>. Если вы хотите область с фиксированной шириной изображения, тогда вы можете установить столбец изображения как ширину пикселя и назначить текстовую область <code>1fr</code>. Одна колонка трека <code>1fr</code> затем займет оставшуюся часть пространства.</p>
+
+<p>Мы предоставляем области изображения имя области сетки <code>img</code> и содержимое текстовой области, затем мы можем выложить их, используя свойство <code>grid-template-areas</code>.</p>
+
+<div id="Media_1">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media"&gt;
+    &lt;div class="image"&gt;&lt;/div&gt;
+    &lt;div class="text"&gt;This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Media_1', '300', '200') }}</p>
+</div>
+
+<h3 id="Отображение_изображения_с_другой_стороны_окна">Отображение изображения с другой стороны окна</h3>
+
+<p>Возможно, нам захочется отобразить нашу коробку с изображением наоборот. Для этого мы переопределим сетку, чтобы поместить последний трек <code>1fr</code> и просто переверните значения {{cssxref ("grid-template-areas")}}.</p>
+
+<div id="Media_2">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media.flipped {
+    grid-template-columns: 3fr 1fr;
+    grid-template-areas: "content img";
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media flipped"&gt;
+    &lt;div class="image"&gt;&lt;/div&gt;
+    &lt;div class="text"&gt;This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Media_2', '300', '200') }}</p>
+</div>
+
+<h2 id="Сокращения_определения_сетки">Сокращения определения сетки</h2>
+
+<p>Рассмотрев различные способы размещения элементов на наших сетках и многие свойства, используемые для определения сетки, самое время взглянуть на пару сокращений, доступных для определения сетки и многое из всего этого в одной строке CSS.</p>
+
+<p>Они могут быстро стать трудными для чтения для других разработчиков или даже для вашего будущего. Однако они являются частью спецификации и, вероятно, вы столкнетесь с ними в примерах или в использовании другими разработчиками, даже если вы решите не использовать их.</p>
+
+<p>Прежде чем использовать какиу-либо сокращения (shorthand), стоит помнить, что shorthand не только позволяют устанавливать множество свойств за один раз, но также действуют, чтобы <strong>сбросить объекты</strong> до их начальных значений, которых вы не используете, или не можете установить в сокращении. Поэтому, если вы используете сокращения, помните, что оно может сбросить все, что вы применили в другом месте.</p>
+
+<p>Два сокращения (shorthand) для контейнера сетки - это Explicit Grid Shorthand <code>grid-template</code> и Grid Definition Shorthand <code>grid</code>.</p>
+
+<h3 id="grid-template"><code>grid-template</code></h3>
+
+<p>Свойство {{cssxref ("grid-template")}} задает следующие свойства:</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+</ul>
+
+<p>Свойство называется явным сокращением сетки, потому что оно устанавливает те вещи, которые вы контролируете, когда вы определяете явную сетку, а не те, которые влияют на любые неявные строки или столбцы, которые могут быть созданы.</p>
+
+<p>Следующий код создает макет, используя {{cssxref ("grid-template")}}, который совпадает с макетом, созданным ранее в этом руководстве.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>Первое значение - это значение нашей <code>grid-template-areas</code>, но мы также объявляем размер строки в конце каждой строки. Это то, что делает <code>minmax (100px, auto)</code>.</p>
+
+<p>Затем после <code>grid-template-areas</code> у нас есть косая черта, после чего явный список треков столбцов.</p>
+
+<h3 id="grid"><code>grid</code></h3>
+
+<p>Сокращение {{cssxref ("grid")}} идет еще дальше, а также задает свойства, используемые неявной сеткой. Таким образом, вы будете устанавливать:</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+</ul>
+
+<p>Свойство также сбрасывает {{cssxref ("grid-gap")}} свойство на <code>0</code>, однако вы не можете указывать пробелы в этой сокращенности.</p>
+
+<p>Вы можете использовать этот синтаксис точно так же, как сокращение {{cssxref ("grid-template")}}, просто знайте, что при этом вы сбросите другие значения, установленные этим свойством.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>Мы снова рассмотрим другие функции, предлагаемые этом сокращением позже в этих руководствах, когда мы рассмотрим автоматическое размещение и свойство <code>grid-auto-flow</code>.</p>
+
+<p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы еще не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включенные в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p>
+
+<section class="Quick_links" 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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html b/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html
new file mode 100644
index 0000000000..e470a72ce7
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html
@@ -0,0 +1,652 @@
+---
+title: Расположение элементов по грид-линиям с помощью CSS Grid
+slug: >-
+  Web/CSS/CSS_Grid_Layout/Расположение_элементов_по_грид-линиям_с_помощью_CSS_Grid
+tags:
+  - CSS
+  - CSS Grid
+  - Грид
+  - Руководство
+  - Сетка
+translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid
+---
+<p>В статье, касавшейся <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">основных понятий позиционирования элементов с помощью гридов</a>, мы кратенько рассмотрели, как располагать элементы в гриде, используя номера линий. Теперь давайте детально исследуем то, как работает эта фундаментальная часть спецификации.</p>
+
+<p>Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда Вы работаете с гридами, пронумерованные линии у Вас есть <strong>всегда</strong>. Линии нумеруются и для колонок, и для строк, отсчет начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.</p>
+
+<h2 id="Базовый_пример">Базовый пример</h2>
+
+<p>В качестве крайне простого примера давайте возьмем грид с тремя треками-колонками и тремя треками-строками. Такой грид дает нам по 4 линии для каждого направления.</p>
+
+<p>Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырех первых ячеек. Если Вы воспользуетесь <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> , то увидете, как грид инициирует колонки и строки.</p>
+
+<p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-template-rows: repeat(3, 100px);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('A_basic_example', '300', '330') }}</p>
+
+<h2 id="Позиционирование_элементов_по_номерам_линий">Позиционирование элементов по номерам линий</h2>
+
+<p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии,  то есть, от верхнего края грида, и занимает пространство до четвертой строчной линии.</p>
+
+<div id="Line_Number">
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+</pre>
+
+<p>Если Вы явно позиционируете одни элементы, другие элементы грида по-прежнему размещаются в соответствии с правилами авторазмещения. Дальше мы детально рассмотрим, как это происходит, а пока Вы и сами могли заметить, что по мере размещения одних элементов, оставшиеся элементы занимают пустые ячейки грида.</p>
+
+<p>Задавая адреса для каждого элемента по отдельности, мы можем разместить все наши четыре элемента по колонкам и строкам. Заметьте, что при желании можно оставить ячейки пустыми. Одна из самых приятных вещей при работе с Grid Layout - возможность создавать негативное пространство (пустые области в макете) без кувырков через голову и прочих хаков.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box2 {
+   grid-column-start: 3;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 3;
+   grid-row-start: 1;
+   grid-row-end: 2;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+   grid-row-end: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Line_Number', '300', '330') }}</p>
+</div>
+
+<div id="Grid_Shorthands">
+<h2 id="Сокращения_grid-column_и_grid-row">Сокращения <code>grid-column</code> и <code>grid-row</code></h2>
+
+<p>Мы написали много кода, чтобы разместить каждый элемент. Неудивительно, что существует <a href="/ru/docs/Web/CSS/Shorthand_properties">краткая форма записи свойств</a>. {{cssxref("grid-column-start")}} и {{cssxref("grid-column-end")}} могут быть объединены в одном {{cssxref("grid-column")}}, а {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}} - в {{cssxref("grid-row")}}.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column: 1 / 2;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 / 4;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 / 3;
+   grid-row: 1 /  2;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 / 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Grid_Shorthands', '300', '330') }}</p>
+</div>
+
+<h3 id="Расположение_элемента_по_умолчанию">Расположение элемента по умолчанию</h3>
+
+<p>В примерах выше мы задавали конечную линию для строки и колонки, чтобы продемонстрировать работу свойств, однако, если элемент занимает только один трек, Вы можете опустить значение <code>grid-column-end</code> или <code>grid-row-end</code>. Грид по умолчанию размещает элемент таким образом, чтобы он занимал всего один трек. Это значит, что длинная запись свойств в нашем первоначальном примере может выглядеть вот так:</p>
+
+<div id="End_Lines">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: 1;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+.box2 {
+   grid-column-start: 3;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-row-start: 1;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('End_Lines', '300', '330') }}</p>
+</div>
+
+<p>Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращенная запись будет выглядеть вот так, без слэша и без второго значения:</p>
+
+<div id="New_Shorthand">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('New_Shorthand', '300', '330') }}</p>
+</div>
+
+<h2 id="Свойство_grid-area">Свойство <code>grid-area</code></h2>
+
+<p>Мы можем пойти еще дальше и определить целую область с помощью одного единственного свойства – {{cssxref("grid-area")}}. Порядок свойств для грид-области следующий:</p>
+
+<ul>
+ <li>grid-row-start</li>
+ <li>grid-column-start</li>
+ <li>grid-row-end</li>
+ <li>grid-column-end</li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+   grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+   grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+   grid-area: 3 / 2 / 4 / 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('The_grid-area_property', '300', '330') }}</p>
+
+<p>Порядок значений для <code>grid-area</code> может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращенных свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определенными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырех направлений относительно потока:</p>
+
+<ul>
+ <li>block-start (начало блока)</li>
+ <li>block-end (конец блока)</li>
+ <li>inline-start (начало строки)</li>
+ <li>inline-end (конец строки)</li>
+</ul>
+
+<p>Мы работаем с русским, языком с написанием слева направо. Начало нашего блока (block-start) - верхняя строчная линия грид-контейнера, конец блока (block-end) - последняя строчная линия контейнера. Начало строки (inline-start) - самая левая колоночная линия, поскольку начало строки - это всегда точка, с которой начинается написание текста в заданном режиме написания. Конец строки (inline-end) - последняя колоночная линия грида.</p>
+
+<p>Когда мы задаем нашу грид-область с помощью свойства <code>grid-area</code> , мы сначала определяем обе начальные линии <code>block-start</code> и <code>inline-start</code>, а затем обе конечные линии  <code>block-end</code> и <code>inline-end</code>. Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания вебсайты - многонаправленные структуры.</p>
+
+<h2 id="Считая_с_конца">Считая с конца</h2>
+
+<p>Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка - самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет <code>-1</code>, а линий непосредственно перед ними <code>-2,</code> и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (<em>explicit grid)</em>, то есть грида, определенного с помощью <code>grid-template-columns</code> и<code>grid-template-rows.</code> Любые линии строк и колонок, добавленные неявным гридом (<em>implicit grid)</em> не считаются.</p>
+
+<p>В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краев.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: -1;
+   grid-column-end: -2;
+   grid-row-start: -1;
+   grid-row-end: -4;
+}
+.box2 {
+   grid-column-start: -3;
+   grid-column-end: -4;
+   grid-row-start: -1;
+   grid-row-end: -3;
+}
+.box3 {
+   grid-column-start: -2;
+   grid-column-end: -3;
+   grid-row-start: -1;
+   grid-row-end: -2;
+}
+.box4 {
+   grid-column-start: -2;
+   grid-column-end: -4;
+   grid-row-start: -3;
+   grid-row-end: -4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Counting_backwards', '300', '330') }}</p>
+
+<h3 id="Как_растянуть_элемент_на_длину_всего_грида">Как растянуть элемент на длину всего грида?</h3>
+
+<p>Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:</p>
+
+<pre class="brush: css notranslate">.item {
+  grid-column: 1 / -1;
+}
+</pre>
+
+<h2 id="Зазоры_Gutters_или_аллеи_Alleys">Зазоры (Gutters) или аллеи (Alleys)</h2>
+
+<p>Спецификация CSS Grid включает возможность добавлять промежутки (зазоры) между треками-колонками и треками-строками с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}. Эти свойства задают промежутки, которые во многом действуют точно так же, как свойство {{cssxref("column-gap")}} в многоколоночных макетах.</p>
+
+<p>Зазоры появляются только между треками и не добавляют пространство сверху, снизу, справа или слева грид-контейнеру. Мы можем добавить зазоры в предыдущий пример, дописав эти свойства грид-контейнеру.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-column-gap: 20px;
+     grid-row-gap: 1em;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Gutters_or_Alleys', '300', '350') }}</p>
+
+<h3 id="Сокращенная_запись_для_грид-зазоров">Сокращенная запись для грид-зазоров</h3>
+
+<p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаем два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-gap: 1em 20px;
+}
+</pre>
+
+<p>В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от нее на расстоянии зазора, и Вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если Вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же - определите трек, а не зазор.</p>
+
+<h2 id="Использование_ключевого_слова_span">Использование ключевого слова <code>span</code> </h2>
+
+<p>В дополнение к возможности обращаться к начальной и конечной линии по их номерам Вы можете задать номер начальной линии, а после - количество треков, которые должен занять элемент.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+   grid-column: 3;
+   grid-row: 1 / span 2;
+}
+.box3 {
+   grid-column: 2;
+   grid-row: 1;
+}
+.box4 {
+   grid-column: 2 / span 2;
+   grid-row: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Using_the_span_keyword', '300', '330') }}</p>
+
+<p>Ключево слово  <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаем начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p>
+
+<pre class="notranslate">.box1 {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: span 3;
+}
+</pre>
+
+<p>Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем <code>span 3</code>. Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.</p>
+
+<pre class="notranslate">.box1 {
+    grid-column-start: 1;
+    grid-row-start: span 3;
+    grid-row-end: 4;
+}
+</pre>
+
+<p>Чтобы лучше освоиться с размещением элементов по грид-линиям, попробуйте собрать несколько распространенных макетов, располагая элементы на гридах с различным количеством колонок. Помните, что если вы не размещаете все Ваши элементы, оставшиеся располагаются в соответствии с правилами авторазмещения. В результате может получиться как раз тот макет, который Вам нужен, но не факт, и если что-то пошло не так, проверьте, определили ли Вы позицию для проблемного элемента.</p>
+
+<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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Размещение элементов по грид-линиям</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_images/index.html b/files/ru/web/css/css_images/index.html
new file mode 100644
index 0000000000..6bd0d2b7de
--- /dev/null
+++ b/files/ru/web/css/css_images/index.html
@@ -0,0 +1,148 @@
+---
+title: CSS Images
+slug: Web/CSS/CSS_Images
+tags:
+  - CSS Images
+  - CSS руководство
+translation_of: Web/CSS/CSS_Images
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Images</strong> - модуль в CSS, который определяет, какие типы изображений можно использовать (тип {{cssxref("&lt;image&gt;")}}, содержащий URL, градиенты и другие типы изображений), как изменять их размер и как они, и другие замещённые элементы, взаимодействуют с другими моделями макетов.</p>
+
+<h2 id="Справка">Справка</h2>
+
+<h3 id="Свойства">Свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("image-orientation")}}</li>
+ <li>{{cssxref("image-rendering")}}</li>
+ <li>{{cssxref("object-fit")}}</li>
+ <li>{{cssxref("object-position")}}</li>
+</ul>
+</div>
+
+<h3 id="Функции">Функции</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li>{{cssxref("element", "element()")}}</li>
+</ul>
+</div>
+
+<h3 id="Типы_данных">Типы данных</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;uri&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</a></dt>
+ <dd>Представляют собой особый тип CSS изображений, <em>градиенты</em>, как создавать и использовать их.</dd>
+ <dt><a href="/ru/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">Создание спрайтов в CSS</a></dt>
+ <dd>Описывает общую технику группировки нескольких изображений в один документ, чтобы сократить количество запросов и скорость загрузки страницы.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Images')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Стандартизирует префиксную форму <code>-webkit</code> значений функции</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_images/using_css_gradients/index.html b/files/ru/web/css/css_images/using_css_gradients/index.html
new file mode 100644
index 0000000000..994886ec7a
--- /dev/null
+++ b/files/ru/web/css/css_images/using_css_gradients/index.html
@@ -0,0 +1,746 @@
+---
+title: Использование CSS-градиентов
+slug: Web/CSS/CSS_Images/Using_CSS_gradients
+tags:
+  - Градиенты
+  - Примеры
+  - Руководство
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS-градиенты</strong> представлены типом данных {{cssxref("&lt;gradient&gt;")}}, специальным типом {{cssxref("&lt;image&gt;")}}, состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: <em>линейный</em> (создаётся с помощью функции {{cssxref("linear-gradient")}}), <em>круговой</em> (создаётся с помощью {{cssxref("radial-gradient")}}) и конический (создаётся с помощью функции {{cssxref("conic-gradient")}}). Вы можете также создавать повторяющиеся градиенты с помощью функций {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} и {{cssxref("repeating-conic-gradient")}}.</p>
+
+<p>Градиенты могут быть использованы везде, где может быть использован тип <code>&lt;image&gt;</code>, например в качестве фона. Так как градиенты генерируются динамически, они могут избавить от необходимости использовать файлы растровых изображений, которые ранее использовались для достижения похожих эффектов. В дополнение к этому, так как градиенты генерируются браузером, они выглядят лучше, чем растровые изображения в случае увеличения масштаба, и их размер может быть изменён на лету.</p>
+
+<p>Мы начнём с того, что покажем вам линейные градиенты, затем покажем возможности, поддерживаемые всеми типами градиентов, используя линейные градиенты в качестве примера, затем перейдём к круговым, коническим и повторяющимся градиентам.</p>
+
+<h2 id="Использование_линейных_градиентов">Использование линейных градиентов</h2>
+
+<p>Линейный градиент создаёт цветную полосу, имеющую вид прямой линии.</p>
+
+<div>
+<h3 id="Обычный_линейный_градиент">Обычный линейный градиент</h3>
+
+<p>Чтобы создать самый простой тип градиента, всё, что вам нужно – это указать два цвета. Они называются <em>точки остановки цвета</em>. Их должно быть, как минимум, две, но у вас может быть столько, сколько захотите.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="rtl">&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('Обычный_линейный_градиент', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Изменение_направления">Изменение направления</h3>
+
+<p>По умолчанию линейные градиенты идут сверху вниз. Вы можете изменить угол поворота путём задания направления.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="horizontal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.horizontal-gradient {
+  background: linear-gradient(to right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Изменение_направления', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Диагональные_градиенты">Диагональные градиенты</h3>
+
+<p>Вы можете даже создать градиент, проходящий диагонально, из угла в угол.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="diagonal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.diagonal-gradient {
+  background: linear-gradient(to bottom right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Диагональные_градиенты', 200, 100) }}</p>
+</div>
+
+<div>
+<h3 id="Использование_углов">Использование углов</h3>
+
+<p>Если вы хотите больше контроля над его направлением, вы можете задать градиенту определённый угол.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="angled-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.angled-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Использование_углов', 120, 120) }}</p>
+
+<p>При использовании угла <code>0deg</code> создаётся вертикальный градиент, идущий снизу вверх, <code>90deg</code> создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.</p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+</div>
+
+<h2 id="Указание_цветов_и_создание_эффектов">Указание цветов и создание эффектов</h2>
+
+<p>Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы. Возможно также создавать полосы сплошных цветов, и резкие переходы между двумя цветами. Следующее примеры работают во всех градиентных функциях:</p>
+
+<div>
+<h3 id="Использование_более_двух_цветов">Использование более двух цветов</h3>
+
+<p>Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="auto-spaced-linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.auto-spaced-linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Использование_более_двух_цветов', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Расположение_точек_остановок_цветов">Расположение точек остановок цветов</h3>
+
+<p>Вам не нужно оставлять ваши точки остановок цветов на их исходных позициях. Чтобы подправить их расположение, вы можете не задавать каждому ничего, или задать одну или две процентные, а для круговых и линейных градиентов – абсолютные значения. Если вы зададите расположение с процентах, <code>0%</code> будет представлять начальную точку, в то время как <code>100%</code> будет являться конечной точкой; однако, если необходимо, вы можете использовать значения и вне этого диапазона для достижения желаемого эффекта. Если вы не будете задавать расположение, позиция этой точки остановки будет автоматически рассчитана за вас так, что первая точка остановки будет расположена на <code>0%</code>, а последняя – на <code>100%</code>, а все остальные точки остановки будут расположены на полпути между соседними точками остановки.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multicolor-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multicolor-linear {
+   background: linear-gradient(to left, lime 28px, red 77%, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Расположение_точек_остановок_цветов', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Создание_резких_переходов">Создание резких переходов</h3>
+
+<p>Чтобы создать резкий переход между двумя цветами, т. е. получить черту вместо постепенного перехода, обе соседние точки остановки должны быть установлены в одном месте. В этом примере цвета делят точку остановки на отметке <code>50%</code>, посередине градиента:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="striped"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}</pre>
+
+<p>{{ EmbedLiveSample('Создание_резких_переходов', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Подсказки_градиента">Подсказки градиента</h3>
+
+<p>По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="rtl">&lt;div class="color-hint"&gt;&lt;/div&gt;
+&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px; float: left; margin-right: 10px;
+}</pre>
+</div>
+
+<pre class="brush: css">.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('Подсказки_градиента', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Создание_цветных_линий_и_полосок">Создание цветных линий и полосок</h3>
+
+<p>Чтобы добавить внутрь градиента сплошную цветную область без плавного перехода, добавьте две позиции для точки остановки. Точки остановки могут быть в двух позициях, что эквивалентно двум подряд точкам остановки с тем же цветом на разных позициях. Цвет достигнет полной насыщенности на первой точке, проследует с той же насыщенностью до второй точки остановки и перейдёт в цвет следующей точки остановки через первую позицию следующей точки остановки.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multiposition-stops"&gt;&lt;/div&gt;
+&lt;div class="multiposition-stop2"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css">.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Создание_цветных_линий_и_полосок', 120, 120) }}</p>
+
+<p>В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градинета, и так далее.</p>
+
+<p>Во втором примере каждая вторая точка остановки для каждого цвета находится на той же позиции, что и первая точка остановки соседнего цвета, создавая полосатый эффект.</p>
+
+<p>В обоих примерах градиент написан дважды: первый – это метод из CSS-изображений уровня 3 использующий повторения цвета на каждой остановке, а второй пример – это метод из CSS-изображений уровня 4, где в линейном объявлении точек остановки используются множественные точки остановки с двумя значениями длин точек остановки.</p>
+</div>
+
+<div>
+<h3 id="Управление_переходом_градиента">Управление переходом градиента</h3>
+
+<p>По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на растоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="colorhint-gradient"&gt;&lt;/div&gt; &lt;div class="regular-progression"&gt;&lt;/div&gt;
+
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css">.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Управление_переходом_градиента', 120, 120) }}</p>
+</div>
+
+<h3 id="Перекрытие_градиентов">Перекрытие градиентов</h3>
+
+<p>Градиенты поддерживают прозрачность, так что вы можете накладывать фоны для получения всяких разных эффектов. Фоны накладываются снизу вверх таким образом, что первый объявленный будет лежать поверх остальных.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="layered-image"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 300px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css">.layered-image {
+  background: linear-gradient(to right, transparent, mistyrose),
+      url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Перекрытие_градиентов', 300, 150) }}</p>
+
+<h3 id="Наслаивание_градиентов">Наслаивание градиентов</h3>
+
+<p>Вы можете даже наслаивать градиенты друг на друга. Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="stacked-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.stacked-linear {
+  background:
+      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Наслаивание_градиентов', 200, 200) }}</p>
+
+<h2 id="Использование_круговых_градиентов">Использование круговых градиентов</h2>
+
+<p>Круговые градиенты схожи с линейными градиентами, за исключением того, что они создают градиентный круг по направлению от центральной точки. Вы можете указать, где должна находиться центральная точка. Вы также можете сделать её круглой или овальной.</p>
+
+<h3 id="Обычный_круговой_градиент">Обычный круговой градиент</h3>
+
+<p>Как и в случае с линейными градиентами, всё, что вам нужно, чтобы создать круговой градиент – это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, градиент становится овальным с учётом соотношения сторон содержащего его блока:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="simple-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-radial {
+  background: radial-gradient(red, blue);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Обычный_круговой_градиент', 120, 120) }}</p>
+
+<h3 id="Размещение_круговых_точек_остановки">Размещение круговых точек остановки</h3>
+
+<p>Опять же, как и у линейных градиентов, вы можете расположить каждую круговую точку остановки, указав значение в виде процентной или абсолютной длины.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Размещение_круговых_точек_остановки', 120, 120) }}</p>
+
+<h3 id="Расположение_центра_градиента">Расположение центра градиента</h3>
+
+<p>Вы можете расположить центр градиента с помощью ключевых значений, процентной или абсолютной длины. Значения в виде числа или процента повторяются в случае, если указано только одно из них, иначе порядок повторения будет определяться порядком расположения, начиная слева и сверху.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 240px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Расположение_центра_градиента', 120, 120) }}</p>
+
+<h3 id="Задание_размеров_кругового_градиента">Задание размеров кругового градиента</h3>
+
+<p>В отличие от линейных градиентов, круговому градиенту можно задавать размеры. Возможные значения включат в себя: ближайший угол, ближайшая сторона, самый дальний угол и самая дальняя сторона, самый дальний угол – значение по умолчанию.</p>
+
+<h4 id="Пример_ближайшая_сторона_для_эллипса">Пример: ближайшая сторона для эллипса</h4>
+
+<p>В этом примере используется значение размера <code>closest-side</code>, которое означает, что размер определяется расстоянием от начальной точки (центра) до ближайшей стороны блока.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-ellipse-side"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Пример_ближайшая_сторона_для_эллипса', 240, 100) }}</p>
+
+<h4 id="Пример_самый_дальний_угол_для_эллипса">Пример: самый дальний угол для эллипса</h4>
+
+<p>Этот пример схож с предыдущим, за исключением того, что его размер указан как <code>farthest-corner</code>, что устанавливает размер градиента значением расстояния от начальной точки до самого дальнего угла блока.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-ellipse-far"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner at 90% 90%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Пример_самый_дальний_угол_для_эллипса', 240, 100) }}</p>
+
+<h4 id="Пример_ближайшая_сторона_для_круга">Пример: ближайшая сторона для круга</h4>
+
+<p>Этот пример использует <code>closest-side</code>, что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-circle-close"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-circle-close {
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Пример_ближайшая_сторона_для_круга', 240, 120) }}</p>
+
+<h3 id="Наложение_круговых_градиентов">Наложение круговых градиентов</h3>
+
+<p>Вы можете накладывать круговые градиенты так же, как линейные. Первый объявленный будет сверху, последний – снизу.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="stacked-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Наложение_круговых_градиентов', 200, 200) }}</p>
+
+<h2 id="Использование_конических_градиентов">Использование конических градиентов</h2>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-функция <strong><code>conic-gradient()</code></strong> создаёт изображение, состоящее из градиента с переходом цвета, обёрнутым вокруг центральной точки (в отличие от градиента, исходящего кругом от центральной точки). Образцом конического градиента можно назвать круговые диаграммы и цветовые круги, но он также может быть использован для создания шахматной доски (клетки) и других интересных эффектов.</p>
+
+<p>Синтаксис конического градиента схож с синтаксисом кругового градиента, но с тем отличием, что точки остановки цвета располагаются вокруг градиентной дуги, вдоль длины окружности круга, а не по градиентной линии, идущей от центра градиента. Также, точки остановки цвета задаются только в процентах или градусах, абсолютные величины недопустимы.</p>
+
+<p>В круговом градиенте цвета переходят от центра окружности наружу, во всех направлениях. В случае конического градиента цвета идут, как бы оборачиваясь вокруг центра круга, начиная сверху и двигаясь по часовой стрелке. Так же, как и в круговом градиенте, вы можете указать расположение центра градиента. Так же, как и в линейном градиенте, вы можете изменять угол градиента.</p>
+
+<div>
+<h3 id="Обычный_конический_градиент">Обычный конический градиент</h3>
+
+<p>Так же, как и в случае с линейными и круговыми градиентами, всё, что вам нужно для создания конического градиента – это два цвета. По умолчанию центр градиента находится в точке 50% 50%, начало градиента направлено вверх:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="simple-conic"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-conic {
+  background: conic-gradient(red, blue);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Обычный_конический_градиент', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Расположение_конического_центра">Расположение конического центра</h3>
+
+<p>Как и в круговом градиенте, вы можете задать расположение центра конического градиента с помощью ключевых значений, процентных или абсолютных величин с использованием ключевого слова "at".</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Расположение_конического_центра', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Изменение_угла">Изменение угла</h3>
+
+<p>Вы можете задать угол, в котором направлено начало градиента значением типа {{cssxref("&lt;angle&gt;")}}, с предшествующим ему ключевым словом "from".</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Изменение_угла', 120, 120) }}</p>
+</div>
+
+<h2 id="Использование_повторяющихся_градиентов">Использование повторяющихся градиентов</h2>
+
+<p>Функции {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} и {{cssxref("conic-gradient")}} не поддерживают автоматически повторяющиеся точки остановки цвета. Однако, для реализации этой функциональности существуют функции {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} и {{cssxref("repeating-conic-gradient")}}.</p>
+
+<p>Размер повторяющейся градиентной линии или дуги – это длина от значения первой до значения последней точки остановки цвета. Если первая точка остановки содержит только цвет без указания длины до точки остановки, то используется значение по умолчанию, равное 0. Если последняя точка остановки содержит только цвет без указания длины до точки установки, то используется значение по умолчанию, равное 100%. Если ни то, ни другое не определено, то линия градиента будет равна 100%, что означает, что линейный и конический градиент не будет повторяться, а круговой градиент будет повторяться, только если радиус градиента меньше, чем расстояние между центром градиента и самым дальним углом. Если первая точка остановки определена и имеет значение больше 0, градиент будет повторяться при условии, что размер линии или дуги равен разнице между первой и последней точкой остановки, если эта разница меньше, чем 100% или 360 градусов.</p>
+
+<div>
+<h3 id="Повторяющиеся_линейные_градиенты">Повторяющиеся линейные градиенты</h3>
+
+<p>В этом примере используется {{cssxref("repeating-linear-gradient")}} для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Повторяющиеся_линейные_градиенты', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Множественные_повторяющиеся_линейные_градиенты">Множественные повторяющиеся линейные градиенты</h3>
+
+<p>Так же, как и в случае с обычными линейными и круговыми градиентами, вы можете использовать множественные градиенты, один поверх другого. Это имеет смысл, только если градиенты частично прозрачны, что позволяет видеть одни градиенты сквозь прозрачные части других градиентов, этого же можно достичь при условии использования разных <a href="/en-US/docs/Web/CSS/background-size">размеров фона (background-size)</a>, при этом возможно ещё и при разных значениях свойства <a href="/en-US/docs/Web/CSS/background-position">background-position</a> для каждого градиента. Мы использовали прозрачность.</p>
+
+<p>В данном случае градиентные линии имеют длину 300px, 230px и 300px.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi-repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 600px;
+  height: 400px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Множественные_повторяющиеся_линейные_градиенты', 600, 400) }}</p>
+</div>
+
+<h3 id="Клетчатый_градиент">Клетчатый градиент</h3>
+
+<p>Для создания клетчатого градиента мы используем несколько полупрозрачных перекрывающих друг друга градиентов. В первом объявлении фона мы внесли в список каждую остановку цвета отдельно. Во втором объявлении свойства background используется синтаксис многопозиционных остановок цвета:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Клетчатый_градиент', 200, 200) }}</p>
+
+<h3 id="Повторяющиеся_круговые_градиенты">Повторяющиеся круговые градиенты</h3>
+
+<p>В этом примере для создания кругового градиента, повторяющегося из центральной точки, используется {{cssxref("repeating-radial-gradient")}}. Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="repeating-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Повторяющиеся_круговые_градиенты', 120, 120) }}</p>
+
+<h3 id="Множественные_повторяющиеся_круговые_градиенты">Множественные повторяющиеся круговые градиенты</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi-target"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 250px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Множественные_повторяющиеся_круговые_градиенты', 250, 150) }}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Градиентные функции: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>Типы данных CSS, связанные с градиентами: {{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}</li>
+ <li>Свойства CSS, связанные с градиентами: {{cssxref("background")}}, {{cssxref("background-image")}}</li>
+ <li><a class="external" href="http://lea.verou.me/css3patterns/">Галерея шаблонов градиентов CSS, от Lea Verou</a></li>
+ <li><a class="external" href="http://standardista.com/cssgradients">Библиотека градиентов CSS3, от Estelle Weyl</a></li>
+ <li><a href="https://cssgenerator.org/gradient-css-generator.html">Генератор градиентов CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/css_lists_and_counters/index.html b/files/ru/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..773990c723
--- /dev/null
+++ b/files/ru/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,134 @@
+---
+title: CSS Lists and Counters
+slug: Web/CSS/CSS_Lists_and_Counters
+tags:
+  - CSS
+  - CSS Lists and Counters
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Lists and Counters</strong> is a module of CSS that defines how lists are laid out, how the list marker can be styled and how authors can create new counters.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
+</div>
+
+<h3 id="At-rules">At-rules</h3>
+
+<dl>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@counter-style/system","system")}}</li>
+  <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
+  <li>{{cssxref("@counter-style/negative", "negative")}}</li>
+  <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
+  <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
+  <li>{{cssxref("@counter-style/range", "range")}}</li>
+  <li>{{cssxref("@counter-style/pad", "pad")}}</li>
+  <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
+  <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation">Consistent list indentation</a></dt>
+ <dd>Explains how to reach a consistent indentation between different browsers.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Using CSS counters</a></dt>
+ <dd>Describes how to use counters to be able to use numbering outside of traditional list elements or to perform complex counting.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html
new file mode 100644
index 0000000000..6f2cf1d36b
--- /dev/null
+++ b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html
@@ -0,0 +1,126 @@
+---
+title: CSS счетчики
+slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+tags:
+  - CSS
+  - CSS счетчики
+  - вложенные счетчики
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1 (<a href="https://www.w3.org/TR/CSS21/generate.html#counters">ссылка на спецификацию</a>).</p>
+
+<p>Значение счетчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. </p>
+
+<p>{{cssxref("counter-increment")}} может быть отображен на странице, используя функцию <code>counter() или counters() в свойстве </code>{{cssxref("content")}}.</p>
+
+<h2 id="Использование_счетчиков">Использование счетчиков</h2>
+
+<p>Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счетчика - используйте функцию <code>counter(). Следующий пример прибавляет в начале каждого h3 элемента </code>"Section &lt;<em>значение счетчика</em>&gt;:".</p>
+
+<pre class="brush: css">body {
+  counter-reset: section;                     /* Устанавливает значение
+                                                 счетчика, равным 0 */
+}
+
+h3::before {
+  counter-increment: section;                 /* Инкрементирует счетчик*/
+  content: "Секция " counter(section) ": ";   /* Отображает текущее
+                                                 значение счетчика */
+}
+</pre>
+
+<p>Пример:</p>
+
+<pre class="brush: html">&lt;h3&gt;Вступление&lt;/h3&gt;
+&lt;h3&gt;Основная часть&lt;/h3&gt;
+&lt;h3&gt;Заключение&lt;/h3&gt;</pre>
+
+<p>{{EmbedLiveSample("Использование_счетчиков", 200, 150)}}</p>
+
+<h2 id="Вложенные_счетчики">Вложенные счетчики</h2>
+
+<p>CSS счетчики могут быть очень полезны для создания нумерованых списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:</code></p>
+
+<pre class="brush: css">ol {
+  counter-reset: section;           /*Создает новый счетчик для каждого
+                                      тега &lt;ol&gt;*/
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;      /*Инкрементировуется только счетчик
+                                     текущего уровня вложенности*/
+  content: counters(section,".") " ";/*Добавляем значения всех уровней
+                                    вложенности, используя разделитель '.'*/
+                                   /*Если необходима поддержка &lt; IE8,
+                                      необходимо убедиться, что после
+                                      разделителя ('.') не стоит пробел*/
+}
+</pre>
+
+<p>Обьединим с данным HTML:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<p>Результат:</p>
+
+<p>{{EmbedLiveSample("Вложенные_счетчики", 250, 350)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
diff --git a/files/ru/web/css/css_positioning/index.html b/files/ru/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..43570e40cd
--- /dev/null
+++ b/files/ru/web/css/css_positioning/index.html
@@ -0,0 +1,115 @@
+---
+title: CSS Positioning
+slug: Web/CSS/CSS_Positioning
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Positioning
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Positioning</strong> is a module of CSS that defines how to absolutely and relavitely position elements on the page.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt>
+ <dd>Presents the notion of stacking context and explain how z-ordering works, with several examples.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>5.0</td>
+   <td>6.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
new file mode 100644
index 0000000000..8a76b44318
--- /dev/null
+++ b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
@@ -0,0 +1,283 @@
+---
+title: Контекст наложения (stacking context)
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+<p>Контекст наложения (stacking context) это концепция трехмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном.  HTML элементы занимают это место по порядку, основанному на атрибутах элемента.</p>
+
+<p>« <a href="/en-US/docs/CSS" title="CSS">CSS</a> « <a href="/en-US/docs/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p>
+
+<h2 id="Контекст_наложения">Контекст наложения</h2>
+
+<p> </p>
+
+<p>В предыдущем примере  <a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" title="Adding z-index">Добавляем z-index</a>, порядок отображения определенных DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( <em>stacking context )</em>.</p>
+
+<p>Контекст может формироваться в любом месте документа, любым элементом, у которого выполняется одно из следующих условий: </p>
+
+<ul>
+ <li>является корневым элементом (HTML),</li>
+ <li>позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto",</li>
+ <li>flex элемент с z-index отличным от  "auto", чей родительский элемент имеет свойство display: flex|inline-flex,</li>
+ <li>элементы с  {{cssxref("opacity")}} меньше чем 1. (См. <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">the specification for opacity</a>),</li>
+ <li>элементы с  {{cssxref("transform")}} отличным от "none",</li>
+ <li>элементы с {{cssxref("mix-blend-mode")}} значением отличным от "normal",</li>
+ <li>элементы с {{cssxref("filter")}} значением отличным от "none",</li>
+ <li>элементы с {{cssxref("isolation")}} установленным в  "isolate",</li>
+ <li><code>position: fixed</code></li>
+ <li>если мы указываем элементу атрибут  <code>{{cssxref("will-change")}}</code> при этом не обязательно присваивать ему значения (См. <a href="http://dev.opera.com/articles/css-will-change-property/">this post</a>)</li>
+ <li>элементы с {{cssxref("-webkit-overflow-scrolling")}} установленым в "touch"</li>
+</ul>
+
+<p>Внутри контекста наложения дочерние элементы расположены в соответствии с правилами, описанными ранее. Важно заметить, что значения свойства z-index для дочерних элементов формирующих контекст наложения, будут учитываться только в рамках родительского элемента. Контекст наложения обрабатываются атомарно, как единое целое в контексте наложения родителя.</p>
+
+<p>Суммируем:</p>
+
+<ul>
+ <li>Позиционирование и присваивание HTML элементам свойства z-index создает контекст наложения, (так же как и присваивание элементу opacity меньше 1).</li>
+ <li>Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения. </li>
+ <li>Каждый контекст наложения абсолютно независим от своего соседа: только подчиненные элементы учитываются при обработке контекста наложения.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> Иерархия контекстов наложения является подмножеством иерархии HTML элементов, потому что только определенные элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.</div>
+
+<h2 id="Пример"><strong>Пример</strong></h2>
+
+<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p>
+
+<p>В примере каждый позиционированный элемент создает свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:</p>
+
+<ul>
+ <li>Root
+  <ul>
+   <li>DIV #1</li>
+   <li>DIV #2</li>
+   <li>DIV #3
+    <ul>
+     <li>DIV #4</li>
+     <li>DIV #5</li>
+     <li>DIV #6</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.</p>
+
+<div class="note">
+<p><strong>Notes:</strong></p>
+
+<ul>
+ <li>DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контекта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому,  DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .DIV #1).</li>
+ <li>По этим же причинам DIV #2 (z-index 2) отрисовывается под DIV#5 (z-index 1), так как DIV #5 принадлежит DIV #3, чей z-index больше( чем z-index DIV #2).</li>
+ <li>У DIV #3 есть свойство z-index 4, но это значение независимо от z-index'ов DIV #4, DIV #5 и DIV #6, потому что принадлежат они разным контекстам наложения.</li>
+ <li>An easy way to figure out the <em>rendering order</em> of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order):
+  <ul>
+   <li>Root
+    <ul>
+     <li>DIV #2 - z-index is 2</li>
+     <li>DIV #3 - z-index is 4
+      <ul>
+       <li>DIV #5 - z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1</li>
+       <li>DIV #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3</li>
+       <li>DIV #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6</li>
+      </ul>
+     </li>
+     <li>DIV #1 - z-index is 5</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="Example_Source_Code"><strong>Example Source Code</strong></h2>
+
+<pre class="brush: html">&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+
+&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
+  &lt;head&gt;
+
+    &lt;title&gt;Understanding CSS z-index: The Stacking Context: Example Source&lt;/title&gt;
+
+    &lt;style type="text/css"&gt;
+      * {
+        margin: 0;
+        }
+      html {
+        padding: 20px;
+        font: 12px/20px Arial, sans-serif;
+        }
+      div {
+        opacity: 0.7;
+        position: relative;
+        }
+      h1 {
+        font: inherit;
+        font-weight: bold;
+        }
+      #div1, #div2 {
+        border: 1px dashed #696;
+        padding: 10px;
+        background-color: #cfc;
+        }
+      #div1 {
+        z-index: 5;
+        margin-bottom: 190px;
+        }
+      #div2 {
+        z-index: 2;
+        }
+      #div3 {
+        z-index: 4;
+        opacity: 1;
+        position: absolute;
+        top: 40px;
+        left: 180px;
+        width: 330px;
+        border: 1px dashed #900;
+        background-color: #fdd;
+        padding: 40px 20px 20px;
+        }
+      #div4, #div5 {
+        border: 1px dashed #996;
+        background-color: #ffc;
+        }
+      #div4 {
+        z-index: 6;
+        margin-bottom: 15px;
+        padding: 25px 10px 5px;
+        }
+      #div5 {
+        z-index: 1;
+        margin-top: 15px;
+        padding: 5px 10px;
+        }
+      #div6 {
+        z-index: 3;
+        position: absolute;
+        top: 20px;
+        left: 180px;
+        width: 150px;
+        height: 125px;
+        border: 1px dashed #009;
+        padding-top: 125px;
+        background-color: #ddf;
+        text-align: center;
+        }
+    &lt;/style&gt;
+
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;div id="div1"&gt;
+      &lt;h1&gt;Division Element #1&lt;/h1&gt;
+      &lt;code&gt;position: relative;&lt;br/&gt;
+      z-index: 5;&lt;/code&gt;
+    &lt;/div&gt;
+
+    &lt;div id="div2"&gt;
+      &lt;h1&gt;Division Element #2&lt;/h1&gt;
+      &lt;code&gt;position: relative;&lt;br/&gt;
+      z-index: 2;&lt;/code&gt;
+    &lt;/div&gt;
+
+    &lt;div id="div3"&gt;
+
+      &lt;div id="div4"&gt;
+        &lt;h1&gt;Division Element #4&lt;/h1&gt;
+        &lt;code&gt;position: relative;&lt;br/&gt;
+        z-index: 6;&lt;/code&gt;
+      &lt;/div&gt;
+
+      &lt;h1&gt;Division Element #3&lt;/h1&gt;
+      &lt;code&gt;position: absolute;&lt;br/&gt;
+      z-index: 4;&lt;/code&gt;
+
+      &lt;div id="div5"&gt;
+        &lt;h1&gt;Division Element #5&lt;/h1&gt;
+        &lt;code&gt;position: relative;&lt;br/&gt;
+        z-index: 1;&lt;/code&gt;
+      &lt;/div&gt;
+
+      &lt;div id="div6"&gt;
+        &lt;h1&gt;Division Element #6&lt;/h1&gt;
+        &lt;code&gt;position: absolute;&lt;br/&gt;
+        z-index: 3;&lt;/code&gt;
+      &lt;/div&gt;
+
+    &lt;/div&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Division_Element_.231" name="Division_Element_.231">Division Element #1</h3>
+
+<pre class="brush:css">position: relative;
+z-index: 5;
+</pre>
+
+<div id="div2">
+<h3 id="Division_Element_.232" name="Division_Element_.232">Division Element #2</h3>
+
+<pre class="brush:css">position: relative;
+z-index: 2;
+</pre>
+</div>
+
+<div id="div3">
+<h3 id="Division_Element_.233" name="Division_Element_.233">Division Element #3</h3>
+
+<pre class="brush:css">position: absolute;
+z-index: 4;
+</pre>
+</div>
+
+<div id="div4">
+<h3 id="Division_Element_.234" name="Division_Element_.234">Division Element #4</h3>
+
+<pre class="brush:css">position: relative;
+z-index: 6;
+</pre>
+</div>
+
+<div id="div5">
+<h3 id="Division_Element_.235" name="Division_Element_.235">Division Element #5</h3>
+
+<pre class="brush:css">position: relative;
+z-index: 1;
+</pre>
+</div>
+
+<div id="div6">
+<h3 id="Division_Element_.236" name="Division_Element_.236">Division Element #6</h3>
+
+<pre class="brush:css">position: absolute;
+z-index: 3;
+</pre>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_without_z-index" title="CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_and_float" title="CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" title="CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_1" title="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-US/docs/CSS/Understanding_z-index/Stacking_context_example_2" title="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-US/docs/CSS/Understanding_z-index/Stacking_context_example_3" title="CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the english translation of an article I wrote in italian for <a href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
diff --git a/files/ru/web/css/css_ruby/index.html b/files/ru/web/css/css_ruby/index.html
new file mode 100644
index 0000000000..fb4a2f71f7
--- /dev/null
+++ b/files/ru/web/css/css_ruby/index.html
@@ -0,0 +1,92 @@
+---
+title: CSS Ruby Layout
+slug: Web/CSS/CSS_Ruby
+translation_of: Web/CSS/CSS_Ruby
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS Ruby Layout - это модуль <a href="/en-US/docs/Web/CSS">CSS</a>, который предоставляет модель рендеринга и элементы управления форматированием, связанные с отображением аннотации ruby. Рубиновая аннотация - это форма межлинейной аннотации, состоящая из коротких строк текста наряду с базовым текстом. Они обычно используются в восточноазиатских документах для обозначения произношения или для краткой аннотации.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_properties">CSS properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("ruby-align")}}</li>
+ <li>{{cssxref("ruby-position")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html
new file mode 100644
index 0000000000..1132200f6e
--- /dev/null
+++ b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html
@@ -0,0 +1,66 @@
+---
+title: Базовые концепции CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap/Basic_concepts
+translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Спецификация <a href="https://drafts.csswg.org/css-scroll-snap-1/">CSS Scroll Snap</a> даёт нам возможность реализовывать прокрутку документа с привязкой к определённым точкам. Это может быть полезно в создании интерфейса, по своей работе больше похожего на мобильное приложение.</p>
+
+<h2 id="Основы_Scroll_Snap">Основы Scroll Snap</h2>
+
+<p>Ключевыми свойствами спецификации Scroll Snap являются {{CSSxRef("scroll-snap-type")}} и {{CSSxRef("scroll-snap-align")}}. Свойство <code>scroll-snap-type</code> применяется к <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Scroll_container">скролл-контейнеру</a> для определения типа и направления прокрутки.</p>
+
+<p>Свойство <code>scroll-snap-align</code> нужно применять к дочерним элементам, чтобы указать позицию, к которой будет привязана прокрутка. Пример ниже демонстрирует прокрутку с привязкой вдоль оси <code>y</code>, а свойство <code>scroll-snap-align</code> применяется для элемента "section", чтобы задать точку, на которой прокрутка должна остановиться.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}</p>
+
+<h2 id="Свойство_scroll-snap-type">Свойство scroll-snap-type</h2>
+
+<p>Свойство {{CSSxRef("scroll-snap-type")}} необходимо, чтобы задавать направление, в котором будет происходить привязка прокрутки. Значением свойства может быть <code>x</code>, <code>y</code>, или соответствующие логические <code>block</code> или <code>inline</code>. Также можно использовать ключевое слово <code>both</code>, чтобы привязка работала в обоих направлениях.</p>
+
+<p>Также можно передавать ключевые слова <code>mandatory</code>, или <code>proximity</code>. Ключевое слово <code>mandatory</code> определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово <code>proximity</code> означает, что привязка может прозойти , но не обязательно.</p>
+
+<p>Использование <code>mandatory</code> делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое повысоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к пределённому месту на странице странице. Следовательно, применение <code>mandatory</code> должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.</p>
+
+<p>При значении <code>proximity</code> привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с <code>mandatory</code> на <code>proximity</code>, чтобы увидеть, как это влияет на работу прокрутки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}</p>
+
+<h2 id="Свойство_scroll-snap-align">Свойство scroll-snap-align</h2>
+
+<p>Свойство {{CSSxRef("scroll-snap-align")}} может принимать значения <code>start</code>, <code>end</code>, или <code>center</code>, обозначающие, какую сторону контейнера прижимать к дочернему элементу. В примере ниже вы можете изменить значение <code>scroll-snap-align</code>, чтобы увидеть, как это повлияет на работу прокрутки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}</p>
+
+<h2 id="Внутренний_отступ_контейнера">Внутренний отступ контейнера</h2>
+
+<p>Если вы не хотите, чтобы содержимое вплотную прилегало к краю прокручиваемого контейнера, можете воспользоваться сокращённым свойством {{CSSxRef("scroll-padding")}} или альтернативными ему более конкретными свойствами <code>scroll-padding-*</code>, чтобы задать для прокрутки внутренние отступы с каждой стороны контейнера.</p>
+
+<p>В примере ниже для свойства <code>scroll-padding</code> установлено значение 40 пикселей. Когда происходит смещение к началу второй и третьей секции, прокрутка останавливается в 40 пикселях от начала элемента. Попробуйте изменить значение свойства <code>scroll-padding</code>, чтобы увидеть изменение размера отступа.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}</p>
+
+<p>Это может быть полезно в ситуации, когда у вас есть фиксированно позиционированный элемент. Например, панель навигации, которая может перекрывать содержимое. С помощью <code>scroll-padding</code> вы можете оставить место для панели, как это сделано в примере ниже, где <code>&lt;h1&gt;</code> остаётся на экране, а содержимое при прокрутке оказывается под панелью. Без отступов шапка перекроет некоторую часть содержимого, когда произойдёт смещение к привязанной точке.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}</p>
+
+<h2 id="Внешние_отступы_дочерних_элементов">Внешние отступы дочерних элементов</h2>
+
+<p>Свойство {{CSSxRef("scroll-margin")}} может быть задано для дочерних элементов и определяет, по сути, внешний оступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством <code>scroll-padding</code> для родителя. Опробуйте его в примере ниже</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}</p>
+
+<h2 id="Свойство_scroll-snap-stop">Свойство scroll-snap-stop</h2>
+
+<p>Свойство {{CSSxRef("scroll-snap-stop")}} сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.</p>
+
+<p>Данное свойство может быть полезно в ситуации, когда нужно, чтобы пользователь гарантированно увидел каждую прокручиваемую секцию, случайно не пролистав какую-то из них. С другой сторона, такое поведение прокрутки может только мешать и замедлять пользователя, который ищет конкретную секцию.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: на данный момент свойство <code>scroll-snap-stop</code> помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.</p>
+</div>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>На страницах каждого свойства Scroll Snap содержатся подробности поддержки браузерами. Обратите внимание, что до версии 68, в браузере Firefox была реализована поддержка старой версии спецификации. <a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/compat">Читайте следующее руководство</a>, чтобы узнать, как писать код, который будет поддерживаться всеми браузерами.</p>
diff --git a/files/ru/web/css/css_scroll_snap/index.html b/files/ru/web/css/css_scroll_snap/index.html
new file mode 100644
index 0000000000..1d9daef4a3
--- /dev/null
+++ b/files/ru/web/css/css_scroll_snap/index.html
@@ -0,0 +1,86 @@
+---
+title: CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Scroll_Snap
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS Scroll Snap</strong> is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a {{Glossary("scroll container")}}’s {{Glossary("scrollport")}} may end at after a scrolling operation has completed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The previous version of this module was called Scroll Snap Points and has been deprecated. CSS Scroll Snap is the current implementation.</p>
+</div>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties_on_Containers">CSS Properties on Containers</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+ <li>{{cssxref("scroll-snap-stop")}}</li>
+ <li>{{cssxref("scroll-padding")}}</li>
+ <li>{{cssxref("scroll-padding-top")}}</li>
+ <li>{{cssxref("scroll-padding-right")}}</li>
+ <li>{{cssxref("scroll-padding-bottom")}}</li>
+ <li>{{cssxref("scroll-padding-left")}}</li>
+ <li>{{cssxref("scroll-padding-inline")}}</li>
+ <li>{{cssxref("scroll-padding-inline-start")}}</li>
+ <li>{{cssxref("scroll-padding-inline-end")}}</li>
+ <li>{{cssxref("scroll-padding-block")}}</li>
+ <li>{{cssxref("scroll-padding-block-start")}}</li>
+ <li>{{cssxref("scroll-padding-block-end")}}</li>
+</ul>
+
+<h3 id="CSS_Properties_on_Children">CSS Properties on Children</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-align")}}</li>
+ <li>{{cssxref("scroll-margin")}}</li>
+ <li>{{cssxref("scroll-margin-top")}}</li>
+ <li>{{cssxref("scroll-margin-right")}}</li>
+ <li>{{cssxref("scroll-margin-bottom")}}</li>
+ <li>{{cssxref("scroll-margin-left")}}</li>
+ <li>{{cssxref("scroll-margin-inline")}}</li>
+ <li>{{cssxref("scroll-margin-inline-start")}}</li>
+ <li>{{cssxref("scroll-margin-inline-end")}}</li>
+ <li>{{cssxref("scroll-margin-block")}}</li>
+ <li>{{cssxref("scroll-margin-block-start")}}</li>
+ <li>{{cssxref("scroll-margin-block-end")}}</li>
+</ul>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts">Basic concepts of CSS Scroll Snap</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/compat">Browser Compatibility and Scroll Snap</a></li>
+</ul>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The individual property pages detail the browser compatibility situation for Scroll Snap. Note that at the present time Firefox still implements an old version of the specification. <a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/compat">Read the guide to browser compatibility</a> for an overview of how to support both the old and new specification. </p>
diff --git a/files/ru/web/css/css_table/index.html b/files/ru/web/css/css_table/index.html
new file mode 100644
index 0000000000..b1de286ad4
--- /dev/null
+++ b/files/ru/web/css/css_table/index.html
@@ -0,0 +1,101 @@
+---
+title: CSS Table
+slug: Web/CSS/CSS_Table
+tags:
+  - CSS
+  - CSS Reference
+  - CSS Table
+  - Overview
+translation_of: Web/CSS/CSS_Table
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Table</strong> - модуль в CSS, который определяет, как размещать данные в таблицах.</p>
+
+<h2 id="Справка">Справка</h2>
+
+<h3 id="Свойства">Свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-spacing")}}</li>
+ <li>{{cssxref("caption-side")}}</li>
+ <li>{{cssxref("empty-cells")}}</li>
+ <li>{{cssxref("table-layout")}}</li>
+ <li>{{cssxref("vertical-align")}}</li>
+</ul>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<p><em>Нет.</em></p>
+
+<h2 id="Спецификации">Спецификации</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("CSS2.1", "tables.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_transitions/index.html b/files/ru/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..f281fb9353
--- /dev/null
+++ b/files/ru/web/css/css_transitions/index.html
@@ -0,0 +1,120 @@
+---
+title: CSS Transitions
+slug: Web/CSS/CSS_Transitions
+tags:
+  - CSS
+  - CSS Transitions
+  - Experimental
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Transitions
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Transitions</strong> is a module of CSS that defines how to create smooth transitions between values of a given CSS properties. It allows to create them, but also to define their evolution, using timing functions..</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt>
+ <dd>Step-by-step tutorial about how to create smooth transitions using CSS, this article describes each relevant CSS properties explains how they interact.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 {{ property_prefix("-webkit") }}<br>
+    26.0</td>
+   <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10.0</td>
+   <td>11.6 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.0 {{ property_prefix("-webkit") }}<br>
+    6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>10.0 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.2 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Transitions, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> can triggers animations independantly of value changes.</li>
+</ul>
+
+<p> </p>
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
new file mode 100644
index 0000000000..2e75865c4d
--- /dev/null
+++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html
@@ -0,0 +1,1155 @@
+---
+title: Использование CSS переходов
+slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<p>{{CSSref}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary"><strong>CSS transitions</strong> предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.</span></p>
+
+<p>Анимации, составляющие переход между двумя состояниями, часто называют <em>неявными переходами</em>, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.<img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>
+
+<p>CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой  продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).</p>
+
+<div class="note"><strong>Замечание:</strong> CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.</div>
+
+<h2 id="Какие_CSS_свойства_анимируются">Какие CSS свойства анимируются?</h2>
+
+<p>Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень<a href="/en-US/docs/CSS/CSS_animated_properties"> доступных для анимирования свойств </a>ограничен определенным набором.</p>
+
+<div class="note">Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.</div>
+
+<p class="note">Значение свойства <code>auto</code> является сложным случаем. Спецификация не рекомендует анимировать в значение <code>auto</code> и из значения <code>auto</code>. Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с <code>auto</code> следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.</p>
+
+<p class="note">Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью <code>.appendChild()</code> или удаления его <code>display: none; свойства</code>. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить <code>window.setTimeout()</code> c некоторым количеством миллисекунд до изменения CSS свойства, которое вы собираетесь анимировать.</p>
+
+<h3 id="Пример_анимирования_нескольких_свойств">Пример анимирования нескольких свойств</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; highlight:[3]">&lt;body&gt;
+    &lt;p&gt;К блоку ниже применятся анимации для свойств: width, height, background-color, transform. Наведите на него, чтоб увидеть, как они анимируются&lt;/p&gt;
+    &lt;div class="box"&gt;&lt;/div&gt;
+&lt;/body&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[8,9]">.box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
+    transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+    background-color: #FFCCCC;
+    width: 200px;
+    height: 200px;
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Пример_анимирования_нескольких_свойств', 600, 300) }}</p>
+
+<h2 id="CSS_свойства_опредяющие_переходы">CSS свойства, опредяющие переходы</h2>
+
+<p>CSS переходы контролируются свойством<a href="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}}. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.</p>
+
+<p>Можно контролировать определенные параметры перехода следующими подсвойствами:</p>
+
+<p><strong>(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS <code>transition</code>s только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство <a href="/en-US/docs/CSS/animation"><code>animation</code></a>.)</strong></p>
+
+<dl>
+ <dt>{{cssxref("transition-property")}}</dt>
+ <dd>Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.</dd>
+ <dt>{{cssxref("transition-duration")}}</dt>
+ <dd>Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности.
+ <div>
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div>
+ </div>
+
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+ </div>
+
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+ </div>
+
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-timing-function")}}</dt>
+ <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство <a href="/en-US/docs/CSS/timing-function">функций времени</a> может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда <a href="http://easings.net/">Easing Functions Cheat Sheet</a>.
+ <div class="cleared">
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
+ </div>
+
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
+ </div>
+
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
+ </div>
+
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-delay")}}</dt>
+ <dd>Определяет как много должно пройти времени, перед тем как начнётся переход.
+ <div>
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+ </div>
+
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+ </div>
+
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+ </div>
+
+ <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;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+</dl>
+
+<p>Короткая запись синтаксиса:</p>
+
+<pre class="brush: css">div {
+    transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
+}</pre>
+
+<h2 id="Определение_завершения_перехода">Определение завершения перехода</h2>
+
+<p>Есть событие, срабатывающее, когда переход завершен. Во всех браузерах, совместимых со стандартами, есть событие <code>transitionend</code>, в WebKit есть <code>webkitTransitionEnd</code>. Смотрите таблицу поддержки браузерами для дополнительной информации. У <code>transitionend</code> есть 2 свойства:</p>
+
+<dl>
+ <dt><code>propertyName</code></dt>
+ <dd>Строка, показывающая изменение какого свойства завершено.</dd>
+ <dt><code>elapsedTime</code></dt>
+ <dd>Число с точкой, какое количество времени переход выполнялся, до того как запустилось событие. Это значение не равно свойству {{cssxref("transition-delay")}}.</dd>
+</dl>
+
+<p>Как обычно, используйте метод {{domxref("element.addEventListener()")}}, чтобы следить за этим событием:</p>
+
+<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
+</pre>
+
+<div class="note"><strong>Замечание:</strong> Событие <code>transitionend</code> не произойдёт, когда переход был прерван до его завершения, например, если установили {{cssxref("display")}}<code>: none </code>или значение анимируемого свойства изменилось<code>.</code></div>
+
+<h2 id="Когда_у_списков_значений_свойств_разные_длины">Когда у списков значений свойств разные длины</h2>
+
+<p>Если любой список свойств короче, чем другие, его значения повторяюся, чтобы сделать его длину как и у других. Например:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+</pre>
+
+<p>Это рассматривается, как если бы это было:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}</pre>
+
+<p>Похожим образом, если какой-то список свойств длиннее, чем у {{cssxref("transition-property")}}, он обрезается:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}</pre>
+
+<p>Будет интерпретировано как:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}</pre>
+
+<h2 id="Простой_пример">Простой пример</h2>
+
+<p>Пример 4 секунды выполняет плавное измение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:</p>
+
+<pre class="brush: css">#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+</pre>
+
+<h2 id="Использование_переходов_для_подсвечивания_меню">Использование переходов для подсвечивания меню</h2>
+
+<p>Они часто используются для подсвечения элементов в меню при наведении мыши. С помощью переходов легко сделать такой эффект более привлекательным.</p>
+
+<p>Перед тем, как вы посмотрите на код, возможно захотите <a href="https://codepen.io/anon/pen/WOEpva">посмотреть на живое демо</a> (считаем, что ваш браузер поддерживает переходы). Также можеть <a href="/samples/cssref/transitions/sample2/transitions.css">посмотреть на CSS</a>, используемый этим примером.</p>
+
+<p>Сначала зададим меню в HTML:</p>
+
+<pre class="brush: html">&lt;div class="sidebar"&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Home&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;About&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Links&lt;/a&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Теперь напишем CSS для нашего меню:</p>
+
+<pre class="brush: css">.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  background-color:white;
+  color:black;
+  box-shadow: 2px 2px 1px black;
+}
+</pre>
+
+<p>Этот CSS устанавливает внешний вид меню, с фоном и цветом текста, изменяющимися при наведении ({{cssxref(":hover")}}).</p>
+
+<p>Вместо описания эффекта можете <a href="/samples/cssref/transitions/sample2">посмотреть на живой пример</a>, если ваш <a href="#Browser_compatibility">браузер поддерживает переходы</a>.</p>
+
+<h2 id="Использование_переходов_чтобы_сделать_JavaScript_функциональность_плавной">Использование переходов, чтобы сделать JavaScript функциональность плавной</h2>
+
+<p>Переходы - крутая вещь, чтоб сделать вид вещей плавней, без надобности что-то делать в вашей JS функциональности. Зацените следующий пример:</p>
+
+<pre class="brush: html">&lt;p&gt;Кликните куда-нибудь, чтобы подвинуть шар&lt;/p&gt;
+&lt;div id="foo"&gt;&lt;/div&gt;
+</pre>
+
+<p>Используя JavaScript, добиваемся эффекта перемещения шара на определенную позицию:</p>
+
+<pre class="brush: js">var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+</pre>
+
+<p>C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое измение свойств происходит плавно:</p>
+
+<pre class="brush: css">p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+</pre>
+
+<p>Можете поиграть с этим здесь: <a href="http://jsfiddle.net/9h261pzo/291/">http://jsfiddle.net/9h261pzo/291/</a></p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Transitions', '', '')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0 {{property_prefix("-webkit")}}<br>
+    26.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>10.5 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>3.2 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>Событие transitionend</code></td>
+   <td>1.0<sup>[1]</sup><br>
+    26.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.5<sup>[2]</sup><br>
+    12<br>
+    12.10</td>
+   <td>3.2<sup>[1]</sup><br>
+    6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>10</td>
+   <td>10 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>Событие transitionend</code></td>
+   <td>2.1<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>10</td>
+   <td>10<sup>[2]</sup><br>
+    12<br>
+    12.10</td>
+   <td>3.2<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестрандартное событие  <code>webkitTransitionEnd</code>. Chrome 26.0 и WebKit 6.0 придерживаются стандарта <code>transitionend</code>.</p>
+
+<p>[2] Opera 10.5 и Opera Mobile 10 поддерживают <code>oTransitionEnd</code>, версия 12 понимает <code>otransitionend, а</code> версия 12.10 знает стандарт <code>transitionend</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><span><a href="http://techstream.org/Web-Design/Dock-Menu-with-CSS3" title="CSS3 Dock Menu using CSS transitions">Нижнее меню</a> с использованием CSS переходов</span></li>
+ <li>Интерфейс {{domxref("TransitionEvent")}} и событие {{event("transitionend")}}.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Использование CSS анимаций</a></li>
+</ul>
diff --git a/files/ru/web/css/css_types/index.html b/files/ru/web/css/css_types/index.html
new file mode 100644
index 0000000000..47189715ea
--- /dev/null
+++ b/files/ru/web/css/css_types/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS basic data types
+slug: Web/CSS/CSS_Types
+translation_of: Web/CSS/CSS_Types
+---
+<div>{{CssRef}}</div>
+
+<p>Базовые типы данных в<strong> CSS </strong>определяют типичные значения (включая ключевые слова и единицы измерения), принимаемые CSS свойствами и функциями. Они являются частным случаем <a href="https://www.w3.org/TR/css3-values/#component-types">component value type</a>.</p>
+
+<p>В формальном синтаксисе типы данных обозначаются ключевыми словами, расположенными межу символами неравенства "&lt;" и"&gt;".</p>
+
+<h2 id="Справка">Справка</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;length&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+ <li>{{cssxref("&lt;ratio&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-box&gt;")}}</li>
+ <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Спецификация">Спецификация</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('CSS3 Values') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_user_interface/index.html b/files/ru/web/css/css_user_interface/index.html
new file mode 100644
index 0000000000..c5b0e1b0fe
--- /dev/null
+++ b/files/ru/web/css/css_user_interface/index.html
@@ -0,0 +1,118 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS User Interface</strong> is a CSS module that lets you define the rendering and functionality of features related to the user interface.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Preferences">Preferences</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-offset")}}</li>
+ <li>{{cssxref("resize")}}</li>
+ <li>{{cssxref("text-overflow")}}</li>
+ <li>{{cssxref("nav-down")}}</li>
+ <li>{{cssxref("nav-left")}}</li>
+ <li>{{cssxref("nav-right")}}</li>
+ <li>{{cssxref("nav-up")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property">Using URL values for the <code>cursor</code> property</a></dt>
+ <dd>Explains how a URL can be used with the {{cssxref("cursor")}} property to produce custom cursors.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.5 (1.8)</td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.2 (125)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.8)}}</td>
+   <td>8.0</td>
+   <td>6.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_writing_modes/index.html b/files/ru/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..050c25d5b0
--- /dev/null
+++ b/files/ru/web/css/css_writing_modes/index.html
@@ -0,0 +1,62 @@
+---
+title: Режимы письма CSS
+slug: Web/CSS/CSS_Writing_Modes
+tags:
+  - CSS
+  - Режимы письма
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Режимы письма CSS</strong> (CSS Writing Modes) - это CSS модуль, который определяет различные международные режимы письма, такие как:</p>
+
+<ul>
+ <li>слева направо (left-to-right), например, используется в латинском и индийском языках;</li>
+ <li>справа налево (right-to-left), например, используется в иврите или арабском языках;</li>
+ <li>двунаправленный (bidirectional), используется, когда смешиваются языки с письмом слева направо и справа налево;</li>
+ <li>вертикальный (vertical), например, используется в некоторых азиатских языках. </li>
+</ul>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<h3 id="Свойства">Свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("glyph-orientation-horizontal")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+</div>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Writing Modes')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_селекторы/index.html b/files/ru/web/css/css_селекторы/index.html
new file mode 100644
index 0000000000..8745681718
--- /dev/null
+++ b/files/ru/web/css/css_селекторы/index.html
@@ -0,0 +1,122 @@
+---
+title: CSS-селекторы
+slug: Web/CSS/CSS_Селекторы
+tags:
+  - CSS
+  - Обзор
+  - Селекторы
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Селектор </strong>определяет, к какому элементу применять то или иное CSS-правило.</p>
+
+<p>Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.</p>
+
+<h2 id="Базовые_селекторы">Базовые селекторы</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></dt>
+ <dd>Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.<br>
+ <strong>Синтаксис:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
+ <strong>Пример:</strong> <code>*</code> будет соответствовать всем элементам на странице.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Селекторы по типу элемента</a></dt>
+ <dd>Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.<br>
+ <strong>Синтаксис: </strong> <code><var>элемент</var></code><br>
+ <strong>Пример: </strong>селектор<strong> </strong><code>input</code> выберет все элементы {{HTMLElement('input')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Селекторы по классу</a></dt>
+ <dd>Этот базовый селектор выбирает элементы, основываясь на значении их атрибута <code>class</code>.<br>
+ <strong>Синтаксис: </strong> <code>.<em>имяКласса</em></code><br>
+ <strong>Пример: </strong>селектор<strong> </strong><code>.index</code> выберет все элементы с соответствующим классом (который был определен в атрибуте <code>class="index"</code>).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Селекторы по идентификатору</a></dt>
+ <dd>Этот базовый селектор выбирает элементы, основываясь на значении их <code>id</code> атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. <br>
+ <strong>Синтаксис: </strong> <code>#имяИдентификатора</code><br>
+ <strong>Пример: </strong>селектор <code>#toc</code> выберет элемент с идентификатором toc (который был определен в атрибуте <code>id="toc"</code>).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Селекторы по атрибуту</a></dt>
+ <dd>Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.<br>
+ <strong>Синтаксис:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
+ <strong>Пример: </strong>селектор <code>[autoplay]</code> выберет все элементы, у которых есть  атрибут <code>autoplay</code> (независимо от его значения).<br>
+ <strong>Ещё пример</strong>: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".<br>
+ <strong>Ещё пример</strong>: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".</dd>
+</dl>
+
+<h2 id="Комбинаторы">Комбинаторы</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Comma_combinator">Комбинатор запятая</a></dt>
+ <dd>Комбинатор <code>,</code> это способ группировки, он выбирает все совпадающие узлы.<br>
+ <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br>
+ <strong>Пример:</strong> <code>div, span</code> выберет оба элемента - и {{HTMLElement("div")}} и {{HTMLElement("span")}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Комбинатор потомков</a></dt>
+ <dd>Комбинатор <code>' '</code> (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).<br>
+ <strong>Синтаксис:</strong> <code>A B</code><br>
+ <strong>Пример: </strong>селектор <code>div span</code> выберет все элементы {{HTMLElement('span')}}, которые находятся внутри элемента {{HTMLElement('div')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Дочерние селекторы</a></dt>
+ <dd>Комбинатор <code>'&gt;'</code> в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.<br>
+ <strong>Синтаксис:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Пример: </strong>селектор<strong> </strong><code>ul &gt; li</code> выберет только дочерние элементы {{HTMLElement('li')}}, которые находятся внутри, на первом уровне вложенности по отношению к элементу {{HTMLElement('ul')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Комбинатор всех соседних элементов</a></dt>
+ <dd>Комбинатор <code>'~'</code> выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.<br>
+ <strong>Синтаксис:</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>Пример:</strong> <code>p ~ span</code> выберет все элементы {{HTMLElement('span')}}, которые находятся после элемента {{HTMLElement('p')}} внутри одного родителя.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Комбинатор следующего соседнего элемента</a></dt>
+ <dd>Комбинатор <code>'+'</code> выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.<br>
+ <strong>Синтаксис:</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>Пример: </strong>селектор <code>ul + li</code> выберет любой {{HTMLElement('li')}} элемент, который  находится непосредственно после элемента {{HTMLElement('ul')}}.</dd>
+</dl>
+
+<h2 id="Псевдо">Псевдо</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Псевдоклассы</a></dt>
+ <dd>Знак <code>:</code> позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.<br>
+ <strong>Пример: </strong><code>a:visited</code> соответствует всем элементам {{HTMLElement("a")}} которые имеют статус "посещённые".<br>
+ <strong>Ещё пример</strong>: <code>div:hover</code> соответствует элементу, над которым проходит указатель мыши.<br>
+ <strong>Ещё пример</strong>: <code>input:focus</code> соответствует полю ввода, которое получило фокус.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Псевдоэлементы</a></dt>
+ <dd>Знак <code>::</code> позволяет выбрать вещи, которых нет в HTML.<br>
+ <strong>Пример:</strong> <code>p::first-line</code> соответствует первой линии абзаца {{HTMLElement("p")}}.</dd>
+</dl>
+
+<h2 id="Версии_CSS">Версии CSS</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('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Добавление комбинатора колонок <code>||</code> , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Добавлен комбинатор <code>~</code> и древовидные структурные псевдоклассы.<br>
+    Сделаны псевдоэлементы, использующие префик <code>::</code> двойное двоеточие. Селекторы дополнительных атрибутов.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Добавлен комбинатор потомков <code>&gt;</code> и комбинатор следующего соседа <code>+</code> .<br>
+    Добавлен <strong>универсальный (*) </strong> комбинатор и <strong>селектор атрибутов.</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/Specificity">CSS специфичность</a></p>
diff --git a/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..f737d2cb6d
--- /dev/null
+++ b/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,62 @@
+---
+title: 'Использование псевдокласса :target в селекторах'
+slug: 'Web/CSS/CSS_Селекторы/Using_the_:target_pseudo-class_in_selectors'
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<div>{{CSSRef}}</div>
+
+<p>Иногда пользователям трудно заметить, что URL указывает на определённую часть документа.  Узнайте, как можно использовать простое CSS правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.</p>
+
+<h2 id="Picking_a_Target" name="Picking_a_Target">Выбор целевых элементов</h2>
+
+<p>Псевдокласс {{cssxref(":target")}} используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#example</span></code> содержит идентификатор фрагмента <code>#example</code>. В HTML, идентификаторы определяются значениями атрибутов  <code>id</code> или <code>name</code>, т.к. эти аттрибуты разделяют одно пространство имён. Таким образом,  в вышеприведённом примере URL указывает на первый элемент "example" в документе.</p>
+
+<p>Пердположим, вы хотите стилизовать любой элемент <code>h2</code>, который является целью URL, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:</p>
+
+<pre class="brush: css">h2:target { font-weight: bold; }</pre>
+
+<p>Также возможно создать стили, специфичные для определённого фрагмента документа. Это достигается использованием такого же идентификационного значения, как в URI. Таким образом, чтобы добавить рамку к фрагменту<code> #example</code> , напишем:</p>
+
+<pre class="brush: css">#example:target { border: 1px solid black; }</pre>
+
+<h2 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Отметка всех элементов, как целевых</h2>
+
+<p>Если вы намерены создать общий стиль, который будет применяться ко всем целевым элементам, то вам пригодится следующий универсальный селектор:</p>
+
+<pre class="brush: css">:target { color: red; }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что  <code>&lt;h1 id="one"&gt;</code> станет целевым элементом.  Заметьте, что при прокутке документа целевые элементы располагаются вверху окна браузера, если это возможно.</p>
+
+<div id="example">
+<pre class="brush: html">&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h2 id="Conclusion" name="Conclusion">Вывод</h2>
+
+<p>В некоторых случаях, когда идентификатор фрагмента указывает на часть документа, читатели могут запутаться в том, какую именно часть документа они читают. Стилизуя целевой элемент URI, такую путаницу читателей можно уменьшить или убрать вообще.</p>
+
+<h2 id="Related_Links" name="Related_Links">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":target")}}</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
diff --git a/files/ru/web/css/cursor/index.html b/files/ru/web/css/cursor/index.html
new file mode 100644
index 0000000000..9d9d3ea077
--- /dev/null
+++ b/files/ru/web/css/cursor/index.html
@@ -0,0 +1,299 @@
+---
+title: Курсор
+slug: Web/CSS/cursor
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>The <strong><code>cursor</code></strong> CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Применение ключевых значений */
+cursor: pointer;
+cursor: auto;
+
+/* Использование URL и координат */
+cursor:  url(cursor1.png) 4 12, auto;
+cursor:  url(cursor2.png) 2 2, pointer;
+
+/* Глобальные значения */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>&lt;<code>url</code>&gt;</dt>
+ <dd>Ссылка или разделенный запятыми список ссылок: <code>url(…), url(…), …</code>, указывающие на файл изображения. Дополнительные сссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) <strong>должно </strong>находиться в конце списка значений. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd>
+ <dt><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> {{experimental_inline}}</dt>
+ <dd>Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.</dd>
+ <dt>Ключевые слова</dt>
+ <dd>
+ <p><strong style="color: red;">Наведите курсор на картинку, чтобы увидеть пример в действии:</strong></p>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Категория</th>
+    <th style="width: 7.5em;">Значение</th>
+    <th>Вид</th>
+    <th>Описание</th>
+   </tr>
+   <tr style="cursor: auto;">
+    <td rowspan="3">Основные</td>
+    <td><code>auto</code></td>
+    <td></td>
+    <td>Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента, на который наведена мышь.<br>
+     Например: при наведении на текст отобразит курсор <code>text</code>.</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td>Основной курсор платформы, обычно стрелочка.</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td></td>
+    <td>Курсор не отображается.</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <td rowspan="5" style="cursor: auto;">Ссылки и статусы выполнения задач</td>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td>Доступно контекстное меню.</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td>Доступна вспомогательная информация.</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td>Указатель, обозначающий ссылку, обычно указующая рука.</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td>Программа занята, но пользователь может взаимодействовать с интерфейсом (в отличие от <code>wait</code>).</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td>Программа занята (песочные часы).</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <td rowspan="4" style="cursor: auto;">Выделение</td>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td>Указывает на возможность выбора клетки или клеток таблицы.</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td>Крестик, часто используемый для обозначения выбора на битовой карте.</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Значок выбора текста.</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Значок выбора вертикального текста.</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <td rowspan="5" style="cursor: auto;">"Захвати и перенеси"</td>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td>Будет создана ссылка внутри страницы.</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td>УКазывает на возможность копирования.</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td>
+     <p>Указывает на возможностсь перемещения объекта.</p>
+    </td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td>Указывает на невозможность "сбрасывания" объекта.<br>
+     В Windows и Mac OSX то же самое что и <code>not-allowed</code>.</td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td>Указатель невозможности выполнения действия.</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <td rowspan="15" style="cursor: auto;">Изменение размера, прокручивание (скроллинг)</td>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td>Указатель возможности перемещения по странице в любом направлении.<br>
+     в Windows то же самое что <code>move</code>.</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>Объект может быть раздвинут/сдвинут горизонтально. Обычно две вертикальные черты со стрелочками в разные стороны.</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>Обьект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками.</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td rowspan="8" style="cursor: auto;">Грань или грани могут быть перемещены. Например <code>se-resize</code> используется для обозначения перемещения с юго-востока. В некоторых системах то же самое что двунаправленное изменение.</td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td rowspan="4" style="cursor: auto;">Двунаправленное изменение размера.</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: zoom-in;">
+    <td rowspan="2">Масштабирование</td>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Приближение или уменьшение.</p>
+    </td>
+   </tr>
+   <tr style="cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+   <tr id="grab">
+    <td rowspan="2">Захват</td>
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Указывает на возможность схватить и переместить объект.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css">.foo {
+  cursor: crosshair;
+}
+
+/* use prefixed-value if "zoom-in" isn't supported */
+.bar {
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+}
+
+/* standard cursor value as fallback for url() <u>must</u> be provided (doesn't work without) */
+.baz {
+  cursor: url(hyper.cur), auto;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("css.properties.cursor")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li>
+ <li>{{cssxref("pointer-events")}}</li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li>
+</ul>
diff --git a/files/ru/web/css/custom-ident/index.html b/files/ru/web/css/custom-ident/index.html
new file mode 100644
index 0000000000..facafe5d39
--- /dev/null
+++ b/files/ru/web/css/custom-ident/index.html
@@ -0,0 +1,136 @@
+---
+title: <custom-ident>
+slug: Web/CSS/custom-ident
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Тип Данных
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+  - Разметка
+  - тип данных
+translation_of: Web/CSS/custom-ident
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <strong><code>&lt;custom-ident&gt;</code></strong> включает любые определённые пользователем строки, используемые в качестве {{glossary("identifier", "идентификатора")}}. Они чувствительны к регистру, некоторые значения запрещены в разных контекстах, чтобы избежать неоднозначности.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Синтаксис <code>&lt;custom-ident&gt;</code> похож на синтаксис CSS идентификаторов (таких, как названия свойств), за исключением того, что значения <code>&lt;custom-ident&gt;</code> чувствительны к регистру. Они состоят из одного или более следующих символов:</p>
+
+<ul>
+ <li>буквы латинского алфавита(от <code>A</code> до <code>Z</code>, от <code>a</code> до <code>z</code>),</li>
+ <li>десятеричные цифры (от <code>0</code> до <code>9</code>),</li>
+ <li>дефис (<code>-</code>),</li>
+ <li>нижнее подчёркивание (<code>_</code>),</li>
+ <li>экранированный символ (символ с бэкслэшем перед ним, <code>\</code>),</li>
+ <li>символ <a class="external" href="https://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4">Unicode</a> (бэкслэш, <code>\</code>, после которого идут от одной до шести шестнадцатеричных цифр, обозначающих кодовую точку этого символа в Unicode)</li>
+</ul>
+
+<p>Обратите внимание, что <code>id1</code>, <code>Id1</code>, <code>iD1</code> и <code>ID1</code> — это разные идентификаторы, поскольку они чувствительны к регистру. С другой стороны, так как существует несколько способов экранировать символ, <code>toto\?</code> и <code>toto\3F</code> — это один и тот же идентификатор.</p>
+
+<h3 id="Запрещённые_значения">Запрещённые значения</h3>
+
+<p><code>&lt;custom-ident&gt;</code> не может быть заключён в одинарные или двойные кавычки, потому что иначе он не был бы отличим от значения типа {{CSSxRef("&lt;string&gt;")}}. Более того, первый символ не должен быть цифрой или дефисом (<code>-</code>), если после него идёт ещё одна цифра или ещё один дефис.</p>
+
+<p>Чтобы избежать неоднозначности, каждое свойство, использующее тип <code>&lt;custom-ident&gt;</code>, запрещает использование некоторых значений:</p>
+
+<dl>
+ <dt>{{CSSxRef("animation-name")}}</dt>
+ <dt>{{CSSxRef("counter-reset")}}</dt>
+ <dt>{{CSSxRef("counter-increment")}}</dt>
+ <dd>Запрещают глобальные значения CSS (<code>unset</code>, <code>initial</code> и <code>inherit</code>), а также <code>none</code>.</dd>
+ <dt>{{CSSxRef("@counter-style")}}</dt>
+ <dt>{{CSSxRef("list-style-type")}}</dt>
+ <dd>Запрещает глобальные значения CSS (<code>unset</code>, <code>initial</code> и <code>inherit</code>), а также значения <code>none</code>, <code>inline</code> и <code>outside</code>. Также довольно много предопределённых значений используются в разных браузерах: <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code>, and <code>disclosure-close</code>.</dd>
+ <dt>{{CSSxRef("grid-row-start")}}<br>
+ {{CSSxRef("grid-row-end")}}<br>
+ {{CSSxRef("grid-column-start")}}<br>
+ {{CSSxRef("grid-column-end")}}</dt>
+ <dd>Запрещают значение <code>span</code>.</dd>
+ <dt>{{CSSxRef("will-change")}}</dt>
+ <dd>Запрещают глобальные значения CSS (<code>unset</code>, <code>initial</code> и <code>inherit</code>), а так же значения <code>will-change</code>, <code>auto</code>, <code>scroll-position</code> и <code>contents</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Действительные_идентификаторы">Действительные идентификаторы</h3>
+
+<pre class="notranslate">nono79            Состоит из букв и цифр
+ground-level      Состоит из букв, цифр и дефиса
+-test             Буквы, следующие за одним дефисом
+_internal         Буквы, следующие за нижним подчёркиванием
+\22 toto          Буквы, следующие за символом Unicode
+bili\.bob         Буквы и экранированная точка
+</pre>
+
+<h3 id="Недействительные_идентификаторы">Недействительные идентификаторы</h3>
+
+<pre class="example-bad notranslate">34rem             Не может начинаться с цифры
+-12rad            Не может начинаться с дефиса, за которым следует цифра
+bili.bob          Только буквы, цифры, _ и - можно не экранириовать
+--toto            Не может начинаться с двух дефисов подряд
+'bilibob'         Это тип &lt;string&gt;.
+"bilibob"         Это тип &lt;string&gt;.</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> for <code>will-change</code>')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>Определяет, какие значения запрещены в {{CSSxRef("will-change")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> for <code>list-style-type</code>')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Начинает использовать <code>&lt;custom-ident&gt;</code> вместо конечного списка ключевых слов. Определяет, какие значения запрещены в {{CSSxRef("list-style-type")}} и {{CSSxRef("@counter-style")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> for <code>counter-*</code>')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Переименовывает <code>&lt;identifier&gt;</code> в <code>&lt;custom-ident&gt;</code>. Добавляет возможность его использовать в свойстве <code>counter-set</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> for <code>animation-name</code>')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Определяет запрещённые значения для {{CSSxRef("animation-name")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Переименовывает <code>&lt;identifier&gt;</code> в <code>&lt;custom-ident&gt;</code>. Делает его псевдо-типом и запрещает использование некоторых значчений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p><em>As this type is not a real type but a convenience type used to simplify the description of allowed values, there is no browser compatibility information as such.</em></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;ident&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/descendant_combinator/index.html b/files/ru/web/css/descendant_combinator/index.html
new file mode 100644
index 0000000000..4498ab146b
--- /dev/null
+++ b/files/ru/web/css/descendant_combinator/index.html
@@ -0,0 +1,115 @@
+---
+title: Селектор потомков
+slug: Web/CSS/Descendant_combinator
+translation_of: Web/CSS/Descendant_combinator
+---
+<p><span class="s1">{{CSSRef("Selectors")}}</span></p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Комбинатор<code> ␣</code> (пробел) представляет собой 2 или более селекторов, найдет элементы соответвующие обоим селекторам. Селекторы по потомкам похожи на селекторы <a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a>, но они не учитывают вложенность элементов и пременяют свои свойства ко всем элемнтам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">selector1 selector2 {<em>стили</em> }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">span { background-color: white; }
+div span { background-color: DodgerBlue; }
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span 1
+    &lt;span&gt;Span 2&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span 3&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 50) }}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#descendant-combinators', 'descendant combinator') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#contextual-selectors', 'contextual selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/direction/index.html b/files/ru/web/css/direction/index.html
new file mode 100644
index 0000000000..b76f8a3824
--- /dev/null
+++ b/files/ru/web/css/direction/index.html
@@ -0,0 +1,99 @@
+---
+title: direction
+slug: Web/CSS/direction
+translation_of: Web/CSS/direction
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>direction</code></strong> CSS property sets the direction of text, table columns, and horizontal overflow.</span> Use <code>rtl</code> for languages written from right to left (like Hebrew or Arabic), and <code>ltr</code> for those written from left to right (like English and most other languages).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/direction.html")}}</div>
+
+
+
+<p>Заметьте, что направление текста обычно задано в документе (т.е. с помощью <a href="/en-US/docs/Web/HTML/Global_attributes/dir">HTML's <code>dir</code> attribute</a>), а не посредством прямого использования свойства <code>direction</code>.</p>
+
+<p>The property sets the base text direction of block-level elements and the direction of embeddings created by the {{Cssxref("unicode-bidi")}} property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.</p>
+
+<p>Unlike the <code>dir</code> attribute in HTML, the <code>direction</code> property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.</p>
+
+<p>The <code>direction</code> and {{cssxref("unicode-bidi")}} properties are the two only properties which are not affected by the {{cssxref("all")}} shorthand property.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+direction: ltr;
+direction: rtl;
+
+/* Global values */
+direction: inherit;
+direction: initial;
+direction: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>Text and other elements go from left to right. This is the default value.</dd>
+ <dt><code>rtl</code></dt>
+ <dd>Text and other elements go from right to left.</dd>
+</dl>
+
+<p>For the <code>direction</code> property to have any effect on inline-level elements, the {{Cssxref("unicode-bidi")}} property's value must be <code>embed</code> or <code>override</code>.</p>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Setting_right-to-left_direction">Setting right-to-left direction</h3>
+
+<pre class="brush: css notranslate">blockquote {
+  direction: rtl;
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.direction")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Cssxref("unicode-bidi")}}</li>
+ <li>{{Cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/display-listitem/index.html b/files/ru/web/css/display-listitem/index.html
new file mode 100644
index 0000000000..4eee12345e
--- /dev/null
+++ b/files/ru/web/css/display-listitem/index.html
@@ -0,0 +1,52 @@
+---
+title: <display-listitem>
+slug: Web/CSS/display-listitem
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Display
+  - Reference
+  - list-item
+  - Справка
+translation_of: Web/CSS/display-listitem
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Ключевое слово <code>list-item</code> приводит к тому, что элемент генерирует <code>::marker</code> псевдо-элемент с определяемыми {{cssxref("list-style")}} свойствами (например, маркерной точкой) вместе с основным блоком указанного типа для его  содержимого.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Единственное значение <code> list-item  приведет к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с {{CSSxRef("list-style-type")}} и {{CSSxRef("list-style-position")}}.</code></p>
+
+<div class="note">
+<p><code><strong>Примечание</strong>:В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию оно будет </code>flow<code>. Если внешнее значение не указано, основной блок будет иметь внешний вид отображения (</code>outer display type<code>) <code>block</code>.</code></p>
+</div>
+
+<h2 id="Пример"><code>Пример</code></h2>
+
+<h3 id="HTML"><code>HTML</code></h3>
+
+<pre class="brush: html"><code>
+&lt;div class="fake-list"&gt;I will display as a list item&lt;/div&gt;
+</code></pre>
+
+<h3 id="CSS"><code>CSS</code></h3>
+
+<pre class="brush: css"><code>
+.fake-list {
+  display: list-item;
+  list-style-position: inside;
+}
+</code></pre>
+
+<h3 id="Результат"><code>Результат</code></h3>
+
+<p><code>{{EmbedLiveSample("Example", "100%", 150)}}</code></p>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<h3 id="Поддержка_list-item"><code>Поддержка <code>list-item</code></code></h3>
+
+<p>{{Compat("css.properties.display.list-item", 10)}}</p>
diff --git a/files/ru/web/css/display-outside/index.html b/files/ru/web/css/display-outside/index.html
new file mode 100644
index 0000000000..60ee3de15e
--- /dev/null
+++ b/files/ru/web/css/display-outside/index.html
@@ -0,0 +1,75 @@
+---
+title: <display-outside>
+slug: Web/CSS/display-outside
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Display
+  - Reference
+  - display-outside
+  - Справка
+translation_of: Web/CSS/display-outside
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Ключевые слова <code>&lt;display-outside&gt;</code>  определяют внешний тип отображения элемента (outer {{CSSxRef("display")}} type), который играет существенную роль в схеме потока. Эти ключевые слова используются как значения свойства <code>display</code> и могут быть использованы в целях преемственности как единственное ключевое слово или, как определено в рамках спецификации Level 3, наряду со значением из  {{CSSxRef("&lt;display-inside&gt;")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Значение <code>&lt;display-outside&gt;</code> определяется с использованием ключевого слова из списка ниже:</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>block</code></dt>
+ <dd>Элемент генерирует бокс элемента, создавая разрывы линий, как перед, так и после элемента, при условии нормального потока.</dd>
+ <dt><code>inline</code></dt>
+ <dd>Элемент создает один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.</dd>
+ <dt><code>run-in</code> {{Experimental_Inline}}</dt>
+ <dd>Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определен как <code>display: run-in, тогда</code>  бокс является блоковым боксом, <code>run-in</code> бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним. <br>
+ <br>
+ Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Замечание</strong>: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении <code> display: block </code> или <code>display: inline,</code>  установят внутреннее значение как <code>flow</code>.  Это приведет к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем примере элементы span (обычно отображаемые как строковые элементы) устанавливаются в <code> display: block  и поэтому разбиваются на новые строки и расширяются, чтобы заполнить их контейнер в строковом измерении.</code></p>
+
+<h3 id="HTML"><code>HTML</code></h3>
+
+<pre class="brush: html"><code>
+&lt;span&gt;span 1&lt;/span&gt;
+&lt;span&gt;span 2&lt;/span&gt;</code></pre>
+
+<h3 id="CSS"><code>CSS</code></h3>
+
+<pre class="brush: css"><code>
+span {
+    display: block;
+    border: 1px solid rebeccapurple;
+}</code></pre>
+
+<h3 id="Result"><code>Result</code></h3>
+
+<p><code>{{EmbedLiveSample("Example", 300, 60)}}</code></p>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<h3 id="Support_of_run-in"><code>Support of <code>run-in</code></code></h3>
+
+<p><code>{{Compat("css.properties.display.run-in", 10)}}</code></p>
+
+<h2 id="Смотрите_также"><code>Смотрите также</code></h2>
+
+<ul>
+ <li><code>{{CSSxRef("display")}}</code></li>
+ <li><code>{{CSSxRef("&lt;display-inside&gt;")}}</code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline layout in Normal Flow</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a> </code></li>
+</ul>
diff --git a/files/ru/web/css/display/index.html b/files/ru/web/css/display/index.html
new file mode 100644
index 0000000000..3c40e975d0
--- /dev/null
+++ b/files/ru/web/css/display/index.html
@@ -0,0 +1,218 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - CSS Display
+  - CSS Property
+  - Reference
+  - display
+  - Справка
+translation_of: Web/CSS/display
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Свойство <strong><code>display</code></strong> (<a href="/ru/docs/Web/CSS">CSS</a>) определяет <dfn><em>тип отображения (display type)</em> элемента</dfn>, имеющий два основных свойства, определяющих генерацию боксов — <strong>внешний тип отображения</strong> определяет расположение бокса в <a href="/ru/docs/Web/CSS/CSS_Flow_Layout">схеме потока (flow layout)</a> и <strong>внутренний тип отображения</strong> определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).</p>
+
+<p>Некоторые значения свойства <code>display</code> полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведен ниже.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;display-outside&gt; values */
+display: block;
+display: inline;
+display: run-in;
+
+/* &lt;display-inside&gt; values */
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+
+/* &lt;display-outside&gt; plus &lt;display-inside&gt; values */
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/* &lt;display-listitem&gt; values */
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/* &lt;display-internal&gt; values */
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/* &lt;display-box&gt; values */
+display: contents;
+display: none;
+
+/* &lt;display-legacy&gt; values */
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/* Global values */
+display: inherit;
+display: initial;
+display: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>display</code> задается с помощью ключевых слов. Ключевые слова группируются по шести категориям:</p>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
+ <dd>Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.</dd>
+ <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
+ <dd>Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).</dd>
+ <dt>{{CSSxRef("&lt;display-listitem&gt;")}}</dt>
+ <dd>Создает блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.</dd>
+ <dt>{{CSSxRef("&lt;display-internal&gt;")}}</dt>
+ <dd>Некоторые модели разметки, такие как <code><span class="css">table</span></code> и <code>ruby,</code> имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.</dd>
+ <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
+ <dd>Эти значения определяют, генерирует ли элемент отображение боксов вообще.</dd>
+ <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
+ <dd>В CSS 2 используется синтаксис с одним ключевым словом для свойства <code>display</code>, для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.</dd>
+ <dt><code><a href="/ru/docs/Mozilla/Gecko/Chrome/CSS/display-xul">&lt;display-xul&gt;</a></code> {{Non-standard_Inline}}{{Deprecated_Inline(62)}}</dt>
+ <dd>Значения, используемые только в Firefox, в основном, для стилизации. <a href="/ru/docs/Mozilla/Tech/XUL">XUL documents</a>.</dd>
+</dl>
+
+<h3 id="Наследственные_значения_отображения">"Наследственные" значения отображения</h3>
+
+<p>Спецификация уровня 3 подразумевает два значения для свойства <code>display</code> — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.</p>
+
+<p>Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:</p>
+
+<pre class="brush: css">.container {
+    display: inline flex;
+}</pre>
+
+<p><span id="result_box" lang="ru"><span>В настоящее время это можно задать с помощью одного значения</span></span>.</p>
+
+<pre class="brush: css">.container {
+    display: inline-flex;
+}
+</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В разделе {{anch("Syntax")}} содержатся несколько примеров для разных типов значений <code>display</code>, которые это свойство может принимать.</p>
+
+<p>Кроме того, вы можете найти подробные объяснения способов разметки для определенных значений <code>display</code> в других статьях на MDN:</p>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">Разметка CSS Grid </a></li>
+ <li><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Разметка CSS Flexible box</a></li>
+ <li><a href="/ru/docs/Learn/CSS/CSS_layout">Разметка CSS</a> (Модуль обучения для начинающих)</li>
+</ul>
+
+<h2 id="Доступность">Доступность</h2>
+
+<h3 id="display_none"><code>display: none;</code></h3>
+
+<p>Если свойство <code>display</code> принимает значение <code>none</code> на элементе,  то элемент удаляется из <a href="/ru/docs/Learn/Доступность/What_is_accessibility">дерева доступности</a>. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.</p>
+
+<p>Если вы хотите визуально скрыть элемент, более доступной альтернативой является использование <a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">комбинации свойств</a> для визуального удаления изображения с экрана, но это сохраняет его для синтаксического анализа с помощью вспомогательных технологий, таких как считыватели экрана.</p>
+
+<h3 id="display_contents"><code>display: contents;</code></h3>
+
+<p>Браузеры удаляют любой элемент со свойством <code>display,</code> имеющим значение <code>contents</code> из  <a href="/ru/docs/Learn/Доступность/What_is_accessibility">дерева доступности</a>. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. <span id="result_box" lang="ru"><span>Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM</span></span>.</p>
+
+<ul>
+ <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
+ <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li>
+</ul>
+
+<h3 id="Таблицы">Таблицы</h3>
+
+<p>Если у элемента {{HTMLElement("table")}} изменить значение свойства <code>display на </code><code>block</code>, <code>grid</code> или <code>flex, это изменит</code> его представление в  <a href="/ru/docs/Learn/Доступность/What_is_accessibility">дереве доступности</a>. Это приводит к тому, что таблица<span id="result_box" lang="ru"><span> не будет объявлена должным образом с помощью технологии чтения экрана.</span></span></p>
+
+<ul>
+ <li><a class="external" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li>
+ <li><a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации" name="Спецификации">Спецификации</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('CSS3 Display', '#the-display-properties', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td>Добавлены <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code> и multi-keyword значения.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Добавлены <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code> и <code>ruby-text-container</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>Добавлены значения модели grid бокс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Добавлены значения модели flexible бокс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Добавлены значения модели table и <code>inline-block<em>.</em></code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Начальное определение. Базовые значения: <code>none</code>, <code>block</code>, <code>inline</code> и <code>list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.properties.display", 10)}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Блоковая и Inline разметка нормальном потоке</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting contexts explained</a></li>
+ <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li>
+ <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li>
+</ul>
diff --git a/files/ru/web/css/filter-function/blur()/index.html b/files/ru/web/css/filter-function/blur()/index.html
new file mode 100644
index 0000000000..c2df200b45
--- /dev/null
+++ b/files/ru/web/css/filter-function/blur()/index.html
@@ -0,0 +1,44 @@
+---
+title: blur()
+slug: Web/CSS/filter-function/blur()
+translation_of: Web/CSS/filter-function/blur()
+---
+<div>{{cssref}}</div>
+
+<p>Функция <a href="/ru/docs/Web/CSS">CSS</a> <strong><code>blur()</code></strong> применяет <a href="https://ru.wikipedia.org/wiki/%D0%A4%D0%B8%D0%BB%D1%8C%D1%82%D1%80_%D0%93%D0%B0%D1%83%D1%81%D1%81%D0%B0">размытие по Гауссу</a> к входному изображению. Его результатом является {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">blur(<em>radius</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>radius</code></dt>
+ <dd>Радиус размытия, выраженный в {{cssxref("&lt;length&gt;")}}. Он определяет отклонение от стандартной функции Гаусса, то есть как много пикселей на экране смешиваются друг с другом. Таким образом, большее значение даст большее размытие. Значение <code>0</code> оставит изображение без изменений.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css">blur(0)        /* Без эффекта */
+blur(8px)      /* Размытие с радиусом 8px */
+blur(1.17rem)  /* Размытие с радиусом 1.17rem */</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ru/web/css/filter-function/index.html b/files/ru/web/css/filter-function/index.html
new file mode 100644
index 0000000000..abfdfa7ae5
--- /dev/null
+++ b/files/ru/web/css/filter-function/index.html
@@ -0,0 +1,62 @@
+---
+title: <filter-function>
+slug: Web/CSS/filter-function
+tags:
+  - фильтры
+translation_of: Web/CSS/filter-function
+---
+<div>{{cssref}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>&lt;filter-function&gt;</strong></code> представляет собой графический эффект, который может изменить внешний вид входного изображения. Он используется в свойствах {{cssxref("filter")}} и {{cssxref("backdrop-filter")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;filter-function&gt;</code> указывается с использованием одной из функций, указанных ниже. Каждая функция требует аргумент, который, если он неверен, не приводит к применению фильтра.</p>
+
+<dl>
+ <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
+ <dd>Применяет эффект размытия к изображению.</dd>
+ <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
+ <dd>Делает изображение ярче или темнее.</dd>
+ <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
+ <dd>Увеличивает или уменьшает контрастность изображения.</dd>
+ <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
+ <dd>Применяет к изображению тень.</dd>
+ <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
+ <dd>Преобразует изображение к тонам серого.</dd>
+ <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​</dt>
+ <dd>Изменяет оттенок изображения за счёт поворота на цветовом круге.</dd>
+ <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
+ <dd>Инвертирует цвета изображения.</dd>
+ <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
+ <dd>Изменяет прозрачность изображения.</dd>
+ <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
+ <dd>Изменяет насыщенность цветов изображения.</dd>
+ <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
+ <dd>Преобразует изображение в сепию.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</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('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойства, которые используют этот тип данных: {{cssxref("filter")}} и {{cssxref("backdrop-filter")}}</li>
+</ul>
diff --git a/files/ru/web/css/filter-function/url/index.html b/files/ru/web/css/filter-function/url/index.html
new file mode 100644
index 0000000000..3a943810ef
--- /dev/null
+++ b/files/ru/web/css/filter-function/url/index.html
@@ -0,0 +1,34 @@
+---
+title: url()
+slug: Web/CSS/filter-function/url
+tags:
+  - CSS
+  - Начинающий
+  - Ссылка
+  - Функция
+translation_of: Web/CSS/url()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>url()</code></strong> - это <a href="/en-US/docs/Web/CSS">CSS</a> функция, использующая <a href="/en-US/docs/Web/SVG/Element/filter">SVG filter</a> для измения внешнего вида у выводимого изображения.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">url(<em>расположение</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>расположение</code></dt>
+ <dd>В {{cssxref("&lt;URL-адрес&gt;")}} из {{glossary("XML")}} указывается файл, который задает фильтр SVG, а также может включать в себя привязки к конкретному фильтрующему элементу.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css">url(resources.svg#c1)</pre>
+
+<h2 id="Изучите_также">Изучите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/CSS/filter-function">{{cssxref("&lt;filter-function&gt;")}}</a></li>
+</ul>
diff --git a/files/ru/web/css/filter/index.html b/files/ru/web/css/filter/index.html
new file mode 100644
index 0000000000..ba55a20e4a
--- /dev/null
+++ b/files/ru/web/css/filter/index.html
@@ -0,0 +1,1124 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - CSS
+  - SVG
+  - SVG фильтр
+  - filter
+  - Свойство CSS
+  - Ссылка
+translation_of: Web/CSS/filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>filter</code></strong>  позволяет Вам применять к элементу такие графические эффекты, как размытие и смещение цвета. Фильтры обычно используются для регулировки рендеринга изображений, фонов и рамок.</p>
+
+<p>В стандарт CSS включены несколько функций, которые обеспечивают предопределенные эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на <a href="/en-US/docs/Web/SVG/Element/filter">элемент фильтра SVG</a>.</p>
+
+<div class="note"><strong>Предупреждение:</strong> Старые версии (с 4.0 до 9.0) браузера Windows Internet Explorer поддерживают нестандартный <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a>, который с тех пор устарел.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">filter: url(resources.svg);
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* Применение нескольких фильтров */
+filter: contrast(175%) brightness(3%);
+
+/* Глобальные значения */
+filter: inherit;
+filter: initial;
+filter: unset;
+</pre>
+
+<p>С помощью функции, используйте:</p>
+
+<pre class="syntaxbox">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
+</pre>
+
+<p>Для ссылки на SVG {{SVGElement("filter")}} элемент, используйте:</p>
+
+<pre class="syntaxbox">filter: url(svg-url#element-id)
+</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Примеры использования предопределённых функций показаны ниже. См. каждую функцию для конкретного примера.</p>
+
+<pre class="brush: css">.mydiv { filter: grayscale(50%) }
+
+/* сделать все изображения серыми на 50% и размыть на 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}</pre>
+
+<p>Примеры использования функции URL с SVG ресурсом показаны ниже.</p>
+
+<pre class="brush: css">.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+</pre>
+
+<h2 id="Функции">Функции</h2>
+
+<p>Для использования CSS свойства <code>filter</code>, Вы указываете значение для одной из выбранных функций. Если это значение недействительно, функция возвращает "none." За исключением тех случаев, когда функции, которые принимают значение, выраженное в процентах (34%), также принимают значение, выраженное как десятичная дробь (0.34).</p>
+
+<h3 id="url"><code>url()</code></h3>
+
+<p>The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.</p>
+
+<pre class="brush: css">filter: url(resources.svg#c1)
+</pre>
+
+<h3 id="blur_размытие"><code>blur() [размытие]</code></h3>
+
+<p>Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value <code>0</code> is used. The parameter is specified as a CSS length, but does not accept percentage values.</p>
+
+<pre class="brush: css">filter: blur(5px)
+</pre>
+
+<div id="blur_example" style="display: none;">
+<pre class="brush: html">  &lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg id="img3" viewbox="0 0 233 176"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:blur(5px);
+  -webkit-filter:blur(5px);
+  -o-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p>
+
+<h3 id="brightness_яркость"><code>brightness() [яркость]</code></h3>
+
+<p>Applies a linear multiplier to input image, making it appear more or less bright. A value of <code>0%</code> will create an image that is completely black. A value of <code>100%</code> leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over <code>100%</code> are allowed, providing brighter results. If the ‘amount’ parameter is missing, a value of <code>1</code> is used.</p>
+
+<pre class="brush: css">filter: brightness(0.5)</pre>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="[amount]"/&gt;
+        &lt;feFuncG type="linear" slope="[amount]"/&gt;
+        &lt;feFuncB type="linear" slope="[amount]"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="brightness_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="2"/&gt;
+        &lt;feFuncG type="linear" slope="2"/&gt;
+        &lt;feFuncB type="linear" slope="2"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -o-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p>
+
+<h3 id="contrast_контраст"><code>contrast() [контраст]</code></h3>
+
+<p>Adjusts the contrast of the input. A value of <code>0%</code> will create an image that is completely black. A value of <code>100%</code> leaves the input unchanged. Values of amount over <code>100%</code> are allowed, providing results with less contrast. If the ‘amount’ parameter is missing, a value of <code>1</code> is used.</p>
+
+<pre class="brush: css">filter: contrast(200%)
+</pre>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="contrast_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"&gt;
+ &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -o-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p>
+
+<h3 id="drop-shadow_тень"><code>drop-shadow() [тень]</code></h3>
+
+<p>Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type &lt;shadow&gt; (defined in CSS3 Backgrounds), with the exception that the ‘inset’ keyword is not allowed. This function is similar to the more established {{cssxref("box-shadow")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <code>&lt;shadow&gt;</code> parameter are as follows.</p>
+
+<dl>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(required)</small></dt>
+ <dd>These are two {{cssxref("&lt;length&gt;")}} values to set the shadow offset. <code>&lt;offset-x&gt;</code> specifies the horizontal distance. Negative values place the shadow to the left of the element. <code>&lt;offset-y&gt;</code> specifies the vertical distance. Negative values place the shadow above the element. See {{cssxref("&lt;length&gt;")}} for possible units.<br>
+ If both values are <code>0</code>, the shadow is placed behind the element (and may generate a blur effect if <code>&lt;blur-radius&gt;</code> and/or <code>&lt;spread-radius&gt;</code> is set).</dd>
+ <dt><code>&lt;blur-radius&gt;</code> <small>(optional)</small></dt>
+ <dd>This is a third {{cssxref("&lt;length&gt;")}} value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be <code>0</code> (the shadow's edge is sharp).</dd>
+ <dt><code>&lt;spread-radius&gt;</code> <small>(optional)</small></dt>
+ <dd>This is a fourth {{cssxref("&lt;length&gt;")}} value. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be <code>0</code> (the shadow will be the same size as the element). <br>
+ Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.</dd>
+ <dt><code>&lt;color&gt;</code> <small>(optional)</small></dt>
+ <dd>See {{cssxref("&lt;color&gt;")}} values for possible keywords and notations. If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the {{cssxref("color")}} property is used. On the other hand, WebKit's shadow is transparent and therefore useless if <code>&lt;color&gt;</code> is omitted.</dd>
+</dl>
+
+<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
+    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
+    &lt;feFlood flood-color="[color]"/&gt;
+    &lt;feComposite in2="offsetblur" operator="in"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="shadow_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"/&gt;
+    &lt;feOffset dx="16" dy="16"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"&gt;
+            &lt;filter id="drop-shadow2"&gt;
+              &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4"/&gt;
+              &lt;feOffset dx="8" dy="10"/&gt;
+              &lt;feMerge&gt;
+                &lt;feMergeNode/&gt;
+                &lt;feMergeNode in="SourceGraphic"/&gt;
+              &lt;/feMerge&gt;
+            &lt;/filter&gt;
+            &lt;image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /&gt;</span>
+          &lt;/svg&gt;
+        &lt;div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -o-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+#img12 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+#irregular-shape {
+  width: 64%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3, #img13 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p>
+
+<h3 id="grayscale_оттенки_серого"><code>grayscale() [оттенки серого]</code></h3>
+
+<p>Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of <code>100%</code> is completely grayscale. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of <code>0</code> is used.</p>
+
+<pre class="brush: css">filter: grayscale(100%)</pre>
+
+<div id="grayscale_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"&gt;
+ &lt;filter id="grayscale"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -o-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p>
+
+<h3 id="hue-rotate_изменение_оттенка"><code>hue-rotate() [изменение оттенка]</code></h3>
+
+<p>Applies a hue rotation on the input image. The value of ‘<code class="property">angle</code>’ defines the number of degrees around the color circle the input samples will be adjusted. A value of <code>0deg </code>leaves the input unchanged. If the ‘<code class="property">angle</code>’ parameter is missing, a value of <code>0deg</code> is used. Though there is no maximum value, the effect of values above <code>360deg</code> wraps around.</p>
+
+<pre class="brush: css">filter: hue-rotate(90deg)</pre>
+
+<div id="huerotate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"&gt;
+ &lt;filter id="hue-rotate"&gt;
+    &lt;feColorMatrix type="hueRotate"
+               values="90"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -o-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgHueRotate" &gt;
+    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
+  &lt;filter /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p>
+
+<h3 id="invert_инвертирование"><code>invert() [инвертирование]</code></h3>
+
+<p>Inverts the samples in the input image. The value of ‘<code class="property">amount</code>’ defines the proportion of the conversion. A value of <code>100%</code> is completely inverted. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. If the ‘<code class="property">amount</code>’ parameter is missing, a value of <code>0</code> is used.</p>
+
+<pre class="brush: css">filter: invert(100%)</pre>
+
+<div id="invert_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"&gt;
+ &lt;filter id="invert"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="1 0"/&gt;
+        &lt;feFuncG type="table" tableValues="1 0"/&gt;
+        &lt;feFuncB type="table" tableValues="1 0"/&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -o-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p>
+
+<h3 id="opacity_непрозрачность"><code>opacity() [непрозрачность]</code></h3>
+
+<p>Applies transparency to the samples in the input image. The value of ‘<code class="property">amount</code>’ defines the proportion of the conversion. A value of <code>0%</code> is completely transparent. A value of <code>100%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the ‘<code class="property">amount</code>’ parameter is missing, a value of <code>1</code> is used. This function is similar to the more established {{Cssxref("opacity")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance.</p>
+
+<pre class="brush: css">filter: opacity(50%)</pre>
+
+<div id="opacity_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"&gt;
+ &lt;filter id="opacity"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -o-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p>
+
+<h3 id="saturate_насыщенность"><code>saturate() [насыщенность]</code></h3>
+
+<p>Saturates the input image. The value of ‘<code class="property">amount</code>’ defines the proportion of the conversion. A value of <code>0%</code> is completely un-saturated. A value of <code>100%</code> leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over <code>100%</code> are allowed, providing super-saturated results. If the ‘<code class="property">amount</code>’ parameter is missing, a value of <code>1</code> is used.</p>
+
+<pre class="brush: css">filter: saturate(200%)</pre>
+
+<div id="saturate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"&gt;
+ &lt;filter id="saturate"&gt;
+    &lt;feColorMatrix type="saturate"
+               values="2"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -o-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p>
+
+<h3 id="sepia_сепия"><code>sepia() [сепия]</code></h3>
+
+<p>Converts the input image to sepia. The value of ‘<code class="property">amount</code>’ defines the proportion of the conversion. A value of 100% is completely sepia. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. If the ‘<code class="property">amount</code>’ parameter is missing, a value of <code>0</code> is used.</p>
+
+<pre class="brush: css">filter: sepia(100%)</pre>
+
+<div id="sepia_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"&gt;
+ &lt;filter id="sepia"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -o-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p>
+
+<h2 id="Комбинирование_функций">Комбинирование функций</h2>
+
+<p>You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image.</p>
+
+<pre class="brush: css">filter: contrast(175%) brightness(103%)</pre>
+
+<div id="combination_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -o-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p>
+
+<h2 id="Спецификации">Спецификации</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('Filters 1.0', '#FilterProperty', 'filter') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li>
+ <li>The {{Cssxref("mask")}} property</li>
+ <li><a class="internal" href="/en-US/docs/Web/SVG">SVG</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li>
+ <li><a class="external" href="http://techstream.org/Web-Design/CSS3-Image-Filters">CSS 3 filters</a> Tech Stream article</li>
+ <li><a class="external" href="http://davidwalsh.name/css-filters">CSS filters</a> By David Walsh</li>
+</ul>
diff --git a/files/ru/web/css/flex-basis/index.html b/files/ru/web/css/flex-basis/index.html
new file mode 100644
index 0000000000..ab77e783d5
--- /dev/null
+++ b/files/ru/web/css/flex-basis/index.html
@@ -0,0 +1,224 @@
+---
+title: flex-basis
+slug: Web/CSS/flex-basis
+translation_of: Web/CSS/flex-basis
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>flex-basis</code></strong> задает базовый размер флекс элемента по <strong>основной оси</strong>. Это свойство определяет размер контент-бокса, если не задано иначе через {{Cssxref("box-sizing")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>Внимание:</strong> в случае, если для элемента одновременно заданы <code>flex-basis</code> (отличное от <code>auto</code>) и <code>width</code> ( или <code>height</code> в случае <code>flex-direction: column</code>), <code>flex-basis</code> имеет приоритет.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+
+
+<pre class="brush:css no-line-numbers">/* Устанавливает &lt;'ширину'&gt; */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* Intrinsic sizing keywords */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* Автоматически изменяет размер на основе содержимого элемента */
+flex-basis: content;
+
+/* Глобальное значения */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+</pre>
+
+
+
+<p>Свойство <code>flex-basis</code> задается через ключевое слово <code><a href="#content">content</a></code> или через <code><a href="#&lt;'width'>">&lt;'width'&gt;</a></code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><a id="&lt;'width'>" name="&lt;'width'>"><code>&lt;'ширина'&gt;</code></a></dt>
+ <dd>An absolute {{cssxref("&lt;length&gt;")}}, a {{cssxref("&lt;percentage&gt;")}} родительского flex контейнера главное size свойство, или ключевое слово <code>auto</code>. Негативные значения не допустимы.</dd>
+ <dt><a id="content" name="content"><code>content</code></a></dt>
+ <dd>Автоматический задает размер на основе содержимого элемента flex.</dd>
+ <dd>
+ <div class="note"><strong>Заметка:</strong> Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя <code>auto</code> вместе с основным размером (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> или <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) <code>auto</code>.</div>
+
+ <div class="note">
+ <p id="comment_text_0"><strong>История:</strong></p>
+
+ <ul>
+  <li>Первоначально, <code>flex-basis:auto</code> означает "смотреть на значения <code>width</code> или <code>height</code>".</li>
+  <li>Затем <code>flex-basis:auto</code> был изменен на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения <code>width</code> или <code>height</code>".  Это было реализован в  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>баге 1032922</a>.</li>
+  <li>Затем в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>баге 1093316</a> это было возвращено обратно, поэтому <code>auto</code> снова означает "смотреть на значения <code>width</code> или <code>height</code>"; а новое ключевое слово <code>content</code> было введено для автоматического размера. ({{bug("1105111")}} охватывает добавление этого ключевого слова).</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="container"&gt;
+  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="container"&gt;
+  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+</pre>
+
+<h3 id="Results">Results</h3>
+
+<p>{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.flex-basis")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<div id="gtx-anchor" style="position: absolute; left: 185px; top: 1956px; width: 393px; height: 17px;"></div>
+
+<div class="jfk-bubble gtx-bubble" style="">
+<div class="jfk-bubble-content-id" id="bubble-24">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 176.5px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/css/flex-direction/index.html b/files/ru/web/css/flex-direction/index.html
new file mode 100644
index 0000000000..a4a62c5a77
--- /dev/null
+++ b/files/ru/web/css/flex-direction/index.html
@@ -0,0 +1,149 @@
+---
+title: flex-direction
+slug: Web/CSS/flex-direction
+translation_of: Web/CSS/flex-direction
+---
+<p>{{ CSSRef("CSS Flexible Boxes") }}</p>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p><code>flex-direction -</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство , указывающее на то,как flex-элементы располагаются во flex-контейнере по главной оси и направлению (normal или reversed).</p>
+
+<p>Обратите внимание, что значения <code>row</code> и <code>row-reverse</code> зависят от направления flex-контейнера. Если его атрибут <code>dir</code> равен <code>ltr</code>, <code>row</code> представляет собой горизонтальную ось, ориентированную слева направо, а <code>row-reverse</code> - справа налево; если атрибут <code>dir</code> равен <code>rtl</code>, <code>row</code> представляет собой горизонтальную ось, ориентированную справа налево, а <code>row-reverse</code> - слева направо.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>См. <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> для детализации по свойствам и дополнительной информации.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* The direction text is laid out in a line */
+flex-direction: row;
+
+/* Как &lt;row&gt;, но наоборот */
+flex-direction: row-reverse;
+
+/* The direction in which lines of text are stacked */
+flex-direction: column;
+
+/* Как &lt;column&gt;, но наоборот */
+flex-direction: column-reverse;
+
+/* Общие значения */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Может принимать следующие значения::</p>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>Главная ось flex-контейнера определена точно так же, как направление текста. Точки <strong>main-start</strong> и <strong>main-end</strong> совпадают с направлением контента.</dd>
+ <dt><code>row-reverse</code></dt>
+ <dd>Ведет себя аналогично <code>row</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd>
+ <dt><code>column</code></dt>
+ <dd>Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки <strong>main-start</strong> и <strong>main-end</strong> такие же, как точки <strong>before</strong> и <strong>after</strong> режима записи (writing-mode).</dd>
+ <dt><code>column-reverse</code></dt>
+ <dd>Ведет себя, как <code>column</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:css;highlight:[2]">element {
+  flex-direction: row-reverse;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Примечание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("18.0")}} (behind a pref) <sup>[1][2]</sup><br>
+    {{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{ property_prefix("-webkit") }}</td>
+   <td>
+    <p>10 {{ property_prefix("-ms") }}<br>
+     11</p>
+   </td>
+   <td>12.10</td>
+   <td>
+    <p>7 {{ property_prefix("-webkit") }}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Для активации поддержки flexbox в Firefox 18 и 19 пользователь должен сменить предпочтение about:config "layout.css.flexbox.enabled" на <code>true</code>.</p>
+
+<p>[2] Многострочный flexbox поддерживается, начиная с Firefox 28.</p>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/flex-flow/index.html b/files/ru/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..48f89c315b
--- /dev/null
+++ b/files/ru/web/css/flex-flow/index.html
@@ -0,0 +1,136 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+translation_of: Web/CSS/flex-flow
+---
+<div>{{ CSSRef}}</div>
+
+<p><strong><code>flex-flow</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство, которое является сокращением для отдельных свойств <code>flex-direction</code> и <code>flex-wrap</code>.</p>
+
+<pre class="brush:css no-line-numbers">/* flex-flow: &lt;'flex-direction'&gt; */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: &lt;'flex-wrap'&gt; */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: &lt;'flex-direction'&gt; and &lt;'flex-wrap'&gt; */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* Global values */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<p>Больше информации и свойств описано в <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Смотрите <a href="/en-US/docs/CSS/flex-direction" title="en-US/docs/CSS/flex-direction"><code>flex-direction</code></a> и <a href="/en-US/docs/CSS/flex-wrap" title="flex-wrap"><code>flex-wrap</code></a>.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css;highlight:3">element {
+  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
+  flex-flow: column-reverse wrap;
+}
+</pre>
+
+<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('CSS3 Flexbox','#flex-flow','flex-flow') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Начальное значение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>28.0<sup>[1]</sup></td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>6.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>28.0<sup>[1]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>7.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В дополенение к безпрефиксной поддержке, Gecko 48.0 {{geckoRelease("48.0")}} добавило поддержку для <code>-webkit</code> префиксной версии свойства для веб для веб совместимости, для тех кто не изменял значение своих настроек <code>layout.css.prefixes.webkit</code>,  по-умолчанию <code>false</code>. Поскольку Gecko 49.0 {{geckoRelease("49.0")}} предпочтительное значение по-умолчанию <code>true</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/flex-grow/index.html b/files/ru/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..ee742c94f2
--- /dev/null
+++ b/files/ru/web/css/flex-grow/index.html
@@ -0,0 +1,137 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - CSS-свойство
+  - NeedsContent
+  - Reference
+translation_of: Web/CSS/flex-grow
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>flex-grow</code></strong> определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»).</span> Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определенным различными коэффициентами flex-grow.</p>
+
+<p>На практике flex-grow используется вместе с другими flex-свойствами {{cssxref("flex-shrink")}} и {{cssxref("flex-basis")}}, и обычно определяется с помощью сокращения (shorthand) {{cssxref("flex")}}, чтобы убедиться, что все значения заданы.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Значения типа &lt;number&gt;*/
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Глобальные значения */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+</pre>
+
+<p>Свойство <code>flex-grow</code> указывается одним числом — значением типа <code><a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow$edit#%3Cnumber%3E">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>См. {{cssxref("&lt;number&gt;")}}. Отрицательные значения недопустимы. По умолчанию 0.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;Это — Flex-Grow&lt;/h4&gt;
+&lt;h5&gt;A,B,C и F имеют коэффициент увеличения flex-grow:1, а D и E — flex-grow:2 .&lt;/h5&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', '700px', '300px', '', 'Web/CSS/flex-grow')}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Flexbox','#flex-grow','flex-grow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Первичное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Руководство по CSS Flexbox: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>Руководство по CSS Flexbox: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li><a href="https://css-tricks.com/flex-grow-is-weird/">`flex-grow` is weird. Or is it?</a> статья Мануэля Матузовича (Manuel Matuzovic) на CSS-Tricks, которая показывает как работает flex-grow</li>
+</ul>
diff --git a/files/ru/web/css/flex-shrink/index.html b/files/ru/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..becc94cfd7
--- /dev/null
+++ b/files/ru/web/css/flex-shrink/index.html
@@ -0,0 +1,112 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+translation_of: Web/CSS/flex-shrink
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>flex-shrink</code></strong> — свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a>, которое определяет фактор сжатия flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значения <code>flex-shrink</code>, когда стандартная ширина flex-элементов шире, чем flex-контейнер.</p>
+
+<p>flex-shrink используется вместе со свойствами flex {{cssxref("flex-grow")}} и {{cssxref("flex-basis")}}. Обычно определяется с помощью сокращения {{cssxref("flex")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;number&gt; значения */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Глобальное значение */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<p><code>flex-shrink</code> свойство определятся одним <code><a href="#&lt;number>">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Смотри {{cssxref("&lt;number&gt;")}}. Отрицательные значения не валидны.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;p&gt;Ширина контента 500px; flex-basis для flex элементов 120px.&lt;/p&gt;
+&lt;p&gt;A, B, C имеют flex-shrink:1 значение. А у D и E - flex-shrink:2&lt;/p&gt;
+&lt;p&gt;Ширина D и E меньше других.&lt;/p&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Пример', '500px', '300px', '', 'Web/CSS/flex-shrink') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
+
+<p><nobr></nobr></p>
diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..11724a35cb
--- /dev/null
+++ b/files/ru/web/css/flex-wrap/index.html
@@ -0,0 +1,147 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+translation_of: Web/CSS/flex-wrap
+---
+<div>{{ CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задает правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.</p>
+
+<pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap;
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<p>Подробнее по свойствам и общей информации смотрите <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Свойство <code>flex-wrap</code> может содержать одно из следующих ниже значений.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Допускаются следующие значения:</p>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>Расположение в одну линию, может привести к переполнению контейнера. Свойство <strong>cross-start</strong> эквивалентно <strong>start</strong> или <strong>before</strong> в зависимости от значения {{cssxref("flex-direction")}}.</dd>
+ <dt><code>wrap</code></dt>
+ <dd>Расположение в несколько линий. Свойство <strong>cross-start</strong> эквивалентно <strong>start</strong> или <strong>before</strong> в зависимости отзначения <code>flex-direction</code> и свойство <strong>cross-end</strong> противоположно <strong>cross-start</strong>.</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd>Ведёт себя так же, как и <code>wrap</code> но <strong>cross-start</strong> и <strong>cross-end</strong> инвертированы.</dd>
+ <dt>
+ <h3 id="Formal_syntax">Formal syntax</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html notranslate">&lt;h4&gt;This is an example for flex-wrap:wrap &lt;/h4&gt;
+&lt;div class="content"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:nowrap &lt;/h4&gt;
+&lt;div class="content1"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:wrap-reverse &lt;/h4&gt;
+&lt;div class="content2"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+</pre>
+</div>
+
+<h3 id="Results">Results</h3>
+
+<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/flex/index.html b/files/ru/web/css/flex/index.html
new file mode 100644
index 0000000000..c91553c0b1
--- /dev/null
+++ b/files/ru/web/css/flex/index.html
@@ -0,0 +1,201 @@
+---
+title: flex
+slug: Web/CSS/flex
+translation_of: Web/CSS/flex
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <a href="/ru/docs/CSS" title="CSS">CSS</a> <strong><code>flex</code></strong> - это <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Shorthand_properties">сокращенное свойство</a>, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow">flex-grow</a>, <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-basis"> flex-basis</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Для более полной информации читайте <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Использование flex-контейнеров CSS</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css">/* 0 0 auto */
+flex: none;
+
+/* Одно значение, число без единиц: flex-grow */
+flex: 2;
+
+/* Одно значение, ширина/высота: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Два значения: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Два значения: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Три значения: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Глобальные значения */
+flex: inherit;
+flex: initial;
+flex: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>&lt;'flex-grow'&gt;</code></dt>
+ <dd>Определяет <code>{{cssxref("flex-grow")}}</code> для флекс элемента. Смотри {{cssxref("&lt;number&gt;")}} для большей информации. Негативные значения считаются недействительными. Значение по умолчанию  <code>0</code>, если не указано.</dd>
+ <dt><code>&lt;'flex-shrink'&gt;</code></dt>
+ <dd>Определяет <code>{{cssxref("flex-shrink")}}</code> для флекс элемента. Смотри {{cssxref("&lt;number&gt;")}} для большей информации. Негативные значения считаются недействительными. Значение по умолчанию  <code>1</code>, если не указано.</dd>
+ <dt><code>&lt;'flex-basis'&gt;</code></dt>
+ <dd>Определяет <code>{{cssxref("flex-basis")}}</code> для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) - корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию  <code>0%</code>, если не указано.</dd>
+ <dt><code>none</code></dt>
+ <dd>Размер элемента устанавливается в соответствии с его свойствами <code>width</code> и <code>height</code>. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению "<code>flex: 0 0 auto</code>".</dd>
+ <dt>
+ <h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css">#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container &gt; .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+	width: 5rem;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="flex-container"&gt;
+    &lt;div class="flex-item" id="flex"&gt;Flex box (click to toggle raw box)&lt;/div&gt;
+    &lt;div class="raw-item" id="raw"&gt;Raw box&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+	raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+</pre>
+
+<pre class="brush: css">#flex-container {
+	width: 100%;
+	font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container &gt; div {
+	border: 1px solid #f00;
+	padding: 1rem;
+}
+
+#flex-container &gt; .raw-item {
+	border: 1px solid #000;
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80','100%','60')}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("18.0")}} (behind a pref) <sup><a href="#bc1">[1]</a> <a href="#bc2">[2]</a></sup><br>
+    {{CompatGeckoDesktop("20.0")}} <sup><a href="#bc2">[2]</a><a href="#bc3">[3]</a></sup></td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}} <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup><br>
+    11.0 <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup></td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>7.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><sup><a name="bc1">[1]</a></sup>  Для активации flexbox для Firefox 18 и 19 пользователю неободимо внести следующее изменение:<br>
+ свойство конфигурации "layout.css.flexbox.enabled" в<code>true</code>.</p>
+
+<p><sup><a name="bc2">[2]</a></sup> Multi-line flexbox поддерживается Firefox 28.</p>
+
+<p><sup><a name="flexbug8">[3]</a></sup> Internet Explorer 10-11 (кроме 12+) игонорируют использование <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> во flex-basis части <code>flex</code> синтаксиса. Это можно обойти, используя свойства longhand вместо сокращения. Дополнительную информацию см. В <a href="https://github.com/philipwalton/flexbugs#8-flex-shorthand-doesnt-support-calc">Flexbug # 8</a>.</p>
+
+<p><sup><a name="flexbug4">[4]</a></sup> В Internet Explorer 10-11 (кроме 12+),  объявление <code>flex</code> без единичного значения в его <em>flex-basis</em> части считается синтаксически недействительным и поэтому игнорируется. Обходной путь состоит в том, чтобы всегда включать единицу в <em>flex-basis </em>часть <code>flex</code> . Дополнительную информацию см. В <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/flex_value/index.html b/files/ru/web/css/flex_value/index.html
new file mode 100644
index 0000000000..c43a75c0cc
--- /dev/null
+++ b/files/ru/web/css/flex_value/index.html
@@ -0,0 +1,49 @@
+---
+title: <flex>
+slug: Web/CSS/flex_value
+translation_of: Web/CSS/flex_value
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <strong><code>&lt;flex&gt;</code></strong> определеяет гибкую длину в сеточном контейнере. Он используется в таких свойствах, как {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;flex&gt;</code> определяется как {{cssxref("&lt;number&gt;")}} с единицей измерения <a id="fr" name="fr"><code>fr</code></a>. Единица измерения <code>fr</code> представляет собой долю оставшегося в сетке пространства. Как и все CSS размеры, между числом и единицей измерения нет пробела.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">1fr    /* Целочисленное значение */
+2.5fr  /* Дробное значение */
+</pre>
+
+<h2 id="Спецификации">Спецификации</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("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.types.flex")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+</ul>
diff --git a/files/ru/web/css/float/index.html b/files/ru/web/css/float/index.html
new file mode 100644
index 0000000000..ff10399e59
--- /dev/null
+++ b/files/ru/web/css/float/index.html
@@ -0,0 +1,244 @@
+---
+title: float
+slug: Web/CSS/float
+translation_of: Web/CSS/float
+---
+<div>Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещен вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>CSS свойство <code>float</code> указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.</p>
+
+<p><strong>Плавающий элемент</strong> - это любой элемент со свойством <code>float</code> отличным от <code>none</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Поскольку <code>float</code> подразумевает использование блочной модели, это свойство изменяет вычисляемые значения {{cssxref("display")}} в следующих случаях:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specified value</th>
+   <th scope="col">Computed value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>inline</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-block</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-table</code></td>
+   <td><code>table</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-cell</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-caption</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-header-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-footer-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>flex</code></td>
+   <td><code>flex</code>, <code>float</code> не оказывает влияния на такие элементы</td>
+  </tr>
+  <tr>
+   <td><code>inline-flex</code></td>
+   <td><code>inline-flex</code>, <code>float</code> не оказывает влияния на такие элементы</td>
+  </tr>
+  <tr>
+   <td><em>other</em></td>
+   <td><em>не меняются</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>Note: </strong>If you're referring to this property from JavaScript as a member of the {{domxref("element.style")}} object, you must spell it as <code>cssFloat</code>. Also note that Internet Explorer versions 8 and older spelled this <code>styleFloat</code>. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that "float" is a reserved word in JavaScript, as with the need to escape "class" as "className" and escape &lt;label&gt;'s "for" as "htmlFor").</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">float: left;
+float: right;
+float: none;
+
+float: inherit;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Is a keyword indicating that the element must float on the left side of its containing block.</dd>
+ <dt><code>right</code></dt>
+ <dd>Is a keyword indicating that the element must float on the right side of its containing block.</dd>
+ <dt><code>none</code></dt>
+ <dd>Is a keyword indicating that the element must not float.</dd>
+ <dt>
+ <h3 id="Formal_syntax">Formal syntax</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax("float")}}
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p><a href="/samples/cssref/float.html">Посмотреть живые примеры</a></p>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  div { border: solid red;  max-width: 70ex; }
+  h4  { float: left;  margin: 0; }
+&lt;/style&gt;
+
+&lt;div&gt;
+  &lt;h4&gt;HELLO!&lt;/h4&gt;
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+&lt;/div&gt;
+</pre>
+
+<div style="border: solid red; max-width: 70ex;">
+<h4 id="HELLO!" style="float: left; margin: 0;">HELLO!</h4>
+This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
+
+<h3 id="How_floats_are_positioned">How floats are positioned</h3>
+
+<p>As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box <em>or another floated element</em>.</p>
+
+<p>In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second "left" red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.</p>
+
+<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p>
+
+<h3 id="Clearing_floats">Clearing floats</h3>
+
+<p>In the example above, the floated elements are shorter vertically than the block of text they're floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read "Lorem ipsum dolor sit amet," and was followed by another heading of the same style as the "Floats Example" heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we'd need to clear the floats.</p>
+
+<p>The simplest way to clear the floats in this example is to add the {{Cssxref("clear")}} property to the new heading we want to be sure is aligned left:</p>
+
+<pre class="brush:css">h2.secondHeading { clear: both; }
+</pre>
+
+<p>However, this method only works if there are no other elements within the same <a href="/ru/docs/Web/CSS/block_formatting_context" rel="internal">block formatting context</a> that we <em>do</em> want the heading to continue to appear next to horizontally. If our <code>H2</code> has siblings which are a sidebars floated to the left and right, using <code>clear</code> will force it to appear below both sidebars, which is probably not what we want.</p>
+
+<p>If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats' container. Referring to the example above again, it appears that all three red boxes are within a <code>P</code> element. We can set the {{Cssxref("overflow")}} property on that P to <code>hidden</code> or <code>auto</code> to cause it to expand to contain them, but not allow them to drop out the bottom of it:</p>
+
+<pre class="brush:css">p.withRedBoxes { overflow: hidden; height: auto; }
+</pre>
+
+<div class="note"><strong>Note:</strong> Setting <code>overflow</code> to <code>scroll</code> will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we're setting <code>height</code> to <code>auto</code> even though that's the default to indicate that the container should grow to accommodate its content.</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Lots of new values, not all clearly defined yet. Any differences in behavior unrelated to new features are expected to be unintentional; please report.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/block_formatting_context">Block formatting context</a></li>
+</ul>
diff --git a/files/ru/web/css/font-family/index.html b/files/ru/web/css/font-family/index.html
new file mode 100644
index 0000000000..6af65ea731
--- /dev/null
+++ b/files/ru/web/css/font-family/index.html
@@ -0,0 +1,233 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - CSS свойства
+  - CSS свойство
+  - семейства-шрифтов
+translation_of: Web/CSS/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS свойство <strong><code>font-family</code></strong> определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div>
+
+
+
+<p>Значения разделены запятыми, чтобы указать, что они являются альтернативами. Браузер выберет из списка первый шрифт, который установлен или может быть скачан используя правило {{cssxref("@font-face")}} .</p>
+
+<p>Часто удобно использовать сокращённое свойство {{cssxref("font")}}, чтобы задать <code>font-size</code> и другие свойства, которые относятся к шрифту.</p>
+
+<p>Вы всегда должны добавлять по крайней мере одно имя общего семейства шрифтов, так как нет гарантии, что какой-либо из указанных шрифтов будет доступен. Это позволит браузеру выбрать подходящий запасной шрифт, когда возникнет необходимость.</p>
+
+<p>Свойство <code>font-family</code> определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется <em>по одному символу за раз</em>, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых {{cssxref('font-style','стилях')}}, {{cssxref('font-variant','видах')}} или {{cssxref('font-size','размерах')}}, эти свойства могут так же влиять на выбор шрифта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Имя шрифта и общие семейства шрифтов */
+font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* Только общие семейства */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* Глобальные значения */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+</pre>
+
+<p>Свойство <code>font-family</code> получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как <code><a href="#&lt;family-name>">&lt;family-name&gt;</a></code> или <code><a href="#&lt;generic-name>">&lt;generic-name&gt;</a></code>.</p>
+
+<p>В приведенном ниже примере перечислены два семейства шрифтов, первое <code><a href="#&lt;family-name>">&lt;family-name&gt;</a></code>, а второе как <code>&lt;generic-name&gt;</code>:</p>
+
+<pre class="brush: css">font-family: Gill Sans Extrabold, sans-serif;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><a id="&lt;family-name>" name="&lt;family-name>"><code>&lt;family-name&gt;</code></a></dt>
+ <dd>Имя семейства шрифтов. К примеру, "Times" и "Helvetica" это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.</dd>
+ <dt><a id="&lt;generic-name>" name="&lt;generic-name>"><code>&lt;generic-name&gt;</code></a></dt>
+ <dd>
+ <p>Общие семейства шрифтов используются как резервный механизм для сохранения некоторого авторского стиля в момент, когда ни один из желаемых шрифтов недоступен. Общие семейства шрифтов являются ключевыми словами и <strong>не</strong> должны браться в кавычки. Общее семейство шрифтов должно определяться последним в списке семейств шрифтов. Определены следующие ключевые слова:</p>
+
+ <dl>
+  <dt><code>serif</code></dt>
+  <dd style="font-family: serif;">Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания.<br>
+  Например, "<span style="font-family: lucida bright,serif;">Lucida Bright"</span>, "<span style="font-family: lucida fax,serif;">Lucida Fax"</span>, <span style="font-family: palatino,serif;">Palatino</span>, <span style="font-family: palatino linotype,serif;">"Palatino Linotype"</span>, <span style="font-family: palladio,serif;">Palladio</span>, <span style="font-family: urw palladio,serif;">"URW Palladio"</span>, <span style="font-family: serif;">serif</span>.</dd>
+  <dt><code>sans-serif</code></dt>
+  <dd style="font-family: sans-serif;">Глифы имеют гладкие окончания.<br>
+  Например, <span style="font-family: open sans,sans-serif;">"Open Sans"</span>, <span style="font-family: fira sans,sans-serif;">"Fira Sans"</span>, <span style="font-family: lucida sans,sans-serif;">"Lucida Sans"</span>, <span style="font-family: lucida sans unicode,sans-serif;">"Lucida Sans Unicode"</span>, <span style="font-family: trebuchet ms,sans-serif;">"Trebuchet MS"</span>, <span style="font-family: liberation sans,sans-serif;">"Liberation Sans"</span>, <span style="font-family: nimbus sans l,sans-serif;">"Nimbus Sans L"</span>, <span style="font-family: sans-serif;">sans-serif</span>.</dd>
+  <dt><code>monospace</code></dt>
+  <dd style="font-family: monospace;">Все глифы имеют одинаковую фиксированную ширину.<br>
+  Например, <span style="font-family: fira mono,monospace;">"Fira Mono"</span>, <span style="font-family: dejavu sans mono,monospace;">"DejaVu Sans Mono"</span>, <span style="font-family: menlo,monospace;">Menlo</span>, <span style="font-family: consolas,monospace;">Consolas</span>, <span style="font-family: liberation mono,monospace;">"Liberation Mono"</span>, <span style="font-family: monaco,monospace;">Monaco</span>, <span style="font-family: lucida console,monospace;">"Lucida Console"</span>, <span style="font-family: monospace;">monospace.</span></dd>
+  <dt><code>cursive</code></dt>
+  <dd style="font-family: cursive;">Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, <span style="font-family: brush script mt,cursive;">"Brush Script MT</span>", <span style="font-family: brush script std,cursive;">"Brush Script Std</span>", <span>"Lucida Calligraphy"</span>, <span>"Lucida Handwriting"</span>, <span style="font-family: apple chancery,cursive;">"Apple Chancery"</span>, <span style="font-family: cursive;">cursive</span>.</dd>
+  <dt><code>fantasy</code></dt>
+  <dd style="font-family: fantasy;">Фэнтезийные шрифты - это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, <span style="font-family: papyrus,fantasy;">Papyrus</span>, <span style="font-family: herculanum,fantasy;">Herculanum</span>, <span style="font-family: party let,fantasy;">Party LET</span>, <span style="font-family: curlz mt,fantasy;">Curlz MT</span>, <span style="font-family: harrington,fantasy;">Harrington</span>, <span style="font-family: fantasy;">fantasy</span>.</dd>
+  <dt><code>system-ui</code></dt>
+  <dd>Глифы, взятые из дефолтного шрифта пользовательского интерфейса на данной платформе. Поскольку типографские традиции широко варьируются по всему миру, это общее семейство предназначено для гарнитур, которые не отображаются точно в других общих семействах.</dd>
+  <dt><code>math</code></dt>
+  <dd>Это семейство предназначено для особых стилистических задач представления математики: верхний индекс и нижний индекс, скобки, которые пересекают несколько строк, вложенные выражения и двойные глифы с различными значениями.</dd>
+  <dt><code>emoji</code></dt>
+  <dd>Шрифты, специально предназначенные для отображения эмодзи.</dd>
+  <dt><code>fangsong</code></dt>
+  <dd>Особый стиль китайских иероглифов, который является чем-то средним между стилем с засечками Song и курсивным стилем Кай. Этот стиль часто используется для правительственных документов.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Валидные_имена_семейства_шрифтов">Валидные имена семейства шрифтов</h3>
+
+<p>Имена семейств шрифтов должны быть указаны либо в виде строк в кавычках, либо в виде последовательности одного или нескольких идентификаторов без кавычек. Если имя семейства шрифтов содержит цифры или знаки пунктуации, такое имя должно быть заключено в кавычки.</p>
+
+<p>Например, следующие объявления являются валидными:</p>
+
+<pre class="brush:css">font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;</pre>
+
+<p>Следующие объявления являются <strong>не валидными</strong>:</p>
+
+<pre class="brush:css example-bad">font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Некоторые_общие_семейства_шрифтов">Некоторые общие семейства шрифтов</h3>
+
+<pre class="brush: css;">.serif {
+  font-family: Times, Times New Roman, Georgia, serif;
+}
+
+.sansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.monospace {
+  font-family: Lucida Console, Courier, monospace;
+}
+
+.cursive {
+  font-family: cursive;
+}
+
+.fantasy {
+  font-family: fantasy;
+}
+
+.emoji {
+  font-family: emoji;
+}
+
+.math {
+  font-family: math;
+}
+
+.fangsong {
+  font-family: fangsong;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;div class="serif"&gt;
+  This is an example of a serif font.
+&lt;/div&gt;
+
+&lt;div class="sansserif"&gt;
+  This is an example of a sans-serif font.
+&lt;/div&gt;
+
+&lt;div class="monospace"&gt;
+  This is an example of a monospace font.
+&lt;/div&gt;
+
+&lt;div class="cursive"&gt;
+  This is an example of a cursive font.
+&lt;/div&gt;
+
+&lt;div class="fantasy"&gt;
+  This is an example of a fantasy font.
+&lt;/div&gt;
+
+&lt;div class="math"&gt;
+  This is an example of a math font.
+&lt;/div&gt;
+
+&lt;div class="emoji"&gt;
+  This is an example of an emoji font.
+&lt;/div&gt;
+
+&lt;div class="fangsong"&gt;
+  This is an example of a fangsong font.
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Некоторые_общие_семейства_шрифтов','600','120') }}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Fonts', '#generic-font-families', 'generic font families')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Добавляет новые общие семейства шрифтов, в частности: <code>system-ui</code>, <code>emoji</code>, <code>math</code>, and <code>fangsong</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Никаких существенных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Никаких существенных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-family', 'font-familiy')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<p>[1] <code>system-ui</code> в данный момент не реализовано, смотри {{bug(1226042)}}.</p>
+
+<p>[2] <code>system-ui</code> реализовано в Safari (<a href="https://bugs.webkit.org/show_bug.cgi?id=151493">wkbug.com/151493</a>), возможно будет выпущено в ближайшем времени.</p>
+
+<p>[3] префиксный алиас <code>-apple-system</code> поддерживается в Safari, начиная с OS X 10.11 и iOS 9, а также в Firefox 43 на macOS ({{bug(1201318)}}).</p>
diff --git a/files/ru/web/css/font-size/index.html b/files/ru/web/css/font-size/index.html
new file mode 100644
index 0000000000..08e99d25d8
--- /dev/null
+++ b/files/ru/web/css/font-size/index.html
@@ -0,0 +1,300 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+tags:
+  - CSS
+  - CSS свойства
+  - css шрифты
+translation_of: Web/CSS/font-size
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> Свойство <strong><code>font-size</code></strong> определяет размер шрифта. Это свойство также используется для вычисления размера<code> em</code>, <code>ex</code> и других относительных единиц. Подробнее: {{cssxref("&lt;length&gt;")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/font-size.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css">/* значения в &lt;абсолютных размерах&gt; */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* значения в &lt;относительных размерах&gt; */
+font-size: larger;
+font-size: smaller;
+
+/* &lt;значения длины&gt; */
+font-size: 12px;
+font-size: 0.8em;
+
+/* &lt;процентные значения&gt; */
+font-size: 80%;
+
+/* Глобальные значения */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+</pre>
+
+<p>Свойство <code>font-size</code> устанавливается одним из следующих способов:</p>
+
+<ul>
+ <li>Ключевым словом из перечня  <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-size$edit#absolute-size">абсолютных значений</a> или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-size$edit#relative-size">относительных значений</a></li>
+ <li>Как <code>&lt;значение длины&gt;</code> или <code>&lt;процентное значение&gt;</code>, по отношению к размеру родительского элемента.</li>
+</ul>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></dt>
+ <dd>Набор ключевых слов абсолютных значений, по отношению к пользовательскому размеру шрифта по умолчанию (им считается <code>medium</code> - среднее).</dd>
+ <dt><code>larger, smaller</code></dt>
+ <dd>Больше (larger) или меньше (smaller). Ключевые слова для относительного размера. Шрифт будет больше или меньше по отношению в размеру шрифта родительского элемента.Примерно на такое же соотношение, которое используется в ключевых словах абсолютного размера выше.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>
+ <p>Положительное значение длины {{cssxref("&lt;length&gt;")}}. Для большинства единиц измерения, зависимых от шрифта (таких как <code>em</code> и <code>ex</code>), размер шрифта будет зависеть от размера шрифта родительских элементов.</p>
+
+ <p>Для единиц измерения, зависимых от шрифта, которые зависят от корневых единиц (таких как <code>rem</code>), размер шрифта будет коррелироваться по отношению к шрифту, используемому корневым элементом  {{HTMLElement("html")}} (root).</p>
+ </dd>
+ <dt><code>&lt;процентные значения&gt;</code></dt>
+ <dd>Положительное процентное {{cssxref("&lt;percentage&gt;")}} значение по отношению к размеру шрифта родительского элемента.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Для обеспечения максимальной совместимости обычно лучше использовать значения, относящиеся к размеру шрифта пользователя по умолчанию.</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Possible_approaches" name="Possible_approaches">Возможные подходы</h2>
+
+<p>Существуют разные способы задания размера шрифта. С помощью ключевых слов или с помощью числовых значений для размера пикселей или размера ems.  Выберите подходящий метод в зависимости от потребностей конкретной веб-страницы.</p>
+
+<h3 id="Keywords" name="Keywords">Ключевые слова</h3>
+
+<p>Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.</p>
+
+<h3 id="Pixels" name="Pixels">Pixels</h3>
+
+<p>Setting the font size in pixel values (<code>px</code>) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.</p>
+
+<p>Font sizing settings can also be used in combination. For example, if a parent element is set to <code>16px</code> and its child element is set to <code>larger</code>, the child element displays larger than the parent element in the page.</p>
+
+<div class="note"><strong>Note:</strong> Defining font sizes in pixel is <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">not accessible</a></em>, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.</div>
+
+<h3 id="Ems" name="Ems">Ems</h3>
+
+<p>Another way of setting the font size is with <code>em</code> values. The size of an <code>em</code> value is dynamic. When defining the <code>font-size</code> property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a <code>font-size</code> of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.</p>
+
+<p>In order to calculate the em equivalent for any pixel value required, you can use this formula:</p>
+
+<pre>em = desired element pixel value / parent element font-size in pixels</pre>
+
+<p>For example, suppose the font-size of the body of the page is set to 1em, with the browser standard of 1em = 16px; if the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).</p>
+
+<p>A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. For example:</p>
+
+<pre class="brush:css">body {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6em; /* 1.6em = 16px */
+}</pre>
+
+<p>The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.</p>
+
+<p>One important fact to keep in mind:  em values compound. Take the following HTML and apply it with the previous CSS above:</p>
+
+<pre class="brush: html">&lt;div&gt;
+&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>The result is:</p>
+
+<p>{{EmbedLiveSample("Ems", 400, 40)}}</p>
+
+<p>Assuming that the browser's default <code>font-size</code> is 16px, the words "outer" would be rendered at 16px, but the word "inner" would be rendered at 25.6px. This is because the inner span's <code>font-size</code> is 1.6 em which is relative to its parent's <code>font-size</code>, which is in turn relative to its parent's <code>font-size</code>. This is often called <strong>compounding</strong>.</p>
+
+<h3 id="Rems" name="Rems">Rems</h3>
+
+<p><code>rem</code> values were invented in order to sidestep the compounding problem. <code>rem</code> values are relative to the root <code>html</code> element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.</p>
+
+<p>The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to <code>rem</code>.</p>
+
+<pre class="brush: css">html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+</pre>
+
+<p>Then we apply this CSS to the same HTML, which looks like this:</p>
+
+<pre class="brush: html">&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;</pre>
+
+<p>{{EmbedLiveSample("Rems", 400, 40)}}</p>
+
+<p>In this example, the words "outer inner outer" are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 16px).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_1" name="Example_1">Пример 1</h3>
+
+<pre class="brush: css">/* Set paragraph text to be very large. */
+p { font-size: xx-large }
+
+/* Set h1 (level 1 heading) text to be 2.5 times the size
+ * of the text around it. */
+h1 { font-size: 250% }
+
+/* Sets text enclosed within span tag to be 16px */
+span { font-size: 16px; }
+</pre>
+
+<h3 id="Пример_2">Пример 2</h3>
+
+<pre class="brush: css">.small {
+	font-size: xx-small;
+}
+.larger {
+	font-size: larger;
+}
+.point {
+	font-size: 24pt;
+}
+.percent {
+	font-size: 200%;
+}
+</pre>
+
+<pre class="brush: html"><span>&lt;h1 class="small"&gt;Small H1&lt;/h1&gt;
+&lt;h1 class="larger"&gt;Larger H1&lt;/h1&gt;</span>
+<span>&lt;h1 class="point"&gt;24 point H1&lt;/h1&gt;
+&lt;h1 class="percent"&gt;200% H1&lt;/h1&gt;</span></pre>
+
+<h4 id="Live_Sample">Live Sample</h4>
+
+<p>{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_2','600','200')}}</p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>em</code> and <code>ex</code> units on the {{Cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{Cssxref("font-size")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>font-size</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>5.5</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Rem values</td>
+   <td>31.0</td>
+   <td>31.0</td>
+   <td>9<sup>[1]</sup><br>
+    11</td>
+   <td>28.0</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>
+    <p>1.0</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Rem values</td>
+   <td>4.1</td>
+   <td>42</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 9 and 10 only had partial support for this feature.</p>
diff --git a/files/ru/web/css/font-style/index.html b/files/ru/web/css/font-style/index.html
new file mode 100644
index 0000000000..8ccd637b99
--- /dev/null
+++ b/files/ru/web/css/font-style/index.html
@@ -0,0 +1,106 @@
+---
+title: font-style
+slug: Web/CSS/font-style
+tags:
+  - Ссылка
+  - шрифт
+translation_of: Web/CSS/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-style</code></strong> это CSS свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его {{cssxref("font-family")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>
+
+<p><strong>Italic</strong> шрифты в общем курсивные по своей сути, обычно занимают меньше горизонтального пространства чем их нестилизированные копии, тогда как <strong>oblique</strong> шрифты обычно просто наклонная версия регулярного шрифта. Когда определённый стиль не доступен, оба italic и oblique шрифты симулируются искусственно наклоняя глифы регулярного шрифта (используйте {{cssxref("font-synthesis")}} для управления этим поведением).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">font-style: normal;
+font-style: italic;
+font-style: oblique;
+
+/* Глобальные значения */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+</pre>
+
+<p>Свойство <code>font-style</code> определяется как единственное ключевое слово выбранное из списка значений внизу.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Выделяет шрифт который классифицирован как <code>normal</code> в {{Cssxref("font-family")}}.</dd>
+ <dt><code>italic</code></dt>
+ <dd>Выделяет шрифт который классифицирован как  <code>italic</code>. Если не доступна курсивная версия шрифта, взамен используется <code>oblique</code> классификация. Если не одна версия не доступна, то стиль симулируется искусственно.</dd>
+ <dt><code>oblique</code></dt>
+ <dd>Выделяет шрифт который классифицирован как  <code>oblique</code>. Если не доступна косая версия шрифта, взамен используется  <code>italic</code> классификация. Если не одна версия не доступна, то стиль симулируется искусственно.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Font_styles">Font styles</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p class="normal"&gt;This paragraph is normal.&lt;/p&gt;
+&lt;p class="italic"&gt;This paragraph is italic.&lt;/p&gt;
+&lt;p class="oblique"&gt;This paragraph is oblique.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css">.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}</pre>
+
+<p>{{ EmbedLiveSample('Font_styles') }}</p>
+
+<h2 id="Specific​ations">Specific​ations</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.font-style")}}</p>
diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html
new file mode 100644
index 0000000000..1e73617ac2
--- /dev/null
+++ b/files/ru/web/css/font-variant-ligatures/index.html
@@ -0,0 +1,152 @@
+---
+title: font-variant-ligatures
+slug: Web/CSS/font-variant-ligatures
+translation_of: Web/CSS/font-variant-ligatures
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p><strong>Свойство CSS<strong> </strong><code>Font-variant-ligatures</code></strong> <strong>контролирует, какие лигатуры и контекстные формы используются в текстовом содержимом элемента, к которому применяется. Это повышает гармоничность форм получаемого в результате текста.</strong></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css notranslate">font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* &lt;common-lig-values&gt; */
+font-variant-ligatures: no-common-ligatures;        /* &lt;common-lig-values&gt; */
+font-variant-ligatures: discretionary-ligatures;    /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: no-discretionary-ligatures; /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: historical-ligatures;       /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: no-historical-ligatures;    /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: no-contextual;              /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;no-historical-ligatures&gt; &lt;common-ligatures&gt; */
+
+/* Глобальные значения */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Это ключевое слово ведет к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.</dd>
+ <dt><code>none</code></dt>
+ <dd>Это ключевое слово устанавливает, что все лигатуры и контекстные формы отключены, даже распространенные.</dd>
+ <dt>&lt;<em>common-lig-values&gt;</em></dt>
+ <dd>Эти значения контролируют наиболее распространенные лигатуры, такие как лигатуры для сочетаний <code>fi</code>, <code>ffi</code>, <code>th</code> или подобных. Они относятся к значениям <code>liga</code> и <code>clig</code> в OpenType. Допустимы два значения:
+ <ul>
+  <li><code>common-ligatures</code> активирует эти лигатуры. Обратите внимание, что ключевое слово <code>normal</code> активирует лигатуры.</li>
+  <li><code>no-common-ligatures</code> отключает эти лигатуры.</li>
+ </ul>
+ </dd>
+ <dt>&lt;<em>discretionary-lig-values</em>&gt;</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Эти значения управляют определенными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта.</span> <span title="">Они соответствуют значениям OpenType <code>hlig</code></span></span>. Доступны два значения:
+ <ul>
+  <li><code>discretionary-ligatures</code> активирует данные лигатуры.</li>
+  <li><code>no-discretionary-ligatures</code> деактивирует лигатуры. Обратите внимание, обычно, ключевое слово <code>normal</code> также деактивирует лигатуры.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;historical-lig-values&gt;</em></dt>
+ <dd>(ß) <span class="tlid-translation translation" lang="ru"><span title="">Эти значения контролируют лигатуры, которые исторически использовались в старых книгах, например, немецкий</span></span> <span class="aCOpRe"><span><em>tz</em></span></span> ("tz диаграф", прим. перев.). Они соответствуют значениям OpenType <code>hlig</code>. Доступны два значения:
+ <ul>
+  <li><code>historical-ligatures</code> активирует данные лигатуры.</li>
+  <li><code>no-historical-ligatures</code> деактивирует лигатуры. Обратите внимание, обычно, ключевое слово <code>normal</code> также деактивирует лигатуры.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;contextual-alt-values&gt;</em></dt>
+ <dd>Эти значения определяют, адаптируются ли буквы к своему контексту, то есть адаптируются ли они к окружающим их буквам. Эти значения соответствуют вычисленным значениям OpenType. Возможны два значения:
+ <ul>
+  <li><code>contextual</code>указывает, что должны использоваться контекстные альтернативы. Обратите внимание, что ключевое слово <code>normal</code> обычно также активирует лигатуры.</li>
+  <li><code>no-contextual</code> предотвращает их использование.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Соответствующий_правилам_синтаксис">Соответствующий правилам синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css notranslate">p {
+  font-variant-ligatures: none;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("34")}} [1]</td>
+   <td>{{CompatChrome(31)}} {{property_prefix("-webkit")}}<br>
+    {{CompatChrome(34)}}</td>
+   <td>10.0</td>
+   <td>19.0{{property_prefix("-webkit")}}</td>
+   <td>7.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.4 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("34")}}[1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>7.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span class="tlid-translation translation" lang="ru"><span title="">Экспериментальная реализация была доступна начиная с Gecko 24. Она регулировалась настройкой</span></span> <code>layout.css.font-features.enabled</code> <span class="tlid-translation translation" lang="ru"><span title="">, по умолчанию значение <code>true</code> только для Nightly и Aurora.</span> <span title="">Ключевое слово </span></span> <code>none</code> было добавлено в Gecko 28.</p>
diff --git a/files/ru/web/css/font-variant-numeric/index.html b/files/ru/web/css/font-variant-numeric/index.html
new file mode 100644
index 0000000000..ebe5716b68
--- /dev/null
+++ b/files/ru/web/css/font-variant-numeric/index.html
@@ -0,0 +1,151 @@
+---
+title: font-variant-numeric
+slug: Web/CSS/font-variant-numeric
+tags:
+  - CSS
+  - Свойства CSS
+  - Шрифты CSS
+translation_of: Web/CSS/font-variant-numeric
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Свойство CSS <strong><code>font-variant-numeric</code></strong> управляет использованием альтернативных начертаний для цифр, дробей и порядковых числительных.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-variant-numeric")}}</pre>
+
+<pre>font-variant-numeric: normal
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: ordinal</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: slashed-zero</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: lining-nums         /* &lt;numeric-figure-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: oldstyle-nums       /* &lt;numeric-figure-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: proportional-nums   /* &lt;numeric-spacing-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: tabular-nums        /* &lt;numeric-spacing-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: diagonal-fractions  /* &lt;numeric-fraction-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: stacked-fractions   /* &lt;numeric-fraction-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: oldstyle-nums stacked-fractions</span>
+
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: initial</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: inherit</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: unset</span>
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Это ключевое слово отключает все альтернативные начертания.</dd>
+ <dt><code>ordinal</code></dt>
+ <dd>Это ключевое слово включает специальные глифы для порядковых числительных, например, 1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup>, 4<sup>th</sup> в английском или 1<sup>a</sup> в итальянском (в русском такие типографские изыски не приняты, пишут просто «1-й»). Это соответствует значению OpenType <code>ordn</code>.</dd>
+ <dt><code>slashed-zero</code></dt>
+ <dd>Это ключевое слово включает перечёркнутый ноль; это полезно, когда нужно чёткое различие между буквой O и цифрой 0. Это соответствует значению OpenType <code>zero</code>.</dd>
+ <dt><em>&lt;numeric-figure-values</em>&gt;</dt>
+ <dd>Эти значения управляют тем, какими знаками будут отображаться цифры. Возможны два значения:
+ <ul>
+  <li><code>lining-nums</code> включает маюскульные («заглавные») цифры, стоящие на опорной линии текста. Это соответствует значению OpenType <code>lnum</code>.</li>
+  <li><code>oldstyle-nums</code> включает минускульные («строчные») цифры, в которых некоторые знаки (3, 4, 7, 9) уходят нижним краем под опорную линию (в русской типографике не принято, зато широко используется в западной, в основном в шрифтах с засечками). Это соответствует значению OpenType <code>onum</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-spacing-values</em>&gt;</dt>
+ <dd>Эти значения управляют горизонтальным размером цифр. Возможны два значения:
+ <ul>
+  <li><code>proportional-nums</code> включает цифры разной ширины. Это соответствует значению OpenType <code>pnum</code>.</li>
+  <li><code>tabular-nums</code> включает цифры одинаковой ширины, которые легко выравниваются, как в таблицах. Это соответствуют значению OpenType <code>tnum</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-fraction-values</em>&gt;</dt>
+ <dd>Эти значения управляют отображением дробей. Возможны два значения:
+ <ul>
+  <li><code>diagonal-fractions</code> включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой. Это соответствует значению OpenType <code>frac</code>.</li>
+  <li><code>stacked-fractions</code> включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой.  Это соответствует значению OpenType <code>afrc</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:css">p {
+  font-variant-numeric: ordinal;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("34")}} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoMobile("34")}}[1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Experimental implementation was available since Gecko 24. It was governed by the preference <code>layout.css.font-features.enabled</code> defaulting to <code>true</code> on Nightly and Aurora only.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}, {{cssxref("font-kerning")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}.</li>
+</ul>
diff --git a/files/ru/web/css/font-weight/index.html b/files/ru/web/css/font-weight/index.html
new file mode 100644
index 0000000000..290ab85aca
--- /dev/null
+++ b/files/ru/web/css/font-weight/index.html
@@ -0,0 +1,316 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+tags:
+  - CSS
+  - Свойства
+  - Справка
+  - Шрифты
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>font-weight</code></strong> устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">font-weight: normal;
+font-weight: bold;
+
+/* Relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Нормальное начертание. То же, что и <code>400</code>.</dd>
+ <dt><code>bold</code></dt>
+ <dd>Полужирное начертание. То же, что и <code>700</code>.</dd>
+ <dt><code>lighter</code></dt>
+ <dd>Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).</dd>
+ <dt><code>bolder</code></dt>
+ <dd>Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).</dd>
+ <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt>
+ <dd>Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.</dd>
+</dl>
+
+<h3 id="Недоступность_заданного_значения">Недоступность заданного значения</h3>
+
+<p>Если заданное цифровое значение насыщенности недоступно, для определения толщины отображемого шрифта используется следующий алгоритм:</p>
+
+<ul>
+ <li>Если задано значение выше <code>500</code>, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).</li>
+ <li>Если задано значение менее <code>400</code>, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).</li>
+ <li>Если задано значение <code>400</code>, будет применено <code>500</code>. Если <code>500</code> недоступно, то будет использован алгоритм для подбора значений менее <code>400</code>.</li>
+ <li>Если задано значение <code>500</code>, будет применено <code>400</code>. Если <code>400</code> недоступно, то будет использован алгоритм для подбора значений менее <code>400</code>.</li>
+</ul>
+
+<p><span id="result_box" lang="ru"><span class="hps">Это означает, что</span> <span class="hps">для шрифтов</span><span>, которые предоставляют</span> <span class="hps">только</span> <span class="hps">normal и</span> bold<span class="hps"> начертания,</span> <span class="hps">100-500</span> <span class="hps">normal</span><span>,</span> <span class="hps">и</span> <span class="hps">600-900</span> bold<span class="hps">.</span></span></p>
+
+<h3 id="Значение_относительных_весов">Значение относительных весов</h3>
+
+<p>Когда используется <strong>жирнее </strong>или <strong>светлее</strong>, следующая таблица используется для вычисления абсолютного веса элемента:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>наследуемое значение</th>
+   <th><code>жирнее</code></th>
+   <th><code>светлее</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Определение_веса_имени">Определение веса имени</h3>
+
+<p>Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Значение</th>
+   <th scope="col">Общее название</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>100</code></td>
+   <td>Тонкий (Волосяной) Thin (Hairline)</td>
+  </tr>
+  <tr>
+   <td><code>200</code></td>
+   <td>Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)</td>
+  </tr>
+  <tr>
+   <td><code>300</code></td>
+   <td>Светлый Light</td>
+  </tr>
+  <tr>
+   <td><code>400</code></td>
+   <td>Нормальный Normal</td>
+  </tr>
+  <tr>
+   <td><code>500</code></td>
+   <td>Средний Medium</td>
+  </tr>
+  <tr>
+   <td><code>600</code></td>
+   <td>Полужирный Semi Bold (Demi Bold)</td>
+  </tr>
+  <tr>
+   <td><code>700</code></td>
+   <td>Жирный Bold</td>
+  </tr>
+  <tr>
+   <td><code>800</code></td>
+   <td>Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)</td>
+  </tr>
+  <tr>
+   <td><code>900</code></td>
+   <td>Черный (Густой) Black (Heavy)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Интерполяция">Интерполяция</h3>
+
+<p>Значения <code>font-weight</code> интерполируются  с помощью дискретных шагов (кратные 100). <span id="result_box" lang="ru"><span class="hps">Интерполяция</span> <span class="hps">происходит в действительном пространстве чисел</span> <span class="hps">и превращается</span> <span class="hps">в целое число путем</span> <span class="hps">округления до</span> <span class="hps">ближайшего числа, кратного</span> <span class="hps">100,</span> <span class="hps">со значениями</span> <span class="alt-edited hps">посредине между</span> <span class="alt-edited hps">кратными 100</span> <span class="alt-edited hps">округленными</span> <span class="alt-edited hps">в сторону</span> <span class="hps">положительной бесконечности</span><span>.</span></span></p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">/* Назначение тексту элемента &lt;<code>p&gt;</code> жирного начертания. */
+p {
+  font-weight: bold;
+}
+
+/* Назначение тексту элемента &lt;div&gt; жирности, которая больше на два уровня,
+чем normal, но все еще меньше, чем стандартный bold. */
+div {
+ font-weight: 600;
+}
+
+/* Назначение тексту элемента &lt;span&gt; жирности,
+которая на один уровень меньше, чем у его родителя. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Примеры","400","300")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>font-weight</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html
new file mode 100644
index 0000000000..3c6671f2d5
--- /dev/null
+++ b/files/ru/web/css/font/index.html
@@ -0,0 +1,352 @@
+---
+title: font
+slug: Web/CSS/font
+translation_of: Web/CSS/font
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-свойство <strong><code>font</code></strong> является сокращением для {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ cssxref("font-stretch") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }}, и {{ Cssxref("font-family") }}. Кроме того, он позволяет установить системный шрифт для элементов интерфейса.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div>
+
+
+
+<p>Как и с любым сокращенным свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращенных свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью <code>font</code>, но они также сбрасываются к своим начальным значениям.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>The <code>font</code> property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.</p>
+
+<p>If <code>font</code> is specified as a system keyword, it must be one of: <code><a href="#caption">caption</a></code>, <code><a href="#icon">icon</a></code>, <code><a href="#menu">menu</a></code>, <code><a href="#message-box">message-box</a></code>, <code><a href="#small-caption">small-caption</a></code>, <code><a href="#status-bar">status-bar</a></code>.</p>
+
+<p>If <code>font</code> is specified as a shorthand for several font-related properties, then:</p>
+
+<ul>
+ <li>it must include values for:
+  <ul>
+   <li>{{cssxref("&lt;font-size&gt;")}}</li>
+   <li>{{cssxref("&lt;font-family&gt;")}}</li>
+  </ul>
+ </li>
+ <li>it may optionally include values for:
+  <ul>
+   <li>{{cssxref("&lt;font-style&gt;")}}</li>
+   <li>{{cssxref("&lt;font-variant&gt;")}}</li>
+   <li>{{cssxref("&lt;font-weight&gt;")}}</li>
+   <li>{{cssxref("&lt;font-stretch&gt;")}}</li>
+   <li>{{cssxref("&lt;line-height&gt;")}}</li>
+  </ul>
+ </li>
+ <li><code>font-style</code>, <code>font-variant</code> and <code>font-weight</code> must precede <code>font-size</code></li>
+ <li><code>font-variant</code> may only specify the values defined in CSS 2.1, that is <code>normal</code> and <code>small-caps</code></li>
+ <li><code>font-stretch</code> may only be a single keyword value.</li>
+ <li><code>line-height</code> must immediately follow <code>font-size</code>, preceded by "/", like this: "<code>16px/3</code>"</li>
+ <li><code>font-family</code> must be the last value specified.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt id="&lt;'font-style'>"><code>&lt;'font-style'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-style") }} CSS property.</dd>
+ <dt id="&lt;'font-variant'>"><code>&lt;'font-variant'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-variant") }} CSS property.</dd>
+ <dt id="&lt;'font-weight'>"><code>&lt;'font-weight'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-weight") }} CSS property.</dd>
+ <dt id="&lt;'font-stretch'>"><code>&lt;'font-stretch'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-stretch") }} CSS property.</dd>
+ <dt id="&lt;'font-size'>"><code>&lt;'font-size'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-size") }} CSS property.</dd>
+ <dt id="&lt;'line-height'>"><code>&lt;'line-height'&gt;</code></dt>
+ <dd>See the {{ cssxref("line-height") }} CSS property.</dd>
+ <dt id="&lt;'font-family'>"><code>&lt;'font-family'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-family") }} CSS property.</dd>
+</dl>
+
+<h4 id="System_font_values">System font values</h4>
+
+<dl>
+ <dt id="caption"><code>caption</code></dt>
+ <dd>The system font used for captioned controls (e.g., buttons, drop-downs, etc.).</dd>
+ <dt id="icon"><code>icon</code></dt>
+ <dd>The system font used to label icons.</dd>
+ <dt id="menu"><code>menu</code></dt>
+ <dd>The system font used in menus (e.g., dropdown menus and menu lists).</dd>
+ <dt id="message-box"><code>message-box</code></dt>
+ <dd>The system font used in dialog boxes.</dd>
+ <dt id="small-caption"><code>small-caption</code></dt>
+ <dd>The system font used for labeling small controls.</dd>
+ <dt id="status-bar"><code>status-bar</code></dt>
+ <dd>The system font used in window status bars.</dd>
+ <dt>Prefixed system font keywords</dt>
+ <dd>Browsers often implement several more, prefixed, keywords: Gecko implements <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code>, and <code>-moz-field</code>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css notranslate">/* Set the font size to 12px and the line height to 14px.
+   Set the font family to sans-serif */
+p { font: 12px/14px sans-serif }
+
+/* Set the font size to 80% of the parent element
+   or default value (if no parent element present).
+   Set the font family to sans-serif */
+p { font: 80% sans-serif }
+
+/* Set the font weight to bold,
+   the font-style to italic,
+   the font size to large,
+   and the font family to serif. */
+p { font: bold italic large serif }
+
+/* Use the same font as the status bar of the window */
+p { font: status-bar }
+</pre>
+
+<h3 id="live_sample" name="live_sample">Live sample</h3>
+
+<div class="hidden">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+    Change the radio buttons below to see the generated shorthand and it's effect.
+&lt;/p&gt;
+&lt;form action="createShortHand()"&gt;
+    &lt;div class="cf"&gt;
+        &lt;div class="setPropCont"&gt;
+            font-style&lt;br/&gt;
+            &lt;input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"&gt; &lt;label for="font-style-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"&gt; &lt;label for="font-style-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"&gt; &lt;label for="font-style-italic"&gt;italic&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"&gt; &lt;label for="font-style-oblique"&gt;oblique&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-variant&lt;br&gt;
+            &lt;input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"&gt; &lt;label for="font-variant-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"&gt; &lt;label for="font-variant-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"&gt; &lt;label for="font-variant-small-caps"&gt;small-caps&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-weight&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"&gt; &lt;label for="font-weight-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"&gt; &lt;label for="font-weight-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"&gt; &lt;label for="font-weight-bold"&gt;bold&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-size&lt;br/&gt;
+            &lt;input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"&gt; &lt;label for="font-size-12px"&gt;12px&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"&gt; &lt;label for="font-size-16px"&gt;16px&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"&gt; &lt;label for="font-size-24px"&gt;24px&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            line-height&lt;br/&gt;
+            &lt;input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"&gt; &lt;label for="line-height-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"&gt; &lt;label for="line-height-1.2"&gt;1.2&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"&gt; &lt;label for="line-height-3"&gt;3&lt;/label&gt;
+        &lt;/div&gt;&lt;br/&gt;
+
+        &lt;div class="setPropCont fontfamily"&gt;
+            font-family&lt;br/&gt;
+            &lt;input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"&gt; &lt;label for="font-family-courier"&gt;courier&lt;/label&gt;&lt;br/&gt;            &lt;input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"&gt; &lt;label for="font-family-serif"&gt;serif&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"&gt; &lt;label for="font-family-sans-serif"&gt;sans-serif&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"&gt; &lt;label for="font-family-arial"&gt;Arial&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"&gt; &lt;label for="font-family-monospace"&gt;monospace&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"&gt; &lt;label for="font-family-cursive"&gt;cursive&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"&gt; &lt;label for="font-family-fantasy"&gt;fantasy&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"&gt; &lt;label for="font-family-system-ui"&gt;system-ui&lt;/label&gt;&lt;br /&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="cf propInputs"&gt;
+        &lt;div class="propInputCont tar"&gt;
+            font :
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_style"&gt;&lt;br/&gt;
+            font-style &lt;br/&gt;
+            optional
+
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_variant"&gt; &lt;br/&gt;
+            font-variant &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_weight"&gt; &lt;br/&gt;
+            font-weight &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss mandatory" id="input_font_size"&gt; &lt;br/&gt;
+            font-size &lt;br/&gt;
+            mandatory
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_line_height"&gt; &lt;br/&gt;
+            line-height &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss mandatory" id="input_font_family"&gt; &lt;br/&gt;
+            font-family &lt;br/&gt;
+            mandatory
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/form&gt;
+
+&lt;div class="fontShortHand"&gt;
+    This is some sample text.
+&lt;/div&gt;
+&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body, input {
+  font: 14px arial;
+  overflow: hidden;
+}
+
+.propInputCont {
+  float: left;
+  text-align: center;
+  margin-right: 5px;
+  width: 80px;
+}
+
+.setPropCont {
+  float: left;
+  margin-right: 5px;
+  width: 120px;
+}
+
+.propInputs, .setPropCont {
+  margin-bottom: 1em;
+}
+
+.curCss {
+  border: none;
+  border-bottom: 1px solid black;
+  text-align: center;
+  width: 80px;
+}
+
+.mandatory {
+  border-bottom-color: red;
+}
+
+.cf:before,
+.cf:after {
+  content: " ";
+  display: table;
+}
+
+.cf:after {
+  clear: both;
+}
+
+.tar {
+  width: 40px;
+  text-align: right;
+}
+.fontfamily {
+  display: inline-block;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var textAreas = document.getElementsByClassName("curCss"),
+    shortText = "",
+    getCheckedValue,
+    setCss,
+    getProperties,
+    injectCss;
+
+getProperties = function () {
+  shortText =
+      getCheckedValue("font_style") + " " +
+      getCheckedValue("font_variant") + " " +
+      getCheckedValue("font_weight") + " " +
+      getCheckedValue("font_size") +
+      getCheckedValue("line_height") + " " +
+      getCheckedValue("font_family");
+
+  return shortText;
+}
+
+getCheckedValue = function(radio_name) {
+  oRadio = document.forms[0].elements[radio_name];
+  for (var i = 0; i &lt; oRadio.length; i++) {
+    if(oRadio[i].checked) {
+      var propInput = "input_" + radio_name,
+          curElemName = "input_" + radio_name,
+          curElem = document.getElementById(curElemName);
+      curElem.value = oRadio[i].value;
+
+      return oRadio[i].value;
+    }
+  }
+}
+
+setCss = function () {
+  getProperties();
+  injectCss(shortText);
+}
+
+injectCss = function(cssFragment) {
+  old = document.body.getElementsByTagName("style");
+  if (old.length &gt; 1) {
+    old[1].parentElement.removeChild(old[1]);
+  }
+  css = document.createElement("style");
+  css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
+  document.body.appendChild(css);
+}
+
+setCss();</pre>
+</div>
+
+<p>{{ EmbedLiveSample('live_sample','100%', '440px') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Fonts', '#font-prop', 'font') }}</td>
+   <td>{{ Spec2('CSS3 Fonts') }}</td>
+   <td>Added support for <code>font-stretch</code> values.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Added support for keywords.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#font', 'font') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.font")}}</p>
diff --git a/files/ru/web/css/gap/index.html b/files/ru/web/css/gap/index.html
new file mode 100644
index 0000000000..701ff15856
--- /dev/null
+++ b/files/ru/web/css/gap/index.html
@@ -0,0 +1,213 @@
+---
+title: gap (grid-gap)
+slug: Web/CSS/gap
+translation_of: Web/CSS/gap
+---
+<p>Свойство <strong><code>gap</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> задаёт отступы ({{glossary("gutters")}}) между столбцами и строками, а не вдоль края контейнера сетки. Является сокращением для свойств <span class="seoSummary">{{CSSxRef("row-gap")}} и {{CSSxRef("column-gap")}}.</span> {{CSSRef}}</p>
+
+<p><span class="seoSummary">The <strong><code>gap</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets the gaps ({{glossary("gutters")}}) between rows and columns. It is a <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> for {{CSSxRef("row-gap")}} and {{CSSxRef("column-gap")}}.</span></p>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-gap.html")}}</div>
+
+<div class="note">
+<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> initially defined the <code>grid-gap</code> property. This prefixed property is being replaced by <code>gap</code>. However, in order to support browsers that implemented <code>grid-gap</code> and not <code>gap</code> for grid, you will need to use the prefixed property as in the interactive example above.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css; no-line-numbers notranslate">/* One &lt;length&gt; value */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* One &lt;percentage&gt; value */
+gap: 16%;
+gap: 100%;
+
+/* Two &lt;length&gt; values */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* One or two &lt;percentage&gt; values */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() values */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Global values */
+gap: inherit;
+gap: initial;
+gap: unset;
+</pre>
+
+<p>This property is specified as a value for <code>&lt;'row-gap'&gt;</code> followed optionally by a value for <code>&lt;'column-gap'&gt;</code>. If <code>&lt;'column-gap'&gt;</code> is omitted, it’s set to the same value as <code>&lt;'row-gap'&gt;</code>.</p>
+
+<p><code>&lt;'row-gap'&gt;</code> and <code>&lt;'column-gap'&gt;</code> are each specified as a <code>&lt;length&gt;</code> or a <code>&lt;percentage&gt;</code>.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
+ <dd>Is the width of the gutter separating the grid lines.</dd>
+ <dt>{{CSSxRef("&lt;percentage&gt;")}}</dt>
+ <dd>Is the width of the gutter separating the grid lines, relative to the dimension of the element.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Flex_layout">Flex layout</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[5] notranslate">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Flex_layout", "auto", "120px")}}</p>
+
+<h3 id="Grid_layout">Grid layout</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">#grid {
+  grid-gap: 20px 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css; highlight[5] notranslate">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Grid_layout", "auto", "120px")}}</p>
+
+<h3 id="Multi-column_layout">Multi-column layout</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;p class="content-box"&gt;
+  This is some multi-column text with a 40px column
+  gap created with the CSS &lt;code&gt;gap&lt;/code&gt; property.
+  Don't you think that's fun and exciting? I sure do!
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight[3] notranslate">.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+</pre>
+
+<h4 id="Result_3">Result</h4>
+
+<p>{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<h3 id="Support_in_Flex_layout">Support in Flex layout</h3>
+
+<p>{{Compat("css.properties.gap.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout">Support in Grid layout</h3>
+
+<p>{{Compat("css.properties.gap.grid_context")}}</p>
+
+<h3 id="Support_in_Multi-column_layout">Support in Multi-column layout</h3>
+
+<p>{{Compat("css.properties.gap.multicol_context")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li>
+</ul>
diff --git a/files/ru/web/css/general_sibling_combinator/index.html b/files/ru/web/css/general_sibling_combinator/index.html
new file mode 100644
index 0000000000..5c076c26b6
--- /dev/null
+++ b/files/ru/web/css/general_sibling_combinator/index.html
@@ -0,0 +1,110 @@
+---
+title: Селектор следующего элемента
+slug: Web/CSS/General_sibling_combinator
+tags:
+  - смежные селекторы CSS спецификация комбинатор
+translation_of: Web/CSS/General_sibling_combinator
+---
+<div><span class="s1">{{CSSRef("Selectors")}}</span></div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Общий комбинатор смежных селекторов <code>(~)</code> разделяет два селектора и находит второй элемент только если ему предшествует первый, и они оба имеют общего родителя. Свойства будут применены ко всем элементам, указанным в правой части, следующим за элементом, указанным в левой части.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">element ~ element { <em>style properties</em> }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">p ~ span {
+  color: red;
+}</pre>
+
+<pre class="brush: html">&lt;span&gt;Это не красный.&lt;/span&gt;
+&lt;p&gt;Здесь параграф.&lt;/p&gt;
+&lt;code&gt;Тут какой-то код.&lt;/code&gt;
+&lt;span&gt;А здесь span.&lt;/span&gt;</pre>
+
+<p>{{ EmbedLiveSample('Example', 280, 120) }}</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('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>7</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Adjacent_sibling_selectors">Смежные селекторы</a></li>
+</ul>
diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html
new file mode 100644
index 0000000000..63c0dcaeaf
--- /dev/null
+++ b/files/ru/web/css/grid-area/index.html
@@ -0,0 +1,197 @@
+---
+title: grid-area
+slug: Web/CSS/grid-area
+translation_of: Web/CSS/grid-area
+---
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">CSS свойство </span></font><strong>grid-area</strong></code> - это <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращенная форма записи</a> для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задает края {{glossary("grid areas", "грид-области")}} грид-элемента.</p>
+
+<pre class="brush: css no-line-numbers">/* Ключевые слова в качестве значений */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* &lt;custom-ident&gt; значения */
+grid-area: some-grid-area;
+grid-area: some-grid-area / another-grid-area;
+
+/* &lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;? значения */
+grid-area: some-grid-area 4;
+grid-area: some-grid-area 4 / 2 another-grid-area;
+
+/* span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ] значения */
+grid-area: span 3;
+grid-area: span 3 / span some-grid-area;
+grid-area: 2 span / another-grid-area span;
+
+/* Global values */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;
+</pre>
+
+<p>Если заданы четыре значения <code>&lt;grid-line&gt;</code> , то первое значение определяет <code>grid-row-start</code> , второе значение -  <code>grid-column-start</code> , третье значение -  <code>grid-row-end</code> и четвертое значение -  <code>grid-column-end</code>.</p>
+
+<p>Если  <code>grid-column-end</code> опущено, а <code>grid-column-start</code> в значении {{cssxref("&lt;custom-ident&gt;")}}, <code>grid-column-end</code> устанавливается в это значение <code>&lt;custom-ident&gt;</code>; иначе оно устанавливается в значение <code>auto</code>.</p>
+
+<p>Когда <code>grid-row-end</code> опущено, а <code>grid-row-start</code> в значении <code>&lt;custom-ident&gt;</code>, то <code>grid-row-end</code> устанавливается в это значение <code>&lt;custom-ident&gt;</code>; иначе оно устанавливается в значение <code>auto</code>.</p>
+
+<p>Когда <code>grid-column-start</code> опущено, а <code>grid-row-start</code> в значении <code>&lt;custom-ident&gt;</code>, все четыре свойства длинной записи устанавливаются в это значение, иначе они устанавливаются в значение <code>auto</code>.</p>
+
+<p>Свойство grid-area также может быть установлено в значение {{cssxref("&lt;custom-ident&gt;")}} , которое действует, как имя области. В дальнейшем разместить область в гриде по имени можно с помощью свойства {{cssxref("grid-template-areas")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>- ключевое слово, говорящее о том, что свойство не вносит никаких изменений в размещение грид-элемента. На элемент действует авторазмещение или размер элемента по умолчанию  <code>1</code>.  <em>(то есть, элемент занимает одну ячейку грид-сетки в заданном направлении)</em></dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>если есть именованная линия с именем  '<code>&lt;custom-ident&gt;-start</code>'/'<code>&lt;custom-ident&gt;-end</code>', то грид-элемент привязывается к первой из таких линий.
+ <p class="note"><strong>Замечание:</strong> Именнованные грид-области автоматически генерируют неявные именнованные линии с именами подобного формата, поэтому запись <code>grid-area: foo;</code> выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем <code>foo-start</code>/<code>foo-end</code> не была явно определена раньше).</p>
+
+ <p>В противном случае, значение расценивается, как если бы число  <code>1</code> было задано вместе с  <code>&lt;custom-ident&gt;</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Contributes the <em>n</em>th grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.
+ <p>If a name is given as a {{cssxref("&lt;custom-ident&gt;")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>
+
+ <p>An {{cssxref("&lt;integer&gt;")}} value of <code>0</code> is invalid.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is <em>n</em> lines from the opposite edge.
+ <p>If a name is given as a {{cssxref("&lt;custom-ident&gt;")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>
+
+ <p>If the {{cssxref("&lt;integer&gt;")}} is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="brush: css; highlight[9]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template: repeat(4, 1fr) / 50px 100px;
+}
+
+#item1 {
+  background-color: lime;
+  grid-area: 2 / 2 / auto / span 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "150px")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-area")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html
new file mode 100644
index 0000000000..1fdf76af20
--- /dev/null
+++ b/files/ru/web/css/grid-auto-flow/index.html
@@ -0,0 +1,207 @@
+---
+title: grid-auto-flow
+slug: Web/CSS/grid-auto-flow
+translation_of: Web/CSS/grid-auto-flow
+---
+<p>CSS-свойство управляет поведением автоматически размещаемых элементов, точно указывая, как они попадают в сетку.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Ключевые свойства и значения */
+grid-auto-flow: row;
+grid-auto-flow: column;
+grid-auto-flow: dense;
+grid-auto-flow: row dense;
+grid-auto-flow: column dense;
+
+/* Глобальные значения */
+grid-auto-flow: inherit;
+grid-auto-flow: initial;
+grid-auto-flow: unset;
+</pre>
+
+<p>Свойство можно использовать в двух вариантах:</p>
+
+<ul>
+ <li>с одним ключевым значением: <code>row</code>, <code>column</code>, или <code>dense</code>.</li>
+ <li>с двумя значениями: <code>row dense</code> или <code>column dense</code>.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>Ключевое слово, указывающее размещать элементы, заполняя поочередно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.</dd>
+ <dt><code>column</code></dt>
+ <dd>Ключевое слово, указывающее размещать элементы, заполняя поочередно каждый столбец и добавляя новые столбцы по мере необходимости.</dd>
+ <dt><code>dense</code></dt>
+ <dd>Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответсвии с размером.</dd>
+ <dd><br>
+ Если свойство не используется, алгоритм разместит элементы строго по порядку, вне зависимости от наличия свободных ячеек.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html notranslate">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+  &lt;div id="item4"&gt;&lt;/div&gt;
+  &lt;div id="item5"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="direction" onchange="changeGridAutoFlow()"&gt;
+  &lt;option value="column"&gt;column&lt;/option&gt;
+  &lt;option value="row"&gt;row&lt;/option&gt;
+&lt;/select&gt;
+&lt;input id="dense" type="checkbox" onchange="changeGridAutoFlow()"&gt;
+&lt;label for="dense"&gt;dense&lt;/label&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css; highlight[7] notranslate">#grid {
+  height: 200px;
+  width: 200px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
+  grid-auto-flow: column;  /* or 'row', 'row dense', 'column dense' */
+}
+
+#item1 {
+  background-color: lime;
+  grid-row-start: 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+#item4 {
+  grid-column-start: 2;
+  background-color: red;
+}
+
+#item5 {
+  background-color: aqua;
+}</pre>
+
+<pre class="brush: js; hidden notranslate">function changeGridAutoFlow() {
+  var grid = document.getElementById("grid");
+  var direction = document.getElementById("direction");
+  var dense = document.getElementById("dense");
+  var gridAutoFlow = direction.value === "row" ? "row" : "column";
+
+  if (dense.checked) {
+    gridAutoFlow += " dense";
+  }
+
+  grid.style.gridAutoFlow = gridAutoFlow;
+}</pre>
+
+<p>{{EmbedLiveSample("Пример", "200px", "230px")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("css.properties.grid-auto-flow")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></em></li>
+ <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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-gap/index.html b/files/ru/web/css/grid-gap/index.html
new file mode 100644
index 0000000000..b32f0c2410
--- /dev/null
+++ b/files/ru/web/css/grid-gap/index.html
@@ -0,0 +1,193 @@
+---
+title: grid-gap
+slug: Web/CSS/grid-gap
+translation_of: Web/CSS/gap
+---
+<p>{{Deprecated_Header}}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>. Свойство CSS с разделительной сеткой было переименовано в свойство prefix-less {{cssxref('gap')}}.</p>
+</div>
+
+<p>Свойство CSS <strong><code>grid-gap</code></strong> является сокращенным свойством для {{cssxref("grid-row-gap")}} и {{cssxref("grid-column-gap")}}, определяющего желоба между строками и столбцами сетки.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-gap.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* Одно &lt;length&gt; значение */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Одно &lt;percentage&gt; значение */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Два &lt;length&gt; значения */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Один или два &lt;percentage&gt; значения */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* calc() значения */
+grid-gap: calc(10% + 20px);
+grid-gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Глобальные значения */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+</pre>
+
+<p>Это свойство указывается как значение для <code>&lt;'grid-row-gap'&gt;</code> , за которым необязательно следует значение для <code>&lt;'grid-column-gap'&gt;</code>. Если <code>&lt;'grid-column-gap'&gt;</code> опущено, для него устанавливается то же значение, что и <code>&lt;'grid-row-gap'&gt;</code>.</p>
+
+<p>Каждое из свойств <code>&lt;'grid-row-gap'&gt;</code> и <code>&lt;'grid-column-gap'&gt;</code> указываются как <code>&lt;length&gt;</code> или <code>&lt;percentage&gt;</code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Ширина отступа, разделяющего линии сетки.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Ширина отступа, разделяющего линии сетки относительно размеров элемента.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML_Контент">HTML Контент</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Контент">CSS Контент</h3>
+
+<pre class="brush: css; highlight[5]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "200px")}}</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS3 Box Alignment", "#propdef-grid-gap", "grid-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Устарело в пользу <code><a href="/en-US/docs/Web/CSS/gap">gap</a></code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#gutters", "grid-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.grid-gap")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Prefixless CSS equivalents: {{cssxref("row-gap")}}, {{cssxref("column-gap")}}, {{cssxref("gap")}}</li>
+ <li>Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li>
+</ul>
+
+<section class="Quick_links" 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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html
new file mode 100644
index 0000000000..99db2ff61d
--- /dev/null
+++ b/files/ru/web/css/grid-row-start/index.html
@@ -0,0 +1,230 @@
+---
+title: grid-row-start
+slug: Web/CSS/grid-row-start
+translation_of: Web/CSS/grid-row-start
+---
+<p>Свойство CSS <strong><code>grid-row-start</code></strong> определяет начальную позицию элемента грид в строке, добавляя линию, span или ничего (автоматически) к его расположению в сетке, тем самым определяя начальный край inline-элемента его {{glossary("grid areas", "grid area")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-row-start: auto;
+
+/* &lt;custom-ident&gt; values */
+grid-row-start: somegridarea;
+
+/* &lt;integer&gt; + &lt;custom-ident&gt; values */
+grid-row-start: 2;
+grid-row-start: somegridarea 4;
+
+/* span + &lt;integer&gt; + &lt;custom-ident&gt; values */
+grid-row-start: span 3;
+grid-row-start: span somegridarea;
+grid-row-start: 5 somegridarea span;
+
+/* Global values */
+grid-row-start: inherit;
+grid-row-start: initial;
+grid-row-start: unset;
+</pre>
+
+<p>This property is specified as a single <code>&lt;grid-line&gt;</code> value. A <code>&lt;grid-line&gt;</code> value can be specified as:</p>
+
+<ul>
+ <li>either the <code>auto</code> keyword</li>
+ <li>or a <code>&lt;custom-ident&gt;</code> value</li>
+ <li>or an <code>&lt;integer&gt;</code> value</li>
+ <li>or both <code>&lt;custom-ident&gt;</code> and <code>&lt;integer&gt;</code>, separated by a space</li>
+ <li>or the keyword <code>span</code> together with either a <code>&lt;custom-ident&gt;</code> or an <code>&lt;integer&gt;</code> or both.</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Ключевое слово, указывающее, что свойство никак не влияет на размещение элемента сетки, обозначающее автоматическое размещение, автоматический диапазон или диапазон по умолчанию, равный 1.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>Если есть именованная строка с именем '&lt;custom-ident&gt;-start', он вносит первую такую ​​строку в размещение элемента сетки.</dd>
+ <dd>
+ <p class="note"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-row-start: foo;</code> will choose the start edge of that named grid area (unless another line named <code>foo-start</code> was explicitly specified before it).</p>
+
+ <p>В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <code>&lt;custom-ident&gt;</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конечного края явной сетки. Если имя задано как &lt;custom-<code>ident</code>&gt;, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.</dd>
+ <dd>
+ <p>An {{cssxref("integer")}} value of <code>0</code> is invalid.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Contributes a grid span to the grid item’s placement; such that the row start edge of the grid item’s grid area is n lines from the end edge.
+ <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid, corresponding to the search direction, are assumed to have that name for the purpose of counting this span.</p>
+
+ <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>
+
+ <p>The <code>&lt;custom-ident&gt;</code> cannot take the <code>span</code> value.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Examples', '230', '420') }}</p>
+
+
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row-start", "grid-row-start")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+
+
+<p>{{Compat("css.properties.grid-row-start")}}</p>
+
+
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..5717fa5842
--- /dev/null
+++ b/files/ru/web/css/grid-template-areas/index.html
@@ -0,0 +1,185 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+translation_of: Web/CSS/grid-template-areas
+---
+<p>CSS свойство <strong><code>grid-template-areas</code></strong> определяет название {{glossary("grid-области")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div>
+
+
+
+<p>Области не связаны с конкретным grid элементом, но можно ссылаться с grid-placement свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, and their shorthands {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-areas: none;
+
+/* &lt;string&gt; values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Контейнер не определяет никаких названий grid-области.</dd>
+ <dt><code>{{cssxref("&lt;string&gt;")}}+</code></dt>
+ <dd>Строка создается каждым переносом строки, тогда как каждая колонка создается в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создает одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-7]">#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page &gt; header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page &gt; nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page &gt; main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page &gt; footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Связанные CSS свойства: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
+
+<div id="gtx-trans" style="position: absolute; left: 536px; top: 42px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html
new file mode 100644
index 0000000000..f1d604ac39
--- /dev/null
+++ b/files/ru/web/css/grid-template-columns/index.html
@@ -0,0 +1,207 @@
+---
+title: grid-template-columns
+slug: Web/CSS/grid-template-columns
+tags:
+  - CSS Grid
+  - CSS сетка
+  - grid
+translation_of: Web/CSS/grid-template-columns
+---
+<p><span class="seoSummary">CSS свойство <strong><code>grid-template-columns</code></strong> определяет имена линий и функции гибкости линий. {{glossary("grid column", "grid columns")}}. Другими словами, задаёт количество столбцов "колонок" в сетке и может определять ширину каждой из них.</span></p>
+
+<p>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css notranslate">/* Keyword value */
+grid-template-columns: none;
+
+/* &lt;track-list&gt; values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* &lt;auto-track-list&gt; values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Это ключевое слово означает, что нет никакой явной сетки. Любые столбцы будут создаваться неявно, и их размер будет определяться свойством {{cssxref("grid-auto-columns")}} .</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Не-отрицательная длина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Не-отрицательное {{cssxref("percentage", "&lt;percentage&gt;")}} значение относительно встроенного контейнера сетки. Если размер сетки контейнера зависим от размера ряда элементов, то процент будет установлен автоматически.<br>
+ Ручное изменение размера элемента в процентах, приведёт к корректировочному изменению размера контейнера, и увеличит размер ряда на минимальную величину, необходимую для соблюдения процентного соотношения.  </dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd>Не-отрицательное значение с единицей измерения <code>fr</code>, которая строго определяет <em>flex фактор линий</em> (track’s flex factor, <em>фактор гибкости линий</em>). Каждая <code>&lt;flex&gt;</code>-размерная линия берёт оставшееся пространство пропорционально flex фактору.
+ <p>Когда из вне появляется <code>minmax()</code> , это предпологает автоматический минимум  (т.е. <code>minmax(auto, &lt;flex&gt;)</code>).</p>
+ </dd>
+ <dt id="max-content"><code>max-content</code></dt>
+ <dd>Ключевое слово обозначающее самый большой из максимальных контентов элементов расположенных в данном треке.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Ключевое слово обозначающее самый большой из минимальных контентов элементов расположенных в данном треке.</dd>
+ <dt><code>{{cssxref("minmax", "minmax(min, max)")}}</code></dt>
+ <dd>Функциональное обозначение, которое задает диапазон больший или равный <em>min</em> и меньший или равный <em>max</em>. Если <em>max</em> меньше чем <em>min</em>, тогда <em>max</em> игнорируется и эта функция рассматривается как <em>min</em>. Максимумом значение <code>&lt;flex&gt;</code> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>Это ключевое слово идентично <code>max-content</code>, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определен в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.</dd>
+ <dd>
+ <p class="note">Обратите внимание: Только <code>auto</code> размеры трека могут быть растянуты свойствами {{cssxref("align-content")}} и {{cssxref("justify-content")}}.</p>
+ </dd>
+ <dt id="fit-content()"><code>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</code></dt>
+ <dd>Представляет формулу <code>min(max-content, max(auto, <var>argument</var>))</code>, которая вычисляется подобно <code>auto</code> (т.е. <code>minmax(auto, max-content)</code>), за исключением того, что размер трека ограничивается <var>argument, если он больше минимума по</var> <code>auto</code>.</dd>
+ <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dd>Представляет собой повторяющийся фрагмент ряда элементов, позволяющий большому количеству колонок (по сути являющихся повторяющейся комбинацией), быть написанной в более компактном виде.</dd>
+ <dt><a href="/ru/docs/Web/CSS/CSS_Grid_Layout/Subgrid">subgrid</a></dt>
+ <dd>Значение <code><dfn>subgrid</dfn></code> означает, что сетка наследует часть родительской сетки, в которой располагается. Вместо явного определения, размеры сетки берутся из определения сетки родительского элемента.</dd>
+</dl>
+
+<div class="blockIndicator warning">
+<p>Значение subgrid определено во втором уровне спецификации Grid, и в текущий момент реализовано только в Firefox 71 и более поздних версиях.</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример", "100%", "20px")}}</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>Adds subgrid</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html
new file mode 100644
index 0000000000..7e61d9527e
--- /dev/null
+++ b/files/ru/web/css/grid-template-rows/index.html
@@ -0,0 +1,196 @@
+---
+title: grid-template-rows
+slug: Web/CSS/grid-template-rows
+translation_of: Web/CSS/grid-template-rows
+---
+<p class="summary"><span class="seoSummary"><code>grid-template-rows</code> </span>— это<span class="seoSummary">CSS свойство, </span> которое определяет названия линий и путь размера функции <span class="seoSummary"> {{glossary("grid rows", "grid rows")}}.</span></p>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-rows: none;
+
+/* &lt;track-list&gt; values */
+grid-template-rows: 100px 1fr;
+grid-template-rows: [linename] 100px;
+grid-template-rows: [linename1] 100px [linename2 linename3];
+grid-template-rows: minmax(100px, 1fr);
+grid-template-rows: fit-content(40%);
+grid-template-rows: repeat(3, 200px);
+
+/* &lt;auto-track-list&gt; values */
+grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
+grid-template-rows: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-rows: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-rows: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-rows: inherit;
+grid-template-rows: initial;
+grid-template-rows: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Это свойство может быть указано как:</p>
+
+<ul>
+ <li>либо с помощью ключегого слова: <code>none</code></li>
+ <li>или значением <code>&lt;track-list&gt;</code> ,</li>
+ <li>или значением <code>&lt;auto-track-list&gt;</code> .</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Ключевое слово, обозначающее, что явной сетки нет. Любые строки будут сгенерированны неявно, а их размер будет определяться свойством: {{cssxref("grid-auto-rows")}} .</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Неотрицательное значение размера.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Неотрицательное значение {{cssxref("percentage", "&lt;percentage&gt;")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как <code>auto</code>. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учету процента.</dd>
+ <dd><br>
+ <strong>{{cssxref("&lt;flex_value&gt;","&lt;flex&gt;")}}</strong><br>
+ Is a non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, &lt;flex&gt;)</code>).</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.</dd>
+ <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dd>Это CSS функция, определяющая диапазон размеров, который больше или равен <var>min</var> и меньше или равен <var>max</var>. Если <em>max</em> меньше чем <em>min</em>, то <em>max</em> игнорируется и функция обрабатывается как <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track’s flex factor. It is invalid as a minimum.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd>
+ <dd>
+ <p class="note">Note: <code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.</p>
+ </dd>
+ <dt>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
+ <dd>Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</dd>
+ <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dd>Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-rows: 30px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "40px", "100px")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html
new file mode 100644
index 0000000000..72a79c9131
--- /dev/null
+++ b/files/ru/web/css/grid/index.html
@@ -0,0 +1,247 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - CSS свойства
+  - CSS сетка
+  - Ссылки
+translation_of: Web/CSS/grid
+---
+<h2 id="Общие_сведения">Общие сведения</h2>
+
+<p>Свойство CSS <strong><code>grid</code></strong> является сокращенной формой записи, которая  устанавливает значения для всех явных свойств сетки  (grid)  ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}},  и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.</p>
+
+<p class="note"><strong>Note:</strong> В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращенных формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращенной формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установленны в сокращенной форме записи.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* &lt;'grid-template'&gt; значения*/
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* &lt;'grid-template-rows'&gt; /
+   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
+   &lt;'grid-template-columns'&gt; values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;'grid-template'&gt;</code></dt>
+ <dd>Определяет {{cssxref("grid-template")}} (шаблон сетки) включая {{cssxref("grid-template-columns")}} (столбцы), {{cssxref("grid-template-rows")}}  (ряды) и {{cssxref("grid-template-areas")}} (области).</dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;?</code></dt>
+ <dd>Устанавливает auto-flow явно задавая  размещение по рядам с помощью  свойства {{cssxref("grid-template-rows")}} (и устанавливая свойство {{cssxref("grid-template-columns")}} в значение <code>none</code>) и уточняет, как должно работать авто-повторение столбцов при помощи свойства {{cssxref("grid-auto-columns")}} (и устанавливая {{cssxref("grid-auto-rows")}} в значение <code>auto</code>). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для столбцев со свойством <code>dense</code> если оно определено.</dd>
+ <dd>
+ <p>Все остальные подсвойства grid сбрасываются в их начальные значения .</p>
+ </dd>
+ <dt><code>[ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd>Устанавливает auto-flow явно задавая  размещение по столбцам с помощью  свойства {{cssxref("grid-template-columns")}} (и устанавливая свойство {{cssxref("grid-template-rows")}} в значение <code>none</code>) и уточняет, как должно работать авто-повторение рядов при помощи свойства {{cssxref("grid-auto-rows")}} (и устанавливая {{cssxref("grid-auto-columns")}} в значение <code>auto</code>). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для рядов со свойством <code>dense</code> если оно определено.
+ <p>Все остальные подсвойства grid сбрасываются в их начальные значения .</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 150)}}</p>
+
+<h2 id="Спецификация">Спецификация</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("CSS3 Grid", "#propdef-grid", "grid")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOpera(44)}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOperaMobile}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Реализован до  функциональных возможностей экспериментальной веб-платформы в <code>chrome://flags начиная </code>с Chrome 29.0.</p>
+
+<p>[2] Реализован за преимуществом <code>layout.css.grid.enabled</code> начиная с Gecko 40.0 {{geckoRelease("40.0")}}, имея значение по умолчанию <code>false</code>. Начиная с  Gecko 52.0 включено по умолчанию.</p>
+
+<p>[3] Internet Explorer и Edge реализуют <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">старую версию спецификации</a>, которая не поддерживает сокращенную форму записи <code>grid. Смотри </code><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">request for updating the implementation</a>.</p>
+
+<p>[4] Реализован до  функциональных возможностей экспериментальной веб-платформы в <code>chrome://flags</code> начиная с Opera 28.0.</p>
+
+<p>[5] Экспериментальная реализация доступна в Safari Technological Preview.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Звязанные свойства CSS: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
+ <li>Руководство по разметке сетки: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Руководства</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Свойства</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Глоссарий</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/hanging-punctuation/index.html b/files/ru/web/css/hanging-punctuation/index.html
new file mode 100644
index 0000000000..fe8ed1a6a4
--- /dev/null
+++ b/files/ru/web/css/hanging-punctuation/index.html
@@ -0,0 +1,117 @@
+---
+title: hanging-punctuation
+slug: Web/CSS/hanging-punctuation
+tags:
+  - CSS
+translation_of: Web/CSS/hanging-punctuation
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">Свойство <strong><code>hanging-punctuation</code></strong> определяет как браузер будет отображать знаки пунктуации, попадающие в начало или в конец строки. Висячая пунктуация может располагаться за границами контейнера. </span></p>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевых слов */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* Два ключевых слова */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* Три ключевых слова */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* Общие значения */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>hanging-punctuation</code>  может быть определено с помощью одного, двух или трех ключевых слов.</p>
+
+<ul>
+ <li>Для <strong>одного значения</strong> может быть использовано любое из описанных ниже значений.</li>
+ <li>Для <strong>двух значений</strong> используются следующие варианты:
+  <ul>
+   <li><code>first</code> вместе с одним из <code>last</code>, <code>allow-end</code> или <code>force-end</code></li>
+   <li><code>last</code> вместе с одним из <code>first</code>, <code>allow-end</code> или <code>force-end</code></li>
+  </ul>
+ </li>
+ <li>Для <strong>трех значений</strong> используются один из следующих вариантов:
+  <ul>
+   <li><code>first</code>, <code>allow-end</code> и <code>last</code></li>
+   <li><code>first</code>, <code>force-end</code> и <code>last</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Никакие символы не выносятся.</dd>
+ <dt><code>first</code></dt>
+ <dd>Открывающая скобка или кавычка в начале первой строки выровненного элемента будет вынесена.</dd>
+ <dt><code>last</code></dt>
+ <dd>Закрывающая скобка или кавычка последней строки выровненного элемента будет вынесена.</dd>
+ <dt><code>force-end</code></dt>
+ <dd>Точка или запятая в конце строки выносится.</dd>
+ <dt><code>allow-end</code></dt>
+ <dd>Точка или запятая в конце строки будет вынесена, если нет лучшего варианта для выравнивания.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html" style="white-space: pre-wrap;">&lt;p&gt;“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  hanging-punctuation: first last;
+  margin: .5rem;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Text", "#hanging-punctuation-property", "hanging-punctuation")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости была сформирована из структурированных данных. Если вы хотите уточнить информацию, пожалуйста, склонируйте репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-реквест.</div>
+
+<p>{{Compat("css.properties.hanging-punctuation")}}</p>
diff --git a/files/ru/web/css/height/index.html b/files/ru/web/css/height/index.html
new file mode 100644
index 0000000000..f1c79b7501
--- /dev/null
+++ b/files/ru/web/css/height/index.html
@@ -0,0 +1,175 @@
+---
+title: height
+slug: Web/CSS/height
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS атрибут <strong><code>height</code></strong> позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту <a href="/ru/docs/Web/CSS/box_model#content">внутренней области</a>. Если {{cssxref("box-sizing")}} имеет значение <code>border-box</code>, то свойство будет определять высоту <a href="/ru/docs/Web/CSS/box_model#border">области рамки</a>.<br>
+ <br>
+ {{EmbedInteractiveExample("pages/css/height.html")}}</p>
+
+<div class="hidden">
+<p>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+</div>
+
+<p><br>
+ Атрибуты {{cssxref("min-height")}} и {{cssxref("max-height")}} при добавлении меняют значение {{Cssxref("height")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Значения-ключевые слова */
+height: auto;
+
+/* &lt;length&gt; значения */
+height: 120px;
+height: 10em;
+
+/* &lt;percentage&gt; значения */
+height: 75%;
+
+/* Глобальные значения */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Высота - фиксированная величина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Высота в процентах - размер относительно высоты родительского блока.</dd>
+ <dt><code>border-box</code> {{experimental_inline}}</dt>
+ <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} применяются к области рамки элемента.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} применяются к внутренней области элемента.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер рассчитает и выберет высоту для указанного элемента.</dd>
+ <dt><code>fill</code> {{experimental_inline}}</dt>
+ <dd>Использует <code>fill-available</code> размер строки или <code>fill-available</code> размер блока, в зависимости от способа разметки.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>Внутренняя максимальная предпочтительная высота.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>Внутренняя минимальная предпочтительная высота.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>Высота содержащего блока минус вертикальные <code>margin</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">border</span></font> и <code>padding</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Наибольшее из:
+ <ul>
+  <li>внутренняя минимальная высота</li>
+  <li>меньшая из внутренней предпочтительной высоты и доступной высоты</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример:</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre><code>&lt;div id="taller"&gt;Я 50 пикселей в высоту.&lt;/div&gt;
+&lt;div id="shorter"&gt;Я 25 пикселей в высоту.&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    Моя высота - половина от высоты родителя.
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre><code>div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}</code></pre>
+
+<p> </p>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 240)}}</p>
+
+<p> </p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь, что элементы с <code>height</code> не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста. </p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>height</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Добавляет поддержку значений {{cssxref("&lt;length&gt;")}} и уточняет, к какому элементу применяется.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</p>
+</div>
+
+<p>{{Compat("css.properties.height")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/box_model">Блочная модель</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html
new file mode 100644
index 0000000000..c6dc229c74
--- /dev/null
+++ b/files/ru/web/css/hyphens/index.html
@@ -0,0 +1,153 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+translation_of: Web/CSS/hyphens
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>hyphens</code></strong> указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк.</span> Оно может полность запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p>Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code>, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут <code><a href="/en-US/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.</p>
+</div>
+
+<h2 id="Синтаксис"><font><font>Синтаксис</font></font></h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Global values */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+</pre>
+
+<p>Свойство <code>hyphens</code> задаётся как одно из ключевых значений, выбранного из списка ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.</dd>
+ <dt><code>manual</code></dt>
+ <dd>Слова разрываются при переносе строки только там, где символы внутри слов указывают точки разрыва. Подробнее смотреть ниже  {{anch("Предлагаемые возможности разрыва строки")}}.</dd>
+ <dt><code>auto</code></dt>
+ <dd><font>Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. </font><font>Однако предлагаемые возможности разрыва строки </font>(смотреть {{anch("Предлагаемые возможности разрыва строки")}} ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Поведение параметра <code>auto</code> зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута  <code>lang</code>, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.</p>
+</div>
+
+<h2 id="Предлагаемые_возможности_разрыва_строки">Предлагаемые возможности разрыва строки</h2>
+
+<p>Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:</p>
+
+<dl>
+ <dt>U+2010 (HYPHEN)</dt>
+ <dd><font>«Жесткий» дефис указывает на возможность видимого разрыва строки. </font><font>Даже если строка в этом месте не переносится, дефис все равно отображается.</font></dd>
+ <dt>U+00AD (SHY)</dt>
+ <dd>Невидимый <font>«</font>мягкий<font>»</font> перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте <code>&amp;shy;</code> для вставки мягкого дефиса.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>Когда HTML элемент <code><a href="/en-US/docs/Web/HTML/Element/wbr">&lt;wbr&gt;</a></code> приводит к разрыву строки, дефис не добавляется.</p>
+</div>
+
+<h2 id="Формальное_определение"><font><font>Формальное определение</font></font></h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Формальный_синтаксис"><font><font>Формальный синтаксис</font></font></h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры"><font><font>Примеры</font></font></h2>
+
+<h3 id="Указание_переносов_текста">Указание переносов текста</h3>
+
+<p><font><font>В этом примере используются три класса, по одному для каждой возможной конфигурации свойства </font></font><code>hyphens</code><font><font>.</font></font></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;&lt;code&gt;none&lt;/code&gt;: no hyphen; overflow if needed&lt;/dt&gt;
+  &lt;dd lang="en" class="none"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+  &lt;dt&gt;&lt;code&gt;manual&lt;/code&gt;: hyphen only at &amp;amp;hyphen; or &amp;amp;shy; (if needed)&lt;/dt&gt;
+  &lt;dd lang="en" class="manual"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+  &lt;dt&gt;&lt;code&gt;auto&lt;/code&gt;: hyphens where the algorithm decides (if needed)&lt;/dt&gt;
+  &lt;dd lang="en" class="auto"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">dd {
+  width: 55px;
+  border: 1px solid black;
+ }
+dd.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+dd.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+dd.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+</pre>
+
+<h4 id="Результат"><font><font>Результат</font></font></h4>
+
+<figure>
+<p>{{EmbedLiveSample("Specifying_text_hyphenation", "100%", 490)}}</p>
+</figure>
+
+<h2 id="Характеристики"><font><font>Характеристики</font></font></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("CSS3 Text", "#hyphens-property", "hyphens")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером"><font><font>Совместимость с браузером</font></font></h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.hyphens")}}</p>
+</div>
+
+<h2 id="Смотрите_также"><font><font>Смотрите также</font></font></h2>
+
+<ul>
+ <li>{{Cssxref("content")}}</li>
+ <li>{{cssxref("overflow-wrap")}} (formerly <code>word-wrap</code>)</li>
+ <li>{{cssxref("word-break")}}</li>
+</ul>
diff --git a/files/ru/web/css/id_selectors/index.html b/files/ru/web/css/id_selectors/index.html
new file mode 100644
index 0000000000..f8a61526dc
--- /dev/null
+++ b/files/ru/web/css/id_selectors/index.html
@@ -0,0 +1,117 @@
+---
+title: Селекторы по ID
+slug: Web/CSS/ID_selectors
+translation_of: Web/CSS/ID_selectors
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Краткое описание</h2>
+
+<p>В HTML-документах CSS-селекторы по ID производят выборку всех элементов по ID, полностью совпадающих с селектором.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">#id_value { <em>style properties</em> }</pre>
+
+<p>То же самое  — {{ Cssxref("Attribute_selectors", "селектор по атрибутам") }}:</p>
+
+<pre class="syntaxbox">[id=id_value] { <em>style properties</em> }</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">span#identified {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<pre class="brush: html">&lt;span id="identified"&gt;Тут span с каким-то текстом.&lt;/span&gt;
+&lt;span&gt;Здесь тоже span.&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 50) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table style="font-size: 14px; font-weight: normal; line-height: 1.5;">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#id-selectors', 'ID selectors') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#id-selectors', 'ID selectors') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#id-selectors', 'ID selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#id-as-selector', 'ID selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html
new file mode 100644
index 0000000000..f837d98a4b
--- /dev/null
+++ b/files/ru/web/css/image-set()/index.html
@@ -0,0 +1,78 @@
+---
+title: image-set()
+slug: Web/CSS/image-set()
+translation_of: Web/CSS/image-set()
+---
+<div>{{cssref}}</div>
+
+<p class="summary">CSS функция <code>image-set()</code> это способ позволить браузеру выбрать наиболее подходящее изображение CSS из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.</p>
+
+<p>Разрешение экрана и пропускная способность могут отличаться в зависимости от устройства и доступа к сети. Функция <code>image-set()</code>  обеспечивает наиболее подходящее разрешение изображения для устройства пользователя, предоставляя набор параметров изображения — каждый с соответствующим объявлением разрешения — из которых браузер выбирает наиболее подходящее для устройства и настроек. Разрешение может использоваться в качестве прокси для размера файла — клиент на медленном мобильном соединении с экраном высокого разрешения может предпочесть получать изображения с более низким разрешением, а не ждать загрузки изображения с более высоким разрешением.</p>
+
+<p><code>image-set()</code> позволяет автору предоставлять параметры, а не определять, что нужно каждому отдельному пользователю.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
+где &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; и
+      &lt;string&gt; в качестве &lt;url&gt;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Чаще всего вы можете увидеть значение <code>url()</code> как <code>&lt;string&gt;</code>, но <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> может быть любым типом изображения, кроме набора изображений. Функция <code>image-set()</code> не может быть вложена в другую функцию <code>image-set()</code>.</p>
+
+<p>Блоки <code><a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> включают в себя <code>x</code> или <code>ddpx,</code> для точек на пиксель, <code>dpi</code> для точек на дюйм, и <code>dpcm</code> для точек на сантиметр. Каждое изображение в наборе <code>image-set()</code> должно иметь уникальное разрешение.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x,
+                             "cat-2x.png" 2x,
+                             "cat-print.png" 600dpi);</pre>
+
+<p>Этот пример демонстрирует использование <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> для обеспечения двух альтернативных {{cssxref("background-image")}} свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.</p>
+
+<h2 id="Вопросы_доступности">Вопросы доступности</h2>
+
+<p>Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своем присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать ее семантически в документе.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.image.image-set")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("image")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("element")}}</li>
+ <li>{{cssxref("url")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ru/web/css/index.html b/files/ru/web/css/index.html
new file mode 100644
index 0000000000..128ae1fda3
--- /dev/null
+++ b/files/ru/web/css/index.html
@@ -0,0 +1,73 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Landing
+  - Layout
+  - Learning
+  - Reference
+  - Référence(2)
+  - Верстка
+  - Главная
+  - Дизайн
+  - Справка
+  - Стиль
+translation_of: Web/CSS
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) — это язык иерархических правил (<a href="/ru/docs/DOM/stylesheet">таблиц стилей</a>), используемый для представления внешнего вида документа, написанного на <a href="/ru/docs/HTML" title="The HyperText Mark-up Language">HTML</a> или <a href="/ru/docs/XML" title="ru/docs/XML">XML</a> (включая различные языки XML, такие как <a href="/ru/docs/SVG">SVG</a> и <a href="/ru/docs/XHTML">XHTML</a>). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.</span></p>
+
+<p><strong>CSS</strong> является одним из основных языков <em>свободной веб-разработки,</em> который стандартизован <a class="external" href="http://w3.org/Style/CSS/#specs">спецификацией W3C</a>. Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а <a href="/ru/docs/CSS/CSS3" title="CSS3">CSS3</a>, разбитый на более мелкие модули, развивается на пути стандартизации.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>Справочник по CSS</span>
+
+  <p><a href="/ru/docs/Web/CSS/Reference" title="ru/docs/CSS/CSS_Reference">Исчерпывающий справочник</a> для опытных веб-разработчиков, описывающий каждое свойство и понятие CSS.</p>
+ </li>
+ <li><span>Самоучитель по CSS</span>
+  <p><a href="/Learn/CSS/Introduction_to_CSS" title="ru/docs/CSS/Getting_Started">Пошаговое руководство</a> для помощи начинающим программистам CSS. Содержит все необходимые основы.</p>
+ </li>
+ <li><span>Примеры CSS3</span>
+  <p><a href="/ru/demos/tag/tech:css3" title="https://developer.mozilla.org/ru/demos/tag/tech:css3">Набор примеров</a> представляющий новейшие технологии CSS в действии: толчок к креативности.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Документация и самоучители</h2>
+
+<dl>
+ <dt>Ключевые понятия CSS</dt>
+ <dd>Описание <a href="/ru/docs/CSS/Syntax">синтаксиса и внешнего вида языка</a> и введение в фундаментальные понятия такие как <a href="/ru/docs/CSS/Specificity">специфичность</a>, <a href="/ru/docs/CSS/inheritance">наследование(каскадирование)</a>, блочная модель(<a href="/ru/docs//ru/docs/CSS/box_model">box-model</a>) и схлопывание отступов(<a href="/ru/docs/CSS/margin_collapsing">margin-collapse</a>), <a href="/ru/docs/CSS/Understanding_z-index/The_stacking_context">наложение</a> и контекст форматирования(<a href="/ru/docs/CSS/block_formatting_context">Block formatting context</a>), начальное(<a href="/ru/docs/CSS/initial_value">initial</a>), вычисленное(<a href="/ru/docs/CSS/computed_value">computed</a>), используемое(<a href="/ru/docs/CSS/used_value">used</a>) и актуальное(<a href="/ru/docs/CSS/actual_value">actual</a>) значения. Кроме того, описана <a href="/ru/docs/CSS/Shorthand_properties">краткая форма записи</a> свойств CSS.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS">Руководство разработчика CSS</a></dt>
+ <dd>Статьи, которые помогут вам узнать все: начиная от основ организации стилей в HTML, заканчивая различными методами языка CSS, чтобы сделать свой контент сияющим.</dd>
+ <dt><a href="/ru/docs/Web/CSS/Common_CSS_Questions">Распространённые вопросы по CSS</a></dt>
+ <dd>Ответы на часто возникающие вопросы о <strong>CSS</strong>.</dd>
+</dl>
+</div>
+
+<h2 class="Tools" id="Tools" name="Tools">Инструменты для разработки CSS</h2>
+
+<ul>
+ <li><a class="external" href="http://jigsaw.w3.org/css-validator/">Служба проверки W3C CSS</a> проверяет правильность работы вашего CSS кода. Служба <a href="//www.OnlineWebCheck.com/">OnlineWebCheck.com</a> делает то же самое. Это отличные инструменты для отладки.</li>
+ <li><a href="/ru/docs/Tools">Инструменты разработчика Firefox</a> позволяют рассматривать и изменять "на лету" CSS страницы с помощью инструментов <a href="/ru/docs/Tools/Page_Inspector">Инспектор</a> и <a href="/ru/docs/Tools/Style_Editor">Редактор таблиц стилей</a>.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/ru/firefox/addon/1843">Расширение Firebug</a> для Firefox, популярное расширение для этого браузера, которое также позволяет редактировать "на лету" CSS код при просмотре сайтов. Помогает легко тестировать работу кода при внесении различных изменений. Помимо этого, <span class="short_text" id="result_box" lang="ru"><span class="hps">расширение</span> имеет другие полезные функции.</span></li>
+ <li><a class="link-https" href="https://addons.mozilla.org/ru/firefox/addon/60">Расширение Web Developer</a> для Firefox позволяет отслеживать и изменять "на лету" CSS код на просматриваемых сайтах. Проще чем Firebug, но обладает меньшим функционалом.</li>
+ <li><a href="/en-US/docs/Web/CSS/Tools">Прочие инструменты CSS.</a></li>
+</ul>
+</div>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Смотрите также</h2>
+
+<ul>
+ <li>Изучение <a href="/ru/docs/Learn/CSS" title="/ru/docs/Learn/CSS">CSS</a> от Mozilla.</li>
+ <li>Веб-языки для которых часто применяется CSS: <a href="/ru/docs/HTML" title="ru/docs/HTML">HTML</a>, <a href="/ru/docs/Web/SVG" title="SVG">SVG</a>, <a href="/ru/docs/XHTML" title="ru/docs/XHTML">XHTML</a>, <a href="/ru/docs/XML" title="ru/docs/XML">XML</a>.</li>
+ <li>Технологии Mozilla, широко использующие CSS: <a href="/ru/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/ru/Firefox">Firefox</a>, а также <a href="/ru/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/ru/docs/Extensions">расширения</a> и <a href="/ru/Add-ons/Themes">темы</a>.</li>
+</ul>
+</section>
diff --git a/files/ru/web/css/inherit/index.html b/files/ru/web/css/inherit/index.html
new file mode 100644
index 0000000000..5304dc4d9d
--- /dev/null
+++ b/files/ru/web/css/inherit/index.html
@@ -0,0 +1,87 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - CSS Cascade
+  - CSS Value
+  - Cascade
+  - Inheritance
+  - Layout
+  - Reference
+  - Style
+  - inherit
+  - Справка
+translation_of: Web/CSS/inherit
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Ключевое слово <strong> <code>inherit</code></strong> (CSS) вынуждает элемент использовать <a href="/ru/docs/Web/CSS/computed_value">вычисленное значение</a> аналогичного свойства родительского элемента.</span> Это может быть применено к любому свойству CSS, включая CSS свойство {{cssxref("all")}}.</p>
+
+<p>Для <a href="/ru/docs/Web/CSS/inheritance" title="ru/docs/Web/CSS/inheritance">наследуемых свойств</a>, это усиливает поведение по умолчанию и требуется только для переопределения другого правила. Для <a href="/ru/docs/Web/CSS/inheritance" title="/ru/docs/Web/CSS/inheritance">ненаследуемых свойств</a>, это указывает на поведение, которое обычно имеет относительно мало смысла, и вы можете рассмотреть возможность использовать вместо него {{cssxref("initial")}} или {{cssxref("unset")}} со свойством {{cssxref("all")}}.</p>
+
+<p><span id="result_box" lang="ru"><span>Наследование происходит всегда от родительского элемента в дереве документов, даже если родительский элемент не является содержащим блоком.</span></span></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css">/* Делает заголовки второго уровня зелеными */
+h2 { color: green; }
+
+/* ...но не делает зелеными элементы боковой панели, которые используют цвет своего родителя */
+#sidebar h2 { color: inherit; }
+</pre>
+
+<p>В этом примере элементы <code> h2 внутри боковой панели могут быть разных цветов. Например, если один из них был дочерним элементом div, соответствующим правилу ...</code></p>
+
+<pre class="brush: css"><code>
+div#current { color: blue; }
+</code></pre>
+
+<p><code>... </code><span class="short_text" id="result_box" lang="ru"><span>он был бы синим</span></span><code>.</code></p>
+
+<h2 id="Спецификации"><code>Спецификации</code></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>Спецификация</code></th>
+   <th><code>Статус</code></th>
+   <th><code>Комментарии</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{ SpecName('CSS4 Cascade', '#inherit', 'inherit') }}</code></td>
+   <td><code>{{Spec2('CSS4 Cascade')}}</code></td>
+   <td><code>Нет изменений с уровня 3.</code></td>
+  </tr>
+  <tr>
+   <td><code>{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}</code></td>
+   <td><code>{{ Spec2('CSS3 Values') }}</code></td>
+   <td><code>Никаких существенных изменений с {{ SpecName('CSS2.1') }}.</code></td>
+  </tr>
+  <tr>
+   <td><code>{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}</code></td>
+   <td><code>{{ Spec2('CSS2.1') }}</code></td>
+   <td><code>Начальное определение.</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.types.global_keywords.inherit")}}</p>
+</div>
+
+<h2 id="Смотрите_также"><code>Смотрите также</code></h2>
+
+<ul>
+ <li><code><a class="internal" href="/ru/docs/Web/CSS/inheritance" title="/ru/docs/Web/CSS/inheritance">Наследование</a></code></li>
+ <li><code>Используйте {{cssxref("initial")}}, чтобы установить свойство в его начальное значение.</code></li>
+ <li><code>Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.</code></li>
+ <li><code>Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).</code></li>
+ <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.</code></li>
+</ul>
diff --git a/files/ru/web/css/inheritance/index.html b/files/ru/web/css/inheritance/index.html
new file mode 100644
index 0000000000..210b467c6d
--- /dev/null
+++ b/files/ru/web/css/inheritance/index.html
@@ -0,0 +1,48 @@
+---
+title: Наследование
+slug: Web/CSS/inheritance
+translation_of: Web/CSS/inheritance
+---
+<h2 id="Описание">Описание</h2>
+
+<p>Описание каждого <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">CSS свойства</a> говорит наследуется ли оно по-умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.</p>
+
+<h2 id="Inherited_properties" name="Inherited_properties">Наследуемые свойства</h2>
+
+<p>Когда никакого значения для <strong>свойства, которое наследуется</strong>,  у элемента не установлено, элемент получает <a href="/ru/docs/Web/CSS/computed_value" title="en/CSS/computed_value">вычисленное значение</a> этого свойства от его родителя. Только корневой элемент документа получает <a href="/ru/docs/Web/CSS/initial_value" title="en/CSS/initial_value">начальное значение</a> из описания свойства.</p>
+
+<p>Типичный пример наследуемого свойства {{ Cssxref("color") }}. Стили:</p>
+
+<pre class="brush: css">p { color: green }</pre>
+
+<p>и разметка:</p>
+
+<pre class="brush: html">&lt;p&gt;В этом параграфе &lt;em&gt;подчёркнутый текст&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<p>слова "подчёркнутый текст" станут зелёными, т.к. тег <code>em</code> унаследовал значение свойства {{ Cssxref("color") }} от элемента <code>p, </code>а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).</p>
+
+<h2 id="Non-inherited_properties" name="Non-inherited_properties">Ненаследуемые свойства</h2>
+
+<p>Когда значения <strong>свойства </strong>элемента, которое<strong> не наследуется</strong>, не указано(иногда называемое Mozilla - <strong>сброшенное свойство</strong>), элемент получает <a href="/ru/docs/Web/CSS/initial_value" title="en/CSS/initial_value">начальное значение</a> этого свойства (как указано в описании свойства).</p>
+
+<p>Пример ненаследуемого свойства {{ Cssxref("border") }}. Стили:</p>
+
+<pre class="brush: css"> p { border: medium solid }</pre>
+
+<p>и разметка:</p>
+
+<pre class="brush: html">  &lt;p&gt;В этом параграфе &lt;em&gt;подчёркнутый текст&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<p>у слов "подчёркнутый текст" не будет рамки (т.к. начальное значение {{ Cssxref("border-style") }}:<code>none</code>).</p>
+
+<h2 id="Notes" name="Notes">Замечание</h2>
+
+<p>Ключевое слово {{ Cssxref("inherit") }} позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.</p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference" title="CSS Reference">CSS документация</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>{{ Cssxref("inherit") }}</li>
+</ul>
diff --git a/files/ru/web/css/initial/index.html b/files/ru/web/css/initial/index.html
new file mode 100644
index 0000000000..e4f1e9c456
--- /dev/null
+++ b/files/ru/web/css/initial/index.html
@@ -0,0 +1,83 @@
+---
+title: initial
+slug: Web/CSS/initial
+tags:
+  - CSS
+  - CSS Cascade
+  - CSS Value
+  - Default state
+  - Initial state
+  - Layout
+  - Reference
+  - initial
+  - Справка
+translation_of: Web/CSS/initial
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Ключевое слово <strong><code>initial</code></strong> (CSS) устанавливает свойство элемента в <a href="/ru/docs/Web/CSS/initial_value">начальное (или по умолчанию) значение</a>. Это может быть применимо к любому свойству CSS.</span> Это относится также к CSS свойству {{cssxref("all")}}, с которым <code>initial</code> может быть использовано для восcтановления всех CSS свойств до их начальных значений.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> На <a href="/ru/docs/Web/CSS/inheritance#Inherited_properties">наследуемые свойства</a> действие значения initial может быть непредвиденным. Вы должны рассмотреть возможность использования ключевых слов {{cssxref("inherit")}}, {{cssxref("unset")}} или {{cssxref("revert")}} вместо него.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;span&gt;This text is red.&lt;/span&gt;
+  &lt;em&gt;This text is in the initial color (typically black).&lt;/em&gt;
+  &lt;span&gt;This is red again.&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  color: red;
+}
+
+em {
+  color: initial;
+}</pre>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Нет изменений с уровня 3.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.types.global_keywords.initial")}}</p>
+
+<h2 id="Смотрите также" name="Смотрите также">Смотрите также</h2>
+
+<ul>
+ <li><code>Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.</code></li>
+ <li><code>Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).</code></li>
+ <li>Используйте свойство {{cssxref("inherit")}}, чтобы установить свойство элемента таким же значением, как у его родителя.</li>
+ <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.</code></li>
+</ul>
diff --git a/files/ru/web/css/initial_value/index.html b/files/ru/web/css/initial_value/index.html
new file mode 100644
index 0000000000..0fee2e018f
--- /dev/null
+++ b/files/ru/web/css/initial_value/index.html
@@ -0,0 +1,22 @@
+---
+title: Начальное значение
+slug: Web/CSS/initial_value
+translation_of: Web/CSS/initial_value
+---
+<h2 id="Описание">Описание</h2>
+
+<p><strong>Начальное значение</strong>, данное в кратком описании <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">каждого CSS свойства</a> имеет различное значение для <a href="/ru/docs/Web/CSS/inheritance" title="en/CSS/inheritance">наследуемых и не наследуемых свойств</a>.</p>
+
+<p>Для <a href="/ru/docs/Web/CSS/inheritance#Inherited_properties" title="en/CSS/inheritance#Inherited_properties">наследуемых</a>, начальное значение установлено <strong>только</strong> для корневого элемента, если не указано никакого значения для элемента.</p>
+
+<p>Для <a href="/ru/docs/Web/CSS/inheritance#Non-inherited_properties" title="en/CSS/inheritance#Non-inherited_properties">ненаследуемых свойств</a> используется начальное значение для <strong>любого</strong> элемента, даже когда значение для элемента не указано.</p>
+
+<p>Ключевое слово <code><a href="/ru/docs/Web/CSS/initial" title="en/CSS/initial">initial</a></code> добавлено в CSS3, чтобы предоставить авторам возможность явно указывать это первоначальное значение.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference" title="CSS Reference">CSS документация</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li><code><a href="/ru/docs/Web/CSS/initial" title="en/CSS/initial">initial</a></code></li>
+</ul>
diff --git a/files/ru/web/css/inline-size/index.html b/files/ru/web/css/inline-size/index.html
new file mode 100644
index 0000000000..69829347df
--- /dev/null
+++ b/files/ru/web/css/inline-size/index.html
@@ -0,0 +1,100 @@
+---
+title: inline-size
+slug: Web/CSS/inline-size
+translation_of: Web/CSS/inline-size
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inline-size</code></strong> определяет горизонтальные или вертикальные размеры блока в зависимости от режима написания (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от свойства {{cssxref("writing-mode")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; values */
+inline-size: 300px;
+inline-size: 25em;
+
+/* &lt;percentage&gt; values */
+inline-size: 75%;
+
+/* Keyword values */
+inline-size: max-content;
+inline-size: min-content;
+inline-size: fit-content(20em);
+inline-size: auto;
+
+/* Global values */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+</pre>
+
+<p>Если режим написания (writing mode) — вертикальный, значение <code>inline-size</code> относится к высоте элемента; в противном случае, оно относиться к ширине элемента. Связанное свойство — {{cssxref("block-size")}}, которое определяет другие размеры элемента.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство <code>inline-size</code> принимает те же значения, что и свойства {{cssxref("width")}} и {{cssxref("height")}}.</p>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Setting_inline_size_in_pixels">Setting inline size in pixels</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Setting_inline_size_in_pixels")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inline-size", "inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility </h2>
+
+
+
+<p>{{Compat("css.properties.inline-size")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The mapped physical properties: {{cssxref("width")}} and {{cssxref("height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/inset/index.html b/files/ru/web/css/inset/index.html
new file mode 100644
index 0000000000..a6d25722ca
--- /dev/null
+++ b/files/ru/web/css/inset/index.html
@@ -0,0 +1,98 @@
+---
+title: inset
+slug: Web/CSS/inset
+tags:
+  - смещение элемента
+translation_of: Web/CSS/inset
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Свойство <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset</code></strong> определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам  {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определенных для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значения */
+inset: 3px 10px 3px 10px;
+inset: 2.4em 3em 3em 3em;
+inset: 10px; /* значение применяется ко всем сторонам */
+
+/* &lt;percentage&gt; от ширины или высоты внешнего блока */
+inset: 10% 5% 5% 5%;
+
+/* Ключевое значение */
+inset: auto;
+
+/* Глобальные значения */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство <code>inset</code> принимает значения, аналогичные значениям свойства {{cssxref("left")}}.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML-содержимое">HTML-содержимое</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS-содержимое">CSS-содержимое</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset: 20px 50px 30px 10px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Спецификация">Спецификация</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("CSS Logical Properties", "#propdef-inset", "inset")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузера">Поддержка браузера</h2>
+
+
+
+<p>{{Compat("css.properties.inset")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Сопоставление физических свойств: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ru/web/css/integer/index.html b/files/ru/web/css/integer/index.html
new file mode 100644
index 0000000000..a1f11a3a46
--- /dev/null
+++ b/files/ru/web/css/integer/index.html
@@ -0,0 +1,127 @@
+---
+title: <integer>
+slug: Web/CSS/integer
+translation_of: Web/CSS/integer
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;integer&gt;</code></strong> - <a href="/ru/docs/Web/CSS/CSS_Types">тип хранения данных</a> в <a href="/ru/docs/Web/CSS">CSS</a> - является частным случаем типа {{cssxref("number")}}, который представляет целые числа: как положительное, так и отрицательное. Целые числа могу быть использованы в свойствах CSS , таких как {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, и {{cssxref("z-index")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;integer&gt;</code> состоит из одного или нескольких дробных цифр, от 0 до 9 включительно, символы <code>+</code> и <code>-</code> необязательны. Не существует единицы измерения, связанной с целочисленным типом данных.</p>
+
+<div class="note"><strong>Запомните:</strong> Не существует оффициального диапазона значений типа <code>&lt;integer&gt;</code>. Opera 12.1 поддерживает значения до 2<sup>15</sup>-1, IE - до 2<sup>20</sup>-1, а остальные браузеры даже выше. На протяжении существования значений CSS3 было проведено не большое количество обсуждений об установлении минимального ренжа: последнее решение, <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">в апреле 2012 напротяжении фазы LC</a>, было [-2<sup>27</sup>-1; 2<sup>27</sup>-1], но остальные значения, такие как 2<sup>24</sup>-1 и 2<sup>30</sup>-1, <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">также были предложены</a>. Однако, самая свежая на данный момент спецификация более не указывает на область определения этого типа данных.</div>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>Во время анимации значения типа <code>&lt;integer&gt;</code> интерполированы используя особые меры. Вычисление будет завершено, если они были целочисленными или с плавающей точкой; отдельное значение получается, используя <a href="https://ru.wikipedia.org/wiki/Целая_часть">Целую часть</a>. Скорость интерполяции определена <a href="/en-US/docs/Web/CSS/single-transition-timing-function" title="timing-function">timing function</a>, связанной с анимацией.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Корректные_значения_целочисленного_типа_данных">Корректные значения целочисленного типа данных</h3>
+
+<pre>12          Положительное целое число (без предшествующего знака +)
++123        Положительное целое число (С предшествующим знаком +)
+-456        Отрицательное целое число
+0           Нуль
++0          Нуль, с предшествующим +
+-0          Нуль, с предшествующим -
+</pre>
+
+<h3 id="Некорректные_значения_целочисленного_типа_данных">Некорректные значения целочисленного типа данных</h3>
+
+<pre class="example-bad">12.0        Это &lt;number&gt;, а не &lt;integer&gt;, хоть и представляется как целое число.
+12.         "Дробные" точки запрещены.
++---12      Разрешен только один предшествующий символ +/-.
+десять      Буквы запрещены.
+_5          Специальные знаки запрещены.
+\35         Экранированные символы Юникода запрещены, даже если они являются целым числом (здесь: 5).
+\4E94       Разрешены только арабские цифры, даже в случае, если они экранированны (здесь: японское число 5, 五).
+3e4         Научные обозначения запрещены.
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Явное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Неявное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>3.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Обобенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/isolation/index.html b/files/ru/web/css/isolation/index.html
new file mode 100644
index 0000000000..94f536220c
--- /dev/null
+++ b/files/ru/web/css/isolation/index.html
@@ -0,0 +1,114 @@
+---
+title: isolation
+slug: Web/CSS/isolation
+tags:
+  - Контекст наложения
+  - Очередность
+  - Порядок отрисовки
+translation_of: Web/CSS/isolation
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>isolation</code></strong> определяет должен ли элемент создавать новый <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">контекст наложения</a> {{glossary("stacking context")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div>
+
+
+
+<p>Это свойство особенно полезно при использовании совместно с {{cssxref("background-blend-mode")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевого слова */
+isolation: auto;
+isolation: isolate;
+
+/* Глобальные значения */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+</pre>
+
+<p>Свойство <code>isolation</code> указывается в качестве значения одного из нижеследующих ключевых слов.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Новый контекст наложения создается только в том случае, если это требуется для одного из свойств, применяемых к элементу.</dd>
+ <dt><code>isolate</code></dt>
+ <dd>Новый контекст наложения должен быть создан.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;div id="b" class="a"&gt;
+  &lt;div id="d"&gt;
+    &lt;div class="a c"&gt;auto&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="e"&gt;
+    &lt;div class="a c"&gt;isolate&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}</pre>
+
+<p>{{ EmbedLiveSample('Examples', 230, 230) }}</p>
+
+<h2 id="Спецификации">Спецификации</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', '#isolation', 'Isolation') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.isolation")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html
new file mode 100644
index 0000000000..7c9d323e17
--- /dev/null
+++ b/files/ru/web/css/justify-content/index.html
@@ -0,0 +1,206 @@
+---
+title: justify-content
+slug: Web/CSS/justify-content
+tags:
+  - CSS
+  - justify-content
+translation_of: Web/CSS/justify-content
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> свойство  <strong><code>justify-content</code></strong> определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль {{Glossary("Main Axis", "главной оси")}} flex контейнера, или вдоль строчной оси grid контейнера.</p>
+
+<p>Интерактивный пример ниже демонстрирует некоторые значения, используя Grid размещение.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</p>
+
+<p>Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox разметке</a> есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от <code>0</code>, эффект не будет применен, потому что не останется свободного места.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Позиционное выравнивание */
+justify-content: center;     /* Выравнивание элементов по центру */
+justify-content: start;      /* Выравнивание элементов в начале */
+justify-content: end;        /* Выравнивание элементов в конце */
+justify-content: flex-start; /* Выравнивание флекс-элементов с начала */
+justify-content: flex-end;   /* Выравнивание флекс-элементов с конца */
+justify-content: left;       /* Выравнивание элементов по левому краю */
+justify-content: right;      /* Выравнивание элементов по правому краю */
+
+/* Выравнивание относительно осевой линии */
+justify-content: baseline;
+justify-content: first baseline;
+justify-content: last baseline;
+
+/* Распределенное выравнивание */
+justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Первый элемент вначале, последний в конце */
+justify-content: space-around;  /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Все элементы имеют полуразмерное пространство
+
+                                   с обоих концов */
+justify-content: space-evenly;  /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Все элементы имеют равное пространство вокруг */
+justify-content: stretch;       /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Все элементы имеют "авто-размер", чтобы соответствовать
+
+                                   контейнеру */
+
+/* Выравнивание при переполнении */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* Глобальные значения */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.</dd>
+ <dt><code>end</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси, в зависимости от её направления (<a href="/ru/docs/Web/CSS/flex-direction">flex-direction</a>). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (<a href="/ru/docs/Web/CSS/flex-direction">flex-direction</a>). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Элементы располагаются друг за другом в центре контейнера по главной оси.</dd>
+ <dt><code>left</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к левому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  <code>start</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Элементы располагаются на свох обычных позициях, так как будто свойство <code>justify-content</code> не задано. Этот параметр ведет себя как <code>stretch</code> в grid и flex контейнерах.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
+ The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по главной оси, а последний - к концу.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов.</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>If the combined size of the items is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> <code>stretch</code> не поддерживается гибкими контейнерами (flexbox).</p>
+</div>
+
+<dl>
+ <dt><code>safe</code></dt>
+ <dd>If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#container {
+  display: flex;
+  justify-content: space-between; /* Может быть изменено */
+}
+
+#container &gt; div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="justifyContent"&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="left"&gt;left&lt;/option&gt;
+  &lt;option value="right"&gt;right&lt;/option&gt;
+  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+  &lt;option value="space-between" selected&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent");
+justifyContent.addEventListener("change", function (evt) {
+  document.getElementById("container").style.justifyContent =
+      evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример", "100%", 140)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Box Alignment')}}</td>
+   <td>Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, space-evenly, unsafe | safe values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<h3 id="Поддержка_в_Flex_разметке">Поддержка в Flex разметке</h3>
+
+<p>{{Compat("css.properties.justify-content.flex_context")}}</p>
+
+<h3 id="Поддержка_в_Grid_разметке">Поддержка в Grid разметке</h3>
+
+<p>{{Compat("css.properties.justify-content.grid_context")}}</p>
+
+<h2 id="Смотрите_также"> Смотрите также</h2>
+
+<ul>
+ <li>Гид по CSS Flexbox: <em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Основные понятия Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере">Выравнивание элементов во Flex контейнере</a></em></li>
+ <li>CSS Grid Guide: <em><a href="/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание ячейки в CSS Grid layout</a></em></li>
+ <li><a href="/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание полей CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html
new file mode 100644
index 0000000000..23d4c75099
--- /dev/null
+++ b/files/ru/web/css/justify-items/index.html
@@ -0,0 +1,171 @@
+---
+title: Атрибут justify-items
+slug: Web/CSS/justify-items
+tags:
+  - CSS
+  - CSS атрибут
+  - CSS выравнивание блоков
+  - Ссылки
+translation_of: Web/CSS/justify-items
+---
+<div class="boxed translate-rendered text-content">
+<div>{{CSSRef}}</div>
+
+<p>Атрибут <a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <code><strong>justify-items</strong></code> определяет атрибут по умолчанию {{CSSxRef ("justify-self")}} для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, создайте копию <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на включение изменений.</p>
+
+<p>Эффект этого атрибута зависит от выбранного способа разметки:</p>
+
+<ul>
+ <li>Используя разметку с помощью блоков (block-level layout), элементы выравниваются внутри содержащего их блока по внутренней оси.</li>
+ <li>Для абсолютно позиционированых элементов выравнивание происходит внутри содержащего их блока по внутренней оси, учитывая значения смещения сверху, слева, снизу и справа.</li>
+ <li>Используя разметку с помощью ячеек таблицы (table cell layout), этот атрибут игнорируется (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">подробнее</a> о выравнивании в блочной структуре, абсолютном позиционировании и о табличной разметке).</li>
+ <li>Используя разметку с помощью гибких или адаптивных блоков (flexbox layout), этот атрибут игнорируется (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">подробнее</a> о выравнивании в разметке flexbox).</li>
+ <li>Используя разметку с помощью сетки (grid layout), элементы выравниваются внутри их сеточной области по внутренней оси (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">подробнее</a> о выравнивании в разметке grid).</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Основные ключевые слова */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* Выравнивание положения */
+justify-items: center;     /* Выровнять элементы по центру */
+justify-items: start;      /* Выровнять элементы в начале */
+justify-items: end;        /* Выровнять элементы в конце */
+justify-items: flex-start; /* Эквивалентно 'start'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
+justify-items: flex-end;   /* Эквивалентно 'end'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* Выровнять элементы по левому краю */
+justify-items: right;      /* Выровнять элементы по правому краю */
+
+/* Исходное выравнивание */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* Выравнивание при переполнении (только для выравнивания положения) */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* Унаследованное выравнивание */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* Глобальные значения */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+</pre>
+
+<p>Этот атрибут может принимать одну из четырех различных форм:</p>
+
+<ul>
+ <li>Основные ключевые слова: одно из значений ключевого слова: <code>normal</code>, <code>auto</code>, или <code>stretch</code>.</li>
+ <li>Исходное выравнивание: ключевое слово <code>baseline</code>  плюс одно ключевое слово по выбору: <code>first</code> или <code>last</code>.</li>
+ <li>Выравнивание положения: одно из ключевых слов: <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code>, или <code>right</code>. Плюс ключевое слово по выбору: <code>safe</code> или <code>unsafe</code>.</li>
+ <li>Унаследованное выравнивание: ключевое слово <code>legacy</code>, за которым следует ключевое слово <code>left</code> или <code>right</code>.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Используемое значение является значением атрибута <code>justify-items</code> родительского блока. Если у блока нет родительского элемента или он абсолютно спозиционирован, то в этих случаях значение <code>auto</code> представляет собой значение <code>normal</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Эффект этого атрибута зависит от выбранного способа разметки:
+ <ul>
+  <li>Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова <code>start</code></li>
+  <li>Для разметки с абсолютно позиционнированными элементами, это ключевое слово ведет себя как <code>start</code> на замененных блоках с абсолютным позиционированием и как <code>stretch</code> на всех остальных блоках с абсолютным позиционированием</li>
+  <li>Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li>
+  <li>Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li>
+  <li>Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению <code>stretch</code>, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как <code>start</code></li>
+ </ul>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.</dd>
+ <dt><code>end</code></dt>
+ <dd>Элемент выравнивается на одном уровне друг с другом по направлению к конечной границе  контейнера выравнивания по соответствующей оси.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как <code>end</code>.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>Элемент выравнивается на одном уровне с границей контейнера выравнивания начальной стороны элемента по соответствующей оси.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Элемент выравнивается на одном уровне с границей контейнера выравнивания конечной стороны элемента по соответствующей оси.</dd>
+ <dt><code>center</code></dt>
+ <dd>Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.</dd>
+ <dt><code>left</code></dt>
+ <dd>Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведет себя как <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведет себя как <code>start</code>.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Определяет участие значений <code>first baseline</code> или <code>last baseline</code> в исходном выравнивании. Значение <code>baseline</code> выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.</dd>
+ <dd>Возвратным выравниванием для <code>first baseline</code> является значение <code>start</code>, для <code>last baseline</code> является значение <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Если объединенный размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением <code>auto</code> увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединенный размер точно заполняет контейнер выравнивания.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.</dd>
+ <dt><code>legacy</code></dt>
+ <dd>Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение <code>justify-self: auto</code>, ключевое слово <code>legacy</code> не учитывается по нисходящему наследованию. Действует только со значением <code>left</code>, <code>right</code>, или <code>center</code>, связанным с ним.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице формируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на включение изменений.</div>
+
+<h3 id="Поддержка_в_разметке_Flex">Поддержка в разметке Flex</h3>
+
+<p>{{Compat("css.properties.justify-items.flex_context")}}</p>
+
+<h3 id="Поддержка_в_разметке_Grid">Поддержка в разметке Grid</h3>
+
+<p>{{Compat("css.properties.justify-items.grid_context")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>CSS Руководство по Grid: <em><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание блоков в разметке Grid</a></em></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">CSS Выравнивание блоков</a></li>
+ <li>Сокращенный атрибут {{CSSxRef("place-items")}}</li>
+ <li>Атрибут {{CSSxRef("justify-self")}}</li>
+ <li>Атрибут {{CSSxRef("align-items")}}</li>
+</ul>
+</div>
diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html
new file mode 100644
index 0000000000..f2452542a7
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html
@@ -0,0 +1,62 @@
+---
+title: Breadcrumb Navigation
+slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Навигация по хлебным крошкам помогает пользователю понять свое местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.</p>
+
+<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+
+<h2 id="Требование">Требование</h2>
+
+<p>Элементы обычно отображаются в строке с разделителем, чтобы указать иерархию между отдельными страницами.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">Загрузить этот пример</a></p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечение</strong>: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p>
+
+<pre class="notranslate">.breadcrumb li:not(:first-child)::before {
+  content: "→";
+}
+</pre>
+
+<p>Это решение использует более сложный селектор, но требует меньше правил. Смело выбирайте то решение, которое вам больше по душе.</p>
+</div>
+
+<h2 id="Сделанный_выбор">Сделанный выбор</h2>
+
+<p>Этот шаблон построен с использованием простого гибкого макета, демонстрирующего, как строка CSS может дать нам нашу навигацию. Разделители добавляются с использованием содержимого, созданного CSS. Вы можете изменить их на любой разделитель, который вам нравится.</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Я использовал атрибуты <code>aria-label </code>и <code>aria-current</code>, чтобы помочь пользователям понять, что это за навигация и где в структуре находится текущая страница.<br>
+ Смотреть связанные ссылки для получения дополнительной информации.</p>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p>Различные методы компоновки имеют разную поддержку браузером. Смотреть диаграммы ниже для получения подробной информации о базовой поддержке используемых свойств.</p>
+
+<div class="hidden">
+<p>Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</p>
+</div>
+
+<h4 id="Flexbox">Flexbox</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Смотреть также</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">Создание следа из хлебных крошек</a></li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">Использование атрибута aria-current</a></li>
+</ul>
diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..5c53652804
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/index.html
@@ -0,0 +1,67 @@
+---
+title: CSS Layout cookbook
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - Layout
+  - NeedsTranslation
+  - TopicStub
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}<br>
+Книга рецептов CSS объединяет примеры большинства наиболее распространненых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.<br>
+<br>
+В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.</div>
+
+<div><br>
+<strong>Примечание.</strong> Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведенных здесь рецептов.</div>
+
+<h2 id="The_Recipes">The Recipes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Recipe</th>
+   <th scope="col">Description</th>
+   <th scope="col">Layout Methods</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media Objects</a></td>
+   <td>A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td>
+   <td>When to choose multi-column layout, flexbox or grid for your columns</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td>
+   <td>How to center an item horizontally and vertically</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td>
+   <td>Creating a footer which sits at the bottom of the container or viewport when the content is shorter. </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split Navigation</a></td>
+   <td>A navigation pattern where some links are visually separated from the others.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb Navigation</a></td>
+   <td>Creating a list of links to allow the visitor to navigate back up through the page hierarchy.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribute_a_Recipe">Contribute a Recipe</h2>
+
+<p>As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">See this page</a> for a template and guidelines for writing your own example.</p>
diff --git a/files/ru/web/css/layout_cookbook/split_navigation/index.html b/files/ru/web/css/layout_cookbook/split_navigation/index.html
new file mode 100644
index 0000000000..5f08999af1
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/split_navigation/index.html
@@ -0,0 +1,48 @@
+---
+title: Раздельная навигация
+slug: Web/CSS/Layout_cookbook/Split_Navigation
+translation_of: Web/CSS/Layout_cookbook/Split_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Навигационный паттерн, в котором один или более элементов отделены от остальных элементов навигации.</p>
+
+<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+
+<h2 id="Требования">Требования</h2>
+
+<p>Распространенный навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. </p>
+
+<h2 id="Рецепт">Рецепт</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">Download this example</a></p>
+</div>
+
+<h2 id="Choices_made">Choices made</h2>
+
+<p>Этот паттерн объединяет margin со значением auto и Flexbox для разделения элементов.</p>
+
+<p>Auto margin поглощает все доступное пространство в указанном направлении. Так же работает центрирование блока с автоматическими margin - вы имеете отступы на каждой стороне блока, пытающиеся занять все доступное пространство, таким образом толкая блок в центр.</p>
+
+<p>В этом случаи левый auto margin занимает любое доступное пространство и толкает элемент к правому краю. Вы могли применить класс push к любому элементу в списке.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>The various layout methods have different browser support. See the charts below for details on basic support for the properties used.</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="Flexbox">Flexbox</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+</ul>
diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.html b/files/ru/web/css/layout_cookbook/sticky_footers/index.html
new file mode 100644
index 0000000000..945d727438
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.html
@@ -0,0 +1,70 @@
+---
+title: Sticky footers
+slug: Web/CSS/Layout_cookbook/Sticky_footers
+translation_of: Web/CSS/Layout_cookbook/Sticky_footers
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Шаблон нижнего колонтитула - это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. В этом рецепте мы рассмотрим несколько методов для создания одного из них.</p>
+
+<p><img alt="A sticky footer pushed to the bottom of a box" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p>
+
+<h2 id="Requirements">Requirements</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Липкий шаблон нижнего колонтитула должен соответствовать следующим требованиям:</span></span><br>
+  </p>
+
+<ul>
+ <li><span title="">Нижний колонтитул прилипает к нижней части области просмотра, когда содержание короткое.</span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Если содержимое страницы выходит за нижнюю часть области просмотра, нижний колонтитул располагается ниже содержимого, как обычно.</span></span></li>
+</ul>
+
+<h2 id="The_recipe">The recipe</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">Download this example</a></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: In this example and the following one we are using a wrapper set to <code>min-height: 100%</code> in order that our live example works. You could also achieve this for a full page by setting a {{cssxref("min-height")}} of <code>100vh</code> on the {{htmlelement("body")}} and then using it as your grid container.</p>
+</div>
+
+<h2 id="Выбор_сделан">Выбор сделан</h2>
+
+<p>В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс <code>.wrapper</code> имеет минимальную высоту <code>100%</code>, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.</p>
+
+<p>При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое - на дорожку <code>1fr</code>, а нижний колонтитул - в конечную дорожку с автоматическими размерами. Трек <code>1fr</code> будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.</p>
+
+<h2 id="Alternate_method">Alternate method</h2>
+
+<p>If you need compatibility with browsers that do not support Grid Layout you can also use Flexbox to create a sticky footer.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+
+<p>The flexbox example starts out in the same way, but we use <code>display:flex</code> rather than <code>display:grid</code> on the <code>.wrapper</code>; we also set <code>flex-direction</code> to <code>column</code>. Then we set our main content to <code>flex-grow: 1</code> and the other two elements to <code>flex-shrink: 0</code> — this prevents them from shrinking smaller when content fills the main area.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h4 id="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h4 id="flex-direction">flex-direction</h4>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h4 id="flex-grow">flex-grow</h4>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h4 id="flex-shrink">flex-shrink</h4>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Resources_on_MDN">Resources on MDN</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li>
+</ul>
diff --git a/files/ru/web/css/letter-spacing/index.html b/files/ru/web/css/letter-spacing/index.html
new file mode 100644
index 0000000000..950325c331
--- /dev/null
+++ b/files/ru/web/css/letter-spacing/index.html
@@ -0,0 +1,129 @@
+---
+title: letter-spacing
+slug: Web/CSS/letter-spacing
+translation_of: Web/CSS/letter-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>letter-spacing</code></strong> определяет межбуквенное расстояние в тексте.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
+
+<p class="hidden">Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете поучавствовать в их улучшении, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-реквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения - ключевые слова */
+letter-spacing: normal;
+
+/* Значения &lt;length&gt; */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Глобальные значения */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения <code>0</code>, это ключевое слово позволяет {{glossary("User Agent", "агенту пользователя")}} изменить расстояние между буквами для выравнивания текста.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Определяет дополнительное расстояние между буквами <em>добавляющееся</em> к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;letter spacing&lt;/p&gt;
+&lt;p class="em-wide"&gt;letter spacing&lt;/p&gt;
+&lt;p class="em-wider"&gt;letter spacing&lt;/p&gt;
+&lt;p class="em-tight"&gt;letter spacing&lt;/p&gt;
+&lt;p class="px-wide"&gt;letter spacing&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Примеры', 440, 185) }}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Большие положительные или отрицательные значения свойства <code>letter-spacing</code> могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойтва, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.</p>
+
+<p>Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8  | W3C Understanding WCAG 2.0</a> </li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>letter-spacing</code> как доступное к анимированию.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Первоначальное определение в SVG.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости была сформирована из структурированных данных. Если вы хотите уточнить информацию, пожалуйста, склонируйте репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-реквест.</div>
+
+<p>{{Compat("css.properties.letter-spacing")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/ru/web/css/line-break/index.html b/files/ru/web/css/line-break/index.html
new file mode 100644
index 0000000000..dd3acb4f53
--- /dev/null
+++ b/files/ru/web/css/line-break/index.html
@@ -0,0 +1,68 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+tags:
+  - разрыв строки
+translation_of: Web/CSS/line-break
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-свойство <strong><code>line-break</code></strong> устанавливает способ разрыва строки текста на китайском, японском или корейском (CJK) при работе с пунктуацией и символами.</p>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевым словом */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+
+/* Глобальные значения */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+</pre>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Разрыв текста, используя правило разрыва строки по умолчанию.</dd>
+ <dt><code>loose</code></dt>
+ <dd>Разрыв текста, используя правило разрыва строки с наименьшими ограничениями. Обычно используется для коротких строк, например, в газетах.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Разрыв текста, используя наиболее распространенное правило разрыва строки.</dd>
+ <dt><code>strict</code></dt>
+ <dd>Разрыв текста, используя самое строгое правило разрыва строки.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Text', '#line-break-property', 'line-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.line-break")}}</p>
diff --git a/files/ru/web/css/line-height/index.html b/files/ru/web/css/line-height/index.html
new file mode 100644
index 0000000000..28ad87f355
--- /dev/null
+++ b/files/ru/web/css/line-height/index.html
@@ -0,0 +1,170 @@
+---
+title: line-height
+slug: Web/CSS/line-height
+translation_of: Web/CSS/line-height
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/css">CSS</a> <strong><code>line-height</code></strong> устанавливает величину пространства между строками, например в тексте. В блочных элементах оно указывает минимальную высоту блоков строк внутри элемента. В <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%97%D0%B0%D0%BC%D0%B5%D1%89%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">незамещаемых</a> внутристрочных элементах —указывает высоту, которая используется для вычисления высоты блоков строк.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>
+
+
+
+<p dir="rtl" id="Syntax"></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Keyword value */
+line-height: normal;
+
+/* Unitless values: use this number multiplied
+by the element's font size */
+line-height: 3.5;
+
+/* &lt;length&gt; values */
+line-height: 3em;
+
+/* &lt;percentage&gt; values */
+line-height: 34%;
+
+/* Global values */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+</pre>
+
+<p dir="rtl"></p>
+
+<p>Свойство <code>line-height</code> задаётся с помощью:</p>
+
+<ul>
+ <li><code><a href="#&lt;number>">&lt;числа&gt;</a></code></li>
+ <li><code><a href="#&lt;length>">&lt;величины&gt;</a></code></li>
+ <li><code><a href="#&lt;percentage>">&lt;процентного соотношения&gt;</a></code></li>
+ <li>ключевого слова <code><a href="#normal">normal</a></code>.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code><a id="normal" name="normal">normal</a></code></dt>
+ <dd>Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно <strong><code>1.2</code></strong>, в зависимости от элементов <code>font-family</code>.</dd>
+ <dt><code><a id="&lt;number>" name="&lt;number>">&lt;число&gt;</a></code></dt>
+ <dd>Используемое значение это бесконечное умножение {{cssxref("&lt;числа&gt;")}} на собственный размер шрифта элементов. Вычисленное значение это и есть  <code>&lt;число&gt;</code>. В большинстве случаев <strong> это предпочтительный способ установки значения</strong> <code>line-height</code> и позволяет избежать непредвиденных результатов при наследовании.</dd>
+ <dt><code><a id="&lt;length>" name="&lt;length>">&lt;величина&gt;</a></code></dt>
+ <dd>Указанная {{cssxref("&lt;величина&gt;")}} используется при вычислении высоты блока строки. Значение, заданное в  единицах <strong>em</strong> может привести к непредвидимым результатам (смотри пример ниже).</dd>
+ <dt><code><a id="&lt;percentage>" name="&lt;percentage>">&lt;процентное соотношение&gt;</a></code></dt>
+ <dd>Относительно размера шрифта самого элемента.</dd>
+ <dd>Relative to the font size of the element itself. The computed value is this {{cssxref("&lt;percentage&gt;")}} multiplied by the element's computed font size. <strong>Percentage</strong> values may produce unexpected results (see the second example below).</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: css">/* All rules below have the same resultant line height */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* number */
+div { line-height: 1.2em; font-size: 10pt; }   /* length */
+div { line-height: 120%;  font-size: 10pt; }   /* percentage */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */</pre>
+
+<p>It is often more convenient to set <code>line-height</code> by using the {{cssxref("font")}} shorthand as shown above, but this requires the <code>font-family</code> property to be specified as well.</p>
+
+<h3 id="Prefer_unitless_numbers_for_line-height_values">Prefer unitless numbers for line-height values</h3>
+
+<p>This example shows why it is better to use {{cssxref("&lt;number&gt;")}} values instead of {{cssxref("&lt;length&gt;")}} values. We will use two {{HTMLElement("div")}} elements. The first, with the green border, uses a unitless <code>line-height</code> value. The second, with the red border, uses a <code>line-height</code> value defined in <code>em</code>s.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+
+h1 {
+  font-size: 30px;
+}
+
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box green"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height.&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;div class="box red"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height.&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;!-- The first &lt;h1&gt; line-height is calculated from its own font-size   (30px × 1.1) = 33px  --&gt;
+&lt;!-- The second &lt;h1&gt; line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want --&gt;
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>line-height</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.line-height")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Cssxref("font")}}, {{Cssxref("font-size")}}</li>
+</ul>
diff --git a/files/ru/web/css/linear-gradient()/index.html b/files/ru/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..4433b0587d
--- /dev/null
+++ b/files/ru/web/css/linear-gradient()/index.html
@@ -0,0 +1,212 @@
+---
+title: linear-gradient()
+slug: Web/CSS/linear-gradient()
+tags:
+  - Градиент
+  - Линейный градиент
+translation_of: Web/CSS/linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-функция <strong><code>linear-gradient()</code></strong> создаёт изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Её результатом является объект типа данных {{CSSxRef("&lt;gradient&gt;")}}, являющийся особым видом {{CSSxRef("&lt;image&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div>
+
+<div class="hidden">Исходник для этого интерактивного примера хранится в GitHub-репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</div>
+
+<p>Как и в случае с любым градиентом, линейный градиент не имеет <a href="/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>; т. е., он не имеет ни естественного или предпочтительного размера, ни предпочтительного соотношения сторон. Его фактический размер будет совпадать с размеров элемента, к которому он применён.</p>
+
+<p>Для создания линейного градиента, повторяющегося таким образом, что он заполняет содержащий его элемент, лучше используйте функцию {{CSSxRef("repeating-linear-gradient")}}.</p>
+
+<p>Так как <code>&lt;gradient&gt;</code>ы относятся к типу данных <code>&lt;image&gt;</code>, они могут использоваться только там, где может использоваться <code>&lt;image&gt;</code>. По этой причине, <code>linear-gradient()</code> не будет работать в качестве {{CSSxRef("background-color")}} и других свойств, использующих тип данных {{CSSxRef("&lt;color&gt;")}}.</p>
+
+<h2 id="Создание_линейного_градиента">Создание линейного градиента</h2>
+
+<p>Линейный градиент определяется осью — <em>линией градиента</em> — и двумя или более <em>точками остановки цвета</em>. Каждая точка на оси – это определённый цвет; для создания плавного градиента функция <code>linear-gradient()</code> рисует серию цветных линий, перпендикулярных линии градиента, каждая из них соответствует цвету точки, в которой она пересекает линию градиента.</p>
+
+<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p>
+
+<p>Линия градиента определена центром блока, содержащего изображение градиента, и углом. Цвета градиента задаются двумя или более точками: начальной точкой, конечной точкой, и необязательными точками остановки цвета между ними.</p>
+
+<p><em>Начальная точка</em> – это место на линии градиента, где начинается первый цвет. <em>Конечная точка</em> – это точка, на которой заканчивается последний цвет. Каждая из этих двух точек определяется пересечением линии градиента с перпендикулярной линией, проходящей от угла, находящегося в том же квадранте блока. Конечную точку можно просто считать как точку, симметричную начальной точке. Эти несколько сложные определения приводят к интересному эффекту, иногда называемому <em>магическими углами</em>: углы, ближайшие к начальной и конечной точке, имеют те же цвета, что и соответствующая им начальная или конечная точка.</p>
+
+<h3 id="Настройка_градиентов">Настройка градиентов</h3>
+
+<p>Добавляя больше точек остановки цвета на линию градиента, вы можете точно задавать переходы между разными цветами. Позиции остановок цвета могут быть явно заданы использованием значений типа {{CSSxRef("&lt;length&gt;")}} или {{CSSxRef("&lt;percentage&gt;")}}. Если вы не определите расположение цвета, он будет расположен посередине между предыдущим и следующим цветом. Следующие два градиента эквивалентны.</p>
+
+<pre class="brush: css">linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre>
+
+<p>По умолчанию цвета переходят плавно от цвета на одной точке остановки до цвета на следующей точке остановки, по середине которого – точка, являющаяся половиной перехода от одного цвета к другому. Вы можете двигать эту среднюю точку в любую позицию между двумя точками остановки цвета, добавляя цветовую подсказку в виде значения в % между двумя цветами для того, чтобы обозначить, где должна находиться середина цветового перехода. В следующем примере показан чисто красный цвет от начала до отметки 10% и чисто синий от 90% до конца. Между 10% и 90% цвет переходит от красного до синего, однако середина цветового перехода находится на отметке 30%, а не на 50%, как было бы без добавления цветовой подсказки 30%.</p>
+
+<pre class="brush: css">linear-gradient(red 10%, 30%, blue 90%);</pre>
+
+<p>Если две или более точки остановки цвета находятся в одной и той же позиции, переход будет в виде чёткой линии между первым и последним цветом, объявленным на этой позиции.</p>
+
+<p>Точки остановки цвета должны быть перечислены в порядке возрастания. Соседние точки остановки цвета с меньшим значением переопределят значение предыдущей точки остановки цвета, создавая резкий переход. В примере ниже на позиции 30% происходит замена красного на жёлтый, и затем идёт переход от жёлтого до синего на протяжении 35% длины градиента.</p>
+
+<pre class="brush: css">linear-gradient(red 40%, yellow 30%, blue 65%);
+</pre>
+
+<p>Допустимо использовать многопозиционную остановку цвета. Цвет может быть объявлен как две смежных точки остановки цвета, если включить его в обе позиции в CSS-объявлении. Следующие три градиента эквивалентны:</p>
+
+<pre class="brush: css">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre>
+
+<p>По умолчанию, если на остановку 0% не задан цвет, то на этой точке будет располагаться первый объявленный цвет. Аналогично, последний цвет будет продолжаться до отметки 100%, или будет на отметке 100%, если на этой последней остановке не было объявлено никакой длины.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="language-css" id="css">/* Градиент наклонён на 45 градусов,
+   начинается с синего, заканчивается красным */
+linear-gradient(45deg, blue, red);
+
+/* Градиент идёт от правого нижнего до левого верхнего угла,
+   от синего до красного */
+linear-gradient(to left top, blue, red);
+
+/* Остановка цвета: градиент идёт снизу вверх,
+   начинается синим, становится зелёным на 40% своей длины,
+   и заканчивается красным */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* Цветовая подсказка: градиент идёт слева направо,
+   начинается с красного, достигает среднего цвета
+   на 10% пути длины градиента,
+   занимая оставшиеся 90% длины переходом в синий */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* Многопозиционная остановка цвета: градиент повёрнут на 45 градусов,
+   с красной нижней левой половиной, синей верхней правой половиной,
+   с чёткой линией на месте перехода градиента из красного в синий */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>Позиция начальной точки линии градиента. Если указана, то должна состоять из слова <code>to</code> и максимум до двух ключевых слов включительно: одно обозначает горизонтальную сторону (<code>left</code> или <code>right</code>), а другое – вертикальную сторону (<code>top</code> или <code>bottom</code>). Порядок ключевых слов не важен. Если не определено, то принимает значение <code>to bottom</code>.</dd>
+ <dd>Значения <code>to top</code>, <code>to bottom</code>, <code>to left</code> и <code>to right</code> эквивалентны углам <code>0deg</code>, <code>180deg</code>, <code>270deg</code> и <code>90deg</code>, соответственно. Другие значения переводятся в значение угла.</dd>
+ <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
+ <dd>Угол направления линии градиента. Значение <code>0deg</code> эквивалентно <code>to top</code>; увеличение значения увеличивает угол поворота по часовой стрелке от этой позиции.</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>Значение точки остановки цвета {{CSSxRef("&lt;color&gt;")}}, с последующими одной или двумя необязательными точками остановки (имеющими значение типа {{CSSxRef("&lt;percentage&gt;")}} или {{CSSxRef("&lt;length&gt;")}} вдоль оси градиента).</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Цветовая подсказка – это подсказка для перехода, определяющая, как градиент продвигается между соседними точками остановки цвета. Длина определяет, на какой точке между двумя точками остановки цвет градиента должен достичь среднего значения цветового перехода. Если не указано, средней точкой цветового перехода будет середина между двумя точками остановки цвета.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Примечание:</strong> Отрисовка <a href="#Gradient_with_multiple_color_stops">цветовых остановок в CSS-градиентах</a> следует тем же правилам, что и цветовые остановки в <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG-градиентах</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">linear-gradient(
+  [ <a href="/en-US/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+      Определение линии градиента         Список остановок цвета
+
+где &lt;side-or-corner&gt; = [ left | right ] || [ top | bottom ]
+  и &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt; ]? ]#, &lt;linear-color-stop&gt;
+  и &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  и &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  и &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Градиент_под_углом_45_градусов">Градиент под углом 45 градусов</h3>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: linear-gradient(45deg, red, blue);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Градиент_под_углом_45_градусов", 120, 120)}}</p>
+
+<h3 id="Градиент_начинающийся_на_60_линии_градиента">Градиент, начинающийся на 60% линии градиента</h3>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: linear-gradient(135deg, orange, orange 60%, cyan);
+}</pre>
+
+<p>{{EmbedLiveSample("Градиент_начинающийся_на_60_линии_градиента", 120, 120)}}</p>
+
+<h3 id="Градиент_с_многопозиционными_остановками_цвета">Градиент с многопозиционными остановками цвета</h3>
+
+<p>Этот пример использует многопозиционные остановки цвета, и со смежными цветами, имеющими те же точки остановки цвета, создаёт полосатый эффект.</p>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}</pre>
+
+<p>{{EmbedLiveSample("Градиент_с_многопозиционными_остановками_цвета", 120, 120)}}</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Больше примеров смотрите на странице <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS-градиентов</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Добавлены подсказки по переходам</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS-градиентов</a></li>
+ <li>Другие градиентные функции: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li>
+ <li>{{CSSxRef("&lt;image&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ru/web/css/list-style-image/index.html b/files/ru/web/css/list-style-image/index.html
new file mode 100644
index 0000000000..468e2493ae
--- /dev/null
+++ b/files/ru/web/css/list-style-image/index.html
@@ -0,0 +1,106 @@
+---
+title: list-style-image
+slug: Web/CSS/list-style-image
+tags:
+  - маркер списка
+  - список
+translation_of: Web/CSS/list-style-image
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>list-style-image </code></strong>устанавливает изображение, используемое в качестве маркера списка.</p>
+
+<p>Чаще, удобнее использовать общее свойство {{ cssxref("list-style") }}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-image.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>Примечание:</strong> Это свойство применяется к элементам списка, т.е. к элементам с <code>{{cssxref("display")}}: list-item;</code> <a href="https://www.w3.org/TR/html5/rendering.html#lists">по умолчанию</a> оно включает элементы {{HTMLElement("li")}}. Т.к. это свойство наследуется, его можно задать для родительского элемента (обычно {{HTMLElement("ol")}} или {{HTMLElement("ul")}}), что позволит применить его ко всем элементам списка.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значение ключевым словом */
+list-style-image: none;
+
+/* &lt;url&gt; значения */
+list-style-image: url('starsolid.gif');
+
+/* Глобальные значения */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;url&gt;")}}</dt>
+ <dd>Расположение элемента для использования в качестве маркера.</dd>
+ <dt><code>none</code></dt>
+ <dd>Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определенный в {{ Cssxref("list-style-type") }}.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Lists', '#list-style-image', 'list-style-image') }}</td>
+   <td>{{ Spec2('CSS3 Lists') }}</td>
+   <td>Расширяет поддержку любого типа данных {{cssxref("&lt;image&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.list-style-image")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-position")}}</li>
+</ul>
diff --git a/files/ru/web/css/margin-bottom/index.html b/files/ru/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..729e6923b0
--- /dev/null
+++ b/files/ru/web/css/margin-bottom/index.html
@@ -0,0 +1,138 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+tags:
+  - CSS
+  - CSS свойство
+translation_of: Web/CSS/margin-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a>  <strong><code>margin-bottom</code></strong> устанавливает внешний отступ внизу элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
+
+<p class="hidden">Исходник этого интерактивного примера хранится на репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, перейдите по ссылке https://github.com/mdn/interactive-examples и отправьте нам запрос на добавление.</p>
+
+<p>                        <img alt="Влияние CSS свойства margin-bottom на блок элемента" src="https://mdn.mozillademos.org/files/16471/margin-bottomru.png" style="border-style: solid; border-width: 1px; font-size: 1rem; height: 150px; letter-spacing: -0.00278rem; width: 459px;"></p>
+
+<p>Это свойство не имеет воздействия на незамещаемые элементы, такие как {{HTMLElement("span")}} или {{HTMLElement("code")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* числовые значения */
+margin-bottom: 10px;  /* Абсолютная длина */
+margin-bottom: 1em;   /* относительно размера текста */
+margin-bottom: 5%;    /* относительно длины родительского блока */
+
+/* Значения-ключевые слова */
+margin-bottom: auto;
+
+/* Глобальные значения */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+</pre>
+
+<p>Свойство <code>margin-bottom</code> может быть выражено как ключевое слово <code>auto</code>, или как <code>&lt;число&gt;</code>, или как <code>&lt;процент&gt;</code>. Значение может быть положительным, нулевым или отрицательным.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Размер отступа - фиксированная величина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер сам выбирает, какое значение использовать. Смотрите {{cssxref("margin")}}.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+&lt;div class="box0"&gt;Блок 0&lt;/div&gt;
+&lt;div class="box1"&gt;Блок 1&lt;/div&gt;
+&lt;div class="box2"&gt;Отрицательное значение <code>margin</code> Блока 1 тянет меня вверх&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>CSS устанавливает нижний отступ и высоту для элементов <code>div</code>.</p>
+
+<pre class="brush: css">.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+</pre>
+
+<p>Несколько дополнений к свойствам элемента <code>div</code> и элемента класса container сделают более наглядным эффект использования свойства <code>margin</code>.</p>
+
+<pre class="brush: css">.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}</pre>
+
+<p>{{ EmbedLiveSample('Example',350,200) }}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Нет значительных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>margin-bottom</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Убирает влияние свойства на строчные элементы.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.margin-bottom")}}</p>
diff --git a/files/ru/web/css/margin-inline-end/index.html b/files/ru/web/css/margin-inline-end/index.html
new file mode 100644
index 0000000000..d5e11e014c
--- /dev/null
+++ b/files/ru/web/css/margin-inline-end/index.html
@@ -0,0 +1,98 @@
+---
+title: margin-inline-end
+slug: Web/CSS/margin-inline-end
+translation_of: Web/CSS/margin-inline-end
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> Свойство <strong> <code>margin-inline-end </code></strong> определяет отступ логического края  элемента, который сопоставляется с физическим отступом в зависимомти от режима написания, направленности и расположения текста. То есть оно соответствует {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} или {{cssxref("margin-left")}} свойству в зависимости от числа определяющего {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+margin-inline-end: 10px;   /* An absolute length */
+margin-inline-end: 1em;    /* relative to the text size */
+margin-inline-end: 5%;     /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-inline-end: auto;
+
+/* Global values */
+margin-inline-end: inherit;
+margin-inline-end: initial;
+margin-inline-end: unset;
+</pre>
+
+<p>It relates to {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-start")}}, which define the other margins of the element.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values">Values</h3>
+
+<p>The <code>margin-inline-end</code> property takes the same values as the {{cssxref("margin-left")}} property.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.margin-inline-end")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("margin-inline-start")}}</li>
+ <li>The mapped physical properties: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, and {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ru/web/css/margin-inline-start/index.html b/files/ru/web/css/margin-inline-start/index.html
new file mode 100644
index 0000000000..8da250fd43
--- /dev/null
+++ b/files/ru/web/css/margin-inline-start/index.html
@@ -0,0 +1,100 @@
+---
+title: margin-inline-start
+slug: Web/CSS/margin-inline-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - Экспериментальный
+  - справочник
+translation_of: Web/CSS/margin-inline-start
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>Свойство <strong><code>margin-inline-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> задает логическое строковое (inline)  значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}},  {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+margin-inline-start: 10px;  /* абсолютная величина */
+margin-inline-start: 1em;   /* относительно размера текста */
+margin-inline-start: 5%;    /* относительно ширины ближайшего контейнера */
+
+/* Keyword values */
+margin-inline-start: auto;
+
+/* Global values */
+margin-inline-start: inherit;
+</pre>
+
+<p>Это свойство связано со свойствами {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} и {{cssxref("margin-inline-end")}}, которые определяют другие компоненты margins элемента.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство <code>margin-inline-start</code> принимает такие же значения как и свойство {{cssxref("margin-left")}}.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.properties.margin-inline-start")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{cssxref("margin-inline-end")}}</li>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Отображаемые физические свойства</span></span>: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ru/web/css/margin-left/index.html b/files/ru/web/css/margin-left/index.html
new file mode 100644
index 0000000000..cf6558067a
--- /dev/null
+++ b/files/ru/web/css/margin-left/index.html
@@ -0,0 +1,167 @@
+---
+title: margin-left
+slug: Web/CSS/margin-left
+translation_of: Web/CSS/margin-left
+---
+<div>{{CSSRef()}}</div>
+
+<p>Свойство <a href="/en/CSS" title="CSS">CSS</a>  <strong><code>margin-left</code></strong> устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box_model">внешний отступ</a> слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопыванием внешних отступов</a>.</p>
+
+<p>В редких случаях, когда ширина (т.е., когда все значения <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, область содержимого, и <code>margin-right</code> определены), <code>margin-left</code> игнорируется, и будет иметь такое же расчётное значение, как и <code>auto</code> .</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;длина&gt; значения */
+margin-left: 10px;  /* абсолютная длина */
+margin-left: 1em;   /* относительно размера текста */
+margin-left: 5%;    /* относительно ширины родительского блока */
+
+/* Значения-ключевые слова */
+margin-left: auto;
+
+/* Глобальные значения */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+</pre>
+
+<p>Свойство <code>margin-left</code> может быть выражено как ключевое слово <code>auto</code>, как <code>&lt;число&gt;</code>, или как <code>&lt;процент&gt;</code>. Значение может быть положительным, нулевым или отрицательным.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Размер отступа - фиксированная величина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Значение {{cssxref("display")}}</th>
+    <th scope="col">Значение {{cssxref("float")}}</th>
+    <th scope="col">Значение {{cssxref("position")}}</th>
+    <th scope="col" style="vertical-align: middle;">
+     <p>Расчётное значение <code>auto</code></p>
+    </th>
+    <th scope="col">Комментарий</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>любое</em></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Строчный способ разметки</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>любое</em></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае устанавливается значение, центрирующее элемент внутри его родителя</td>
+    <td>Блочный способ разметки</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> или <code>right</code></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Блочный способ разметки (плавающие элементы)</td>
+   </tr>
+   <tr>
+    <th><em>любое </em><code>table-*</code><em>, кроме </em><code>table-caption</code></th>
+    <th><em>любое</em></th>
+    <th><em>любое</em></th>
+    <td><code>0</code></td>
+    <td>Внутренние <code>table-*</code> элементы не имеют отступов, вместо этого используйте {{ cssxref("border-spacing") }}</td>
+   </tr>
+   <tr>
+    <th><em>любое, кроме <code>flex</code>,</em> <code>inline-flex</code><em>, или </em><code>table-*</code></th>
+    <th><em>любое</em></th>
+    <th><em><code>fixed</code></em> или <code>absolute</code></th>
+    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае, устанавливается значение центрирующее границы области внутри доступной  <code>width</code> (ширины), если  значение фиксировано.</td>
+    <td>Способ разметки абсолютным позиционированием</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>любое</em></th>
+    <th><em>любое</em></th>
+    <td><code>0</code>, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным <code>auto</code> отступам.</td>
+    <td>Способ разметки с помощью flexbox</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax()}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css">.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+</pre>
+
+<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('CSS3 Box', '#the-margin', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3Box')}}</td>
+   <td>
+    <p><br>
+     Нет значительных изменений относительно CSS 2.1.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>margin-left</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>
+    <p><br>
+     Определяет влияние <code>margin-left</code> на flex-элементы.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Идентично CSS1, но удалено влияние на строчные элементы.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.margin-left")}}</p>
diff --git a/files/ru/web/css/margin-right/index.html b/files/ru/web/css/margin-right/index.html
new file mode 100644
index 0000000000..b9b1531e3d
--- /dev/null
+++ b/files/ru/web/css/margin-right/index.html
@@ -0,0 +1,160 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+translation_of: Web/CSS/margin-right
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en/CSS" title="CSS">CSS</a> <strong><code>margin-right</code></strong> устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box_model">внешний отступ</a> слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопыванием внешних отступов</a>.</p>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;lenght&gt; значение */
+margin-right: 20px;  /* абсолютная длина */
+margin-right: 1em;   /* относительно размера текста */
+margin-right: 5%;    /* относительно ширины родительского блока */
+
+/* Значения-ключевые слова */
+margin-right: auto;
+
+/* Глобальные значения */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+</pre>
+
+<p>Свойство <code>margin-right</code> может быть выражено как ключевое слово <code>auto</code>, как <code>&lt;число&gt;</code>, или как <code>&lt;процент&gt;</code>. Значение может быть положительным, нулевым или отрицательным.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Размер отступа - фиксированная величина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Значение {{cssxref("display")}}</th>
+    <th scope="col">Значение {{cssxref("float")}}</th>
+    <th scope="col">Значение {{cssxref("position")}}</th>
+    <th scope="col">Расчётное значение<br>
+     <code>auto</code></th>
+    <th scope="col">Комментарий</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>любое</em></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Строчный способ разметки</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>любое</em></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае устанавливается значение, центрирующее элемент внутри его родителя</td>
+    <td>Блочный способ разметки</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> или <code>right</code></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Блочный способ разметки (плавающие элементы)</td>
+   </tr>
+   <tr>
+    <th><em>любое </em><code>table-*</code><em>, кроме </em><code>table-caption</code></th>
+    <th><em>любое</em></th>
+    <th><em>любое</em></th>
+    <td><code>0</code></td>
+    <td>Внутренние <code>table-*</code> элементы не имеют отступов, вместо этого используйте {{ cssxref("border-spacing") }}</td>
+   </tr>
+   <tr>
+    <th><em>любое, кроме <code>flex</code>,</em> <code>inline-flex</code><em>, или </em><code>table-*</code></th>
+    <th><em>любое</em></th>
+    <th><em><code>fixed</code></em> или <code>absolute</code></th>
+    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае, устанавливается значение центрирующее границы области внутри доступной  <code>width</code> (ширины), если  значение фиксировано.</td>
+    <td>Способ разметки абсолютным позиционированием</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>любое</em></th>
+    <th><em>любое</em></th>
+    <td><code>0</code>, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным <code>auto</code> отступам.</td>
+    <td>Способ разметки с помощью flexbox</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css">.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+</pre>
+
+<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('CSS3 Box', '#the-margin', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>margin-right</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Определяет влияние <code>margin-right</code> на flex-элементы.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Удалено влияние на строчные элементы.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin-right', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.margin-right")}}</p>
diff --git a/files/ru/web/css/margin-top/index.html b/files/ru/web/css/margin-top/index.html
new file mode 100644
index 0000000000..9855b83558
--- /dev/null
+++ b/files/ru/web/css/margin-top/index.html
@@ -0,0 +1,102 @@
+---
+title: margin-top
+slug: Web/CSS/margin-top
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - справочник
+translation_of: Web/CSS/margin-top
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>margin-top</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> в верхней части элемента. Положительное значение поместит элемент дальше от соседних элементов, чем обычно, а отрицательное значение поместит его ближе.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div>
+
+<p class="hidden">Исходники для этого интерактивного примера хранятся в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам соответствующий запрос.</p>
+
+<p>Это свойство не имеет эффекта на <em>незамещаемых</em> (<em>non-<a href="/ru/docs/Web/CSS/Замещаемый_элемент">replaced</a></em>) строковых (inline) элементах, таких как {{HTMLElement("span")}} или {{HTMLElement("code")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* значения &lt;length&gt; */
+margin-top: 10px;  /* абсолютное значение */
+margin-top: 1em;   /* относительно размера текста */
+margin-top: 5%;    /* относительно ширины ближайшего контейнера */
+
+/* ключевые слова */
+margin-top: auto;
+
+/* глобальные значения */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+</pre>
+
+<p>Свойство <code>margin-top</code> может принимать значение <code>auto,</code> <code>&lt;length&gt;</code> или <code>&lt;percentage&gt;</code>. Эти значения могут быть положительные, отрицательные или равны нулю.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Значение margin является фиксированной величиной</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Значение margin выражается в процентах по отношению к <em>ширине </em>блока, содержащего элемент.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер выбирает подходящее значение для использования. Смотри {{cssxref("margin")}}.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры" name="Примеры">Примеры</h2>
+
+<pre class="brush:css;">.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+</pre>
+
+<h2 id="Спецификации" name="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Никаких существенных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>margin-top</code> как анимационный.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Устраняет его влияние на строковые (inline) элементы.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.properties.margin-top")}}</p>
diff --git a/files/ru/web/css/margin/index.html b/files/ru/web/css/margin/index.html
new file mode 100644
index 0000000000..d149b8cc5f
--- /dev/null
+++ b/files/ru/web/css/margin/index.html
@@ -0,0 +1,246 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - справочник
+translation_of: Web/CSS/margin
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>margin</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> на всех четырех сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Применяется ко всем четырём сторонам */
+margin: 1em;
+
+/* по вертикали | по горизонтали */
+margin: 5% auto;
+
+/* сверху | горизонтально | снизу */
+margin: 1em auto 2em;
+
+/* сверху | справа | снизу | слева */
+margin: 2px 1em 0 auto;
+
+/* Глобальные значения */
+margin: inherit;
+margin: initial;
+margin: unset;
+</pre>
+
+<div class="hidden" id="margin">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m0"&gt;margin: 0&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m1"&gt;margin: 1em&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m2"&gt;margin: 5% auto&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m3"&gt;margin: 1em auto 2em&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m4"&gt;margin: 5px 1em 0 auto&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="note"&gt;Все вышеприведенные блоки имеют одинаковую ширину 50%&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: center;
+  flex: none;
+}
+
+.m {
+  display: block;
+  width: 50%;
+  text-align: left;
+  background: #E4F0F5;
+  padding: .5em;
+  border: 1px solid;
+}
+
+.m0 { margin: 0; }
+.m1 { margin: 1em; }
+.m2 { margin: 5% auto; }
+.m3 { margin: 1em auto 2em; }
+.m4 { margin: 5px 1em 0 auto; }</pre>
+</div>
+
+<p>{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>margin</code> может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <code><a href="#&lt;length>">&lt;length&gt;</a></code>, <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code> или является ключевым словом <code><a href="#auto">auto</a></code>. Каждое значение может быть положительным, отрицательным или равным нулю.</p>
+
+<ul>
+ <li>Когда определено <strong>одно</strong> значение, такое значение определено для <strong>всех четырех сторон</strong>.</li>
+ <li>Когда определены <strong>два</strong> значения, то первое значение определяет внешний отступ для <strong>верхней и нижней</strong> стороны, а второе значение определяет отступ для <strong>левой и правой стороны</strong>.</li>
+ <li>Когда определены <strong>три</strong> значение, то первое значение определяет внешний отступ для <strong>верхней</strong> стороны, второе значение определяет внешний отступ для <strong>левой и правой стороны</strong>, а третье значение определяет отступ для <strong>нижней</strong> стороны.</li>
+ <li>Когда определены <strong>четыре</strong> значения, они определяют внешние отступы для <strong>верхней</strong> стороны, <strong>справа</strong>, <strong>снизу</strong> и <strong>слева</strong> в рассмотренном порядке (по часовой стрелке).</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><strong>{{cssxref("length")}}</strong></dt>
+ <dd>Размер отступа как фиксированное значение.</dd>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>Размер отступа в процентах относительно ширины родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="center"&gt;Этот элемент отцентрирован.&lt;/div&gt;
+
+&lt;div class="outside"&gt;Этот элемент расположен за пределами своего контейнера.&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2,8]">.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p>
+
+<h3 id="Больше_примеров">Больше примеров</h3>
+
+<pre class="brush: css">margin: 5%;                 /* все стороны:  отступ 5% */
+
+margin: 10px;               /* все стороны:  отступ 10px */
+
+margin: 1.6em 20px;         /* верх и низ:   отступ 1.6em */
+                            /* право и лево: отступ 20px */
+
+margin: 10px 3% 1em;        /* верх:         отступ 10px */
+                            /* право и лево: отступ 3% */
+                            /* низ:          отступ 1em */
+
+margin: 10px 3px 30px 5px;  /* верх:   отступ 10px */
+                            /* право:  отступ 3px */
+                            /* низ:    отступ 30px */
+                            /* лево:   отступ 5px */
+
+margin: 2em auto;           /* верх и низ: отступ 2em */
+                            /* блок отцентрирован горизонтально */
+
+margin: auto;               /* верх и низ: отступ 0 */
+                            /* блок отцентрирован горизонтально */
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<h3 id="Горизонтальное_выравнивание">Горизонтальное выравнивание</h3>
+
+<p>Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать <code><a href="/ru/docs/Web/CSS/display">display</a>: flex; <a href="/ru/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p>
+
+<p>Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте <code>margin: 0 auto;</code> .</p>
+
+<h3 id="Схлопывание_отступов">Схлопывание отступов</h3>
+
+<p>Иногда внешние отступы (margins) для верхней и нижней сторон схлопываются в один отступ, который равен наибольшему из двух отступов. Смотри <a href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Схлопывание внешних отступов</a> для получения большей информации.</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Box', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td><code>margin</code> определён как анимируемый.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Устраняет его влияние на строковые (inline) элементы..</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.properties.margin")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/ru/docs/Web/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
+ <li><a class="internal" href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="en/CSS/margin collapsing">Схлопывание отступов</a></li>
+</ul>
diff --git a/files/ru/web/css/max-block-size/index.html b/files/ru/web/css/max-block-size/index.html
new file mode 100644
index 0000000000..b76b3084db
--- /dev/null
+++ b/files/ru/web/css/max-block-size/index.html
@@ -0,0 +1,136 @@
+---
+title: max-block-size
+slug: Web/CSS/max-block-size
+translation_of: Web/CSS/max-block-size
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> свойство<strong> <code>max-block-size</code></strong> определяет максимальный горизонтальный или вертикальный размер блока взависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, взависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства <code>max-block-size</code> относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* &lt;percentage&gt; values */
+max-block-size: 75%;
+
+/* Keyword values */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Global values */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<p>Свойство <code>max-block-size</code> принимает такие же значения как {{cssxref("max-width")}} и {{cssxref("max-height")}} свойства.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-block-size: 200px;
+}</pre>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("41.0") }}<sup><a href="#compat_hint1">[1]</a></sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Available since Gecko 38, but behind the preference <code>layout.css.vertical-text.enabled</code>, then disabled by default. The preference has been removed in Gecko 51 and this property cannot be disabled since this version.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The mapped physical properties: {{cssxref("max-width")}} and {{cssxref("max-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/max-height/index.html b/files/ru/web/css/max-height/index.html
new file mode 100644
index 0000000000..a6ee69d1f8
--- /dev/null
+++ b/files/ru/web/css/max-height/index.html
@@ -0,0 +1,124 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+translation_of: Web/CSS/max-height
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="ru/docs/Web/CSS">CSS</a> <strong><code>max-height</code></strong> устанавливает максимальную высоту элемента. Оно предотвращает <a href="/ru/docs/Web/CSS/used_value">используемое значение</a> свойства {{ Cssxref("height") }} от становления больше, чем значение, указанное для <code>max-height</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>{{ Cssxref("max-height") }} перекрывает {{cssxref("height")}}, но {{ Cssxref("min-height") }} перекрывает {{ Cssxref("max-height") }}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значения */
+max-height: 3.5em;
+
+/* &lt;percentage&gt; значения */
+max-height: 75%;
+
+/* Значения-ключевые слова */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Глобальные значения */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Максимальная высота выражается как {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Максимальная высота выражается как {{cssxref("&lt;percentage&gt;")}} от высоты родительского блока.</dd>
+</dl>
+
+<h4 id="Значения-ключевые_слова">Значения-ключевые слова</h4>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Высота не имеет максимального значения.</dd>
+ <dt><code>max-content</code>{{experimental_inline()}}</dt>
+ <dd>Внутренняя предпочтительная высота.</dd>
+ <dt><code>min-content</code>{{experimental_inline()}}</dt>
+ <dd>Внутренняя минимальная высота.</dd>
+ <dt><code>fill-available</code>{{experimental_inline()}}</dt>
+ <dd>Высота родительского блока минус вертикальные <code>margin</code>, <code>border</code>, и <code>padding</code>. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., <code>available</code>.)</dd>
+ <dt><code>fit-content</code>{{experimental_inline()}}</dt>
+ <dd>То же что и <code>max-content.</code></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">table { max-height: 75%; }
+
+form { max-height: none; }
+
+</pre>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь, что элементы с <code>max-height</code> не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. </p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Sizing', '#width-height-keywords', 'max-height') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, и <code>fill-available</code>. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>max-height</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.max-height")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">Блочная модель</a></li>
+ <li>{{ Cssxref("max-width") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}</li>
+</ul>
diff --git a/files/ru/web/css/max-width/index.html b/files/ru/web/css/max-width/index.html
new file mode 100644
index 0000000000..84996127c4
--- /dev/null
+++ b/files/ru/web/css/max-width/index.html
@@ -0,0 +1,169 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+translation_of: Web/CSS/max-width
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="ru/docs/Web/CSS">CSS</a> <strong><code>max-width</code></strong> устанавливает максимальную ширину элемента. Оно предотвращает <a href="/ru/docs/Web/CSS/used_value">используемое значение</a> свойства {{ Cssxref("width") }}  от становления больше, чем значение, указанное для <code>max-width</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>{{ Cssxref("max-width") }} перекрывает {{cssxref("width")}}, но {{ Cssxref("min-width") }} перекрывает {{ Cssxref("max-width") }}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значение */
+max-width: 3.5em;
+
+/* &lt;percentage&gt; значение */
+max-width: 75%;
+
+/* Значения-ключевые слова */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Глобальные значения */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Максимальная ширина выражается как {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Максимальная ширина выражается как {{cssxref("&lt;percentage&gt;")}} от ширины родительского блока.</dd>
+</dl>
+
+<h4 id="Значения-ключевые_слова">Значения-ключевые слова</h4>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Ширина не имеет максимального значения. (по умолчанию)</dd>
+ <dt><code>max-content</code>{{experimental_inline()}}</dt>
+ <dd>Внутренняя предпочтительная ширина.</dd>
+ <dt><code>min-content</code>{{experimental_inline()}}</dt>
+ <dd>Внутренняя минимальная ширина.</dd>
+ <dt><code>fill-available</code>{{experimental_inline()}}</dt>
+ <dd>Ширина родительского блока минус горизонтальные <code>margin</code>, <code>border</code>, и <code>padding</code>. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., <code>available</code>.)</dd>
+ <dt><code>fit-content</code>{{experimental_inline()}}</dt>
+ <dd>То же что и <code>max-content.</code></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В этом примере, "child" будет иметь ширину 150 пикселей или ширину "parent", в зависимости от того, что меньше:</p>
+
+<div id="basic-max-width-demo">
+<pre class="brush: html">&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>
+
+<p>Значение <code>fit-content</code> можно использовать для установки ширины элемента на основе внутреннего размера, требуемого его содержимым:</p>
+
+<div id="fit-content-demo">
+<pre class="brush: html" style="display: none;">&lt;div id="parent"&gt;
+    &lt;div id="child"&gt;
+        Child Text
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь, что элементы с <code>max-width</code> не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. </p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, и <code>fill-available</code>.<em> </em>(CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>max-width</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.max-width")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li>
+ <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">Блочная модель</a>, {{ Cssxref("box-sizing") }}</li>
+</ul>
diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html
new file mode 100644
index 0000000000..b0300f3174
--- /dev/null
+++ b/files/ru/web/css/media_queries/index.html
@@ -0,0 +1,131 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+tags:
+  - CSS
+  - CSS3 Media Queries
+  - Media Queries
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - Responsive Design
+  - TopicStub
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef("CSS3 Media Queries")}}</div>
+
+<p><strong>Media Queries</strong> - ключевой компонент <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных парметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p>
+
+<p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.</p>
+
+<p>In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.</p>
+
+<p>You can learn more about programmatically using media queries in <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="At-rules">At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt>
+ <dd>Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt>
+ <dd>Describes how to test media queries from your JavaScript code, programmatically, to determine the state of the device, and to set up listeners that let your code be notified when the results of media queries change (such as when the user rotates the screen, causing an orientation change).</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/media_queries/using_media_queries/index.html b/files/ru/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..8c3f484537
--- /dev/null
+++ b/files/ru/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,120 @@
+---
+title: Использование медиа-запросов
+slug: Web/CSS/Media_Queries/Using_media_queries
+tags:
+  - Веб
+  - Медиа
+  - Медиа верстка
+  - Медиа запросы
+  - Отзывчивый дизайн
+  - Продвинутый
+  - Резиновая вёрстка
+  - Руководство
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{cssref}}</div>
+
+<p><strong>Медиазапросы</strong> используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства  (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые  есть у Ваших пользователей. </p>
+
+<h2 id="Медиа_для_разных_типов_устройств">Медиа для разных типов устройств</h2>
+
+<p>Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:</p>
+
+<pre class="brush: css">@media print { ... }</pre>
+
+<p>Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:</p>
+
+<pre class="brush: css">@media screen, print { ... }</pre>
+
+<p>Список устройств вы можете найти перейдя по <a href="/en-US/docs/CSS/@media#Media_types">этой ссылке</a>. Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.</p>
+
+<h2 id="Узконаправленные_media">Узконаправленные @media</h2>
+
+<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> описывают некие характеристики определенного {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда <em>основное </em>устройство ввода пользователя (например мышь)  будет расположено над элементами:</p>
+
+<pre class="brush: css">@media (hover: hover) { ... }</pre>
+
+<p>Многие медиа-выражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS код применяется только если ширина {{glossary("viewport")}} меньше или равна 12450px:</p>
+
+<pre class="brush: css">@media (max-width: 12450px) { ... }</pre>
+
+<p>Если вы создаете медиа-запрос без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:</p>
+
+<pre class="brush: css">@media (color) { ... }</pre>
+
+<p>Если функция не применима к устройству, на котором работает браузер, выражения, включающие эту функцию, всегда ложны. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формат экрана:</p>
+
+<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+
+<p>Дополнительные примеры медиа запросов, смотрите на <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features">справочной странице</a> для каждой конкретной функции.</p>
+
+<h2 id="Создание_комплексных_медиа_запросов">Создание комплексных медиа запросов</h2>
+
+<p>Иногда вы хотите создать медиа-запрос, включающий в себя несколько условий. В таком случае применяются <em>логические операторы</em>: <code>not</code>, <code>and</code>, and <code>only</code>. Кроме того, вы можете объединить несколько медиа-запросов в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.</p>
+
+<p>В прошлом примере мы видели как применяется оператор <code>and</code> для группировки <em>type</em> и функции. Оператор <code>and</code> так же может комбинировать несколько функций в одно медиа-выражение. Между тем, оператор not отрицает медиазапрос, полностью инвертируя его значение. Единственный оператор не позволяет старым браузерам применять стили.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In most cases, the <code>all</code> media type is used by default when no other type is specified. However, if you use the <code>not</code> or <code>only</code> operators, you must explicitly specify a media type.</p>
+</div>
+
+<h3 id="and"><code>and</code></h3>
+
+<p>The <code>and</code> keyword combines a media feature with a media type <em>or</em> other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:</p>
+
+<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<p>To limit the styles to devices with a screen, you can chain the media features to the <code>screen</code> media type:</p>
+
+<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ...  }</pre>
+
+<h3 id="comma-separated_lists">comma-separated lists</h3>
+
+<p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px <em>or</em> is a screen device in portrait mode:</p>
+
+<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+
+<p>Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.</p>
+
+<h3 id="not"><code>not</code></h3>
+
+<p>The <code>not</code> keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The <code>not</code> keyword can't be used to negate an individual feature query, only an entire media query. The <code>not</code> is evaluated last in the following query:</p>
+
+<pre class="brush: css">@media not all and (monochrome) { ... }
+</pre>
+
+<p>... so that the above query is evaluated like this:</p>
+
+<pre class="brush: css">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... rather than like this:</p>
+
+<pre class="example-bad brush: css">@media (not all) and (monochrome) { ... }</pre>
+
+<p>As another example, the following media query:</p>
+
+<pre class="brush: css">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>... is evaluated like this:</p>
+
+<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="only"><code>only</code></h3>
+
+<p>The <code>only</code> keyword prevents older browsers that do not support media queries with media features from applying the given styles. <em>It has no effect on modern browsers.</em></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" /&gt;
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/CSS/@media#Media_types">Media types</a></li>
+ <li><a href="/en-US/docs/CSS/@media#Media_features">Media features</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Testing media queries using code</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions#Media_features">Extended Mozilla media features</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions#Media_features">Extended WebKit media features</a></li>
+</ul>
diff --git a/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html b/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html
new file mode 100644
index 0000000000..878621ebd3
--- /dev/null
+++ b/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html
@@ -0,0 +1,83 @@
+---
+title: Тестирование медиа-запросов программно
+slug: Web/CSS/Media_Queries/Тестирование_медиа_запросы
+tags:
+  - Запросы
+  - медиа-запросы
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<div>{{cssref}}</div>
+
+<p> {{Glossary("DOM")}} предоставляет возможности, позволяющие тестировать результат  <a href="/en-US/docs/Web/CSS/Media_Queries">медиа-запросов</a> программно, с помощью интерфейса {{domxref("MediaQueryList") }}, его методов и свойств. Однажды, создав объект {{domxref("MediaQueryList") }} вы можете проверить результат запроса или получать уведомление, при изменении результата.</p>
+
+<h2 id="Создание_списка_медиа-запросов">Создание списка медиа-запросов</h2>
+
+<p>Прежде, чем вы сможете оценить результаты медиа-запросов, вам необходимо создать объект {{domxref("MediaQueryList") }} , отражающий запрос. Для этого используйется метод {{domxref("window.matchMedia") }}.</p>
+
+<p>Например, настройка списка запросов, который определяет, находится ли устройство в альбомной или книжной ориентации:</p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="Проверка_результата_запроса">Проверка результата запроса</h2>
+
+<p>После того, как вы создали свой список медиа-запросов, вы можете проверить результат запроса, посмотрев на значение его свойства <code>matches</code>:</p>
+
+<pre class="brush: js">if (mediaQueryList.matches) {
+  /* Окно просмотра в настоящее время находится в книжной ориентации */
+} else {
+  /* Окно просмотра в настоящее время находится в альбомной ориентации */
+}
+</pre>
+
+<h2 id="Получение_уведомлений_о_запросах">Получение уведомлений о запросах</h2>
+
+<p>Если вам необходимо постоянно следить за изменениями в результате запроса, эффективнее зарегистрировать <a href="/en-US/docs/Web/API/EventTarget/addEventListener">слушатель</a>, чем вытаскивать результат запросов.  Для этого вызовите метод <code>addListener()</code> объекта {{domxref("MediaQueryList") }} с функцией обратного вызова, которая вызывается при изменении статуса медиа-запроса (например, тест медиа-запроса переходит от <code>true</code> к <code>false</code>):</p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка запросов.
+function handleOrientationChange(mql) { ... } // Определение функции обратного вызова для слушателя событий.
+mediaQueryList.addListener(handleOrientationChange); // Добавление функции обратного вызова в качестве слушателя к списку запросов.
+
+handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
+</pre>
+
+<p>Этот код создает список медиа-запросов для тестирование ориентации, а затем добавляет к нему слушатель событий. После добавления слушателя, мы, также, непосредственно вызываем слушателя. Это заставляет нашего слушателя выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.</p>
+
+<p>Функция <code>handleOrientationChange()</code> будет следить за результатом запроса и обрабатывать все, что нам нужно сделать при изменении ориентации:</p>
+
+<pre class="brush: js">function handleOrientationChange(evt) {
+  if (evt.matches) {
+    /* Окно просмотра в настоящее время находится в книжной ориентации */
+  } else {
+    /* Окно просмотра в настоящее время находится в альбомной ориентации */
+  }
+}
+</pre>
+
+<p>Выше, мы определяем параметры как <code>evt</code> — event объект. Это имеет значение, поскольку <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">новые реализации <code>MediaQueryList</code></a> обрабатывают слушатели событий стандартным способом. Они больше не используют нестандартный механизм  {{domxref("MediaQueryListListener")}} , а используют стандартную настройку слушателя событий, передавая <a href="/en-US/docs/Web/API/Event">объект event</a>  {{domxref("MediaQueryListEvent")}} как аргумент функции обратного вызова.</p>
+
+<p>Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства <code>MediaQueryList</code> путем прямого доступа к нему или доступа к event объекту.</p>
+
+<h2 id="Уведомление_о_завершении_запроса">Уведомление о завершении запроса</h2>
+
+<p>Для прекращения уведомлений об изменении значения вашего медиа-запроса вызовите метод <code>removeListener()</code> для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:</p>
+
+<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> interface</h3>
+
+
+
+<p>{{Compat("api.MediaQueryList")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
+ <li>{{domxref("window.matchMedia()") }}</li>
+ <li>{{domxref("MediaQueryList") }}</li>
+ <li>{{domxref("MediaQueryListEvent") }}</li>
+</ul>
diff --git a/files/ru/web/css/min-height/index.html b/files/ru/web/css/min-height/index.html
new file mode 100644
index 0000000000..8459a8ec75
--- /dev/null
+++ b/files/ru/web/css/min-height/index.html
@@ -0,0 +1,119 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+translation_of: Web/CSS/min-height
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="ru/docs/Web/CSS">CSS</a><strong> <code>min-height</code></strong> устанавливает минимальную высоту элемента. Оно предотвращает <a href="/ru/docs/Web/CSS/used_value">используемое значение</a> свойства {{ Cssxref("height") }} от становления меньше, чем значение, указанное для <code>min-height</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Высота элемента принимает значение <code>min-height</code> всякий раз, когда <code>min-height</code> больше чем {{ Cssxref("max-height") }} или {{Cssxref("height")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значения */
+min-height: 3.5em;
+
+/* &lt;percentage&gt; значения */
+min-height: 10%;
+
+/* Значения-ключевые слова */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* Глобальные значения */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Минимальная высота выражается как {{cssxref("&lt;length&gt;")}}. Отрицательные значения делают свойство недействительным.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Минимальная высота выражается как {{cssxref("&lt;percentage&gt;")}} от высоты родительского блока. Отрицательные значения делают свойство недействительным.</dd>
+</dl>
+
+<h4 id="Значения-ключевые_слова">Значения-ключевые слова</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.</dd>
+</dl>
+
+<dl>
+ <dt><code>max-content</code> {{ experimental_inline() }}</dt>
+ <dd>Внутренняя предпочтительная высота.</dd>
+ <dt><code>min-content</code> {{ experimental_inline() }}</dt>
+ <dd>Внутренняя минимальная высота.</dd>
+ <dt><code>fill-available</code>{{ experimental_inline() }}</dt>
+ <dd>Высота родительского блока минус вертикальные <code>margin</code>, <code>border</code>, и <code>padding</code>. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., <code>available</code>.)</dd>
+ <dt><code>fit-content</code> {{ experimental_inline() }}</dt>
+ <dd>Согласно CSS3 Box, это синоним <code>min-content</code>. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">table { min-height: 75%; }
+
+form { min-height: 0; }
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, и <code>fill-available</code>. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Добавляет ключевое слово <code>auto</code> и использует его как первоначальное значение.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>min-height</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.min-height")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ Cssxref("height") }}, {{ Cssxref("max-height") }}</li>
+ <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">Блочная модель</a>, {{ Cssxref("box-sizing") }}</li>
+</ul>
diff --git a/files/ru/web/css/min-width/index.html b/files/ru/web/css/min-width/index.html
new file mode 100644
index 0000000000..10feff5ec9
--- /dev/null
+++ b/files/ru/web/css/min-width/index.html
@@ -0,0 +1,118 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+translation_of: Web/CSS/min-width
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="ru/docs/Web/CSS">CSS</a> <strong><code>min-width</code></strong> устанавливает минимальную ширину элемента. Оно предотвращает <a href="/ru/docs/Web/CSS/used_value">используемое значение</a> свойства {{ Cssxref("width") }}  от становления меньше, чем значение, указанное для <code>min-width</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Ширина элемента принимает значение <code>min-width</code> когда <code>min-width</code> больше чем {{ Cssxref("max-width") }} или {{Cssxref("width")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значение */
+min-width: 3.5em;
+
+/* &lt;percentage&gt; значение */
+min-width: 10%;
+
+/* Значения-ключевые слова */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Глобальные значения */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Минимальная ширина выражается как {{cssxref("&lt;length&gt;")}}. Отрицательные значения делают свойство недействительным.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Минимальная ширина выражается как {{cssxref("&lt;percentage&gt;")}} от ширины родительского блока. Отрицательные значения делают свойство недействительным.</dd>
+</dl>
+
+<h4 id="Значения-ключевые_слова">Значения-ключевые слова</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.</dd>
+ <dt><code>max-content</code> {{ experimental_inline() }}</dt>
+ <dd>Внутренняя предпочтительная ширина.</dd>
+ <dt><code>min-content</code> {{ experimental_inline() }}</dt>
+ <dd>Внутренняя минимальная ширина.</dd>
+ <dt><code>fill-available</code>{{ experimental_inline() }}</dt>
+ <dd>Ширина родительского блока минус горизонтальные <code>margin</code>, <code>border</code>, и <code>padding</code>. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., <code>available</code>.)</dd>
+ <dt><code>fit-content</code> {{ experimental_inline() }}</dt>
+ <dd>Определяет как <code>min(max-content, max(min-content, fill-available))</code>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css;">table { min-width: 75%; }
+
+form { min-width: 0; }
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Sizing', '#width-height-keywords', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, и <code>fill-available</code>. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Добавляет ключевое слово <code>auto</code> и использует как значение по умолчанию.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>min-width</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.min-width")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ Cssxref("width") }}, {{ Cssxref("max-width") }}</li>
+ <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">Блочная модель</a>, {{ Cssxref("box-sizing") }}</li>
+</ul>
diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html
new file mode 100644
index 0000000000..a938b33cf0
--- /dev/null
+++ b/files/ru/web/css/minmax()/index.html
@@ -0,0 +1,191 @@
+---
+title: minmax()
+slug: Web/CSS/minmax()
+translation_of: Web/CSS/minmax()
+---
+<p><code><strong>minmax</strong></code><strong><code>()</code></strong> это <a href="/en-US/docs/Web/CSS">CSS</a> ф<span id="result_box" lang="ru"><span>ункция, определяющая диапазон размеров, который больше или равен </span></span><var>min</var><span lang="ru"><span> и меньше или равен </span></span><var>max</var>. Используется в <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grids</a>.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;inflexible-breadth&gt;, &lt;track-breadth&gt; values */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* &lt;fixed-breadth&gt;, &lt;track-breadth&gt; values */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* &lt;inflexible-breadth&gt;, &lt;fixed-breadth&gt; values */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция принимает два параметра, <em>min</em> и <em>max</em>.</p>
+
+<p>Каждый параметр может быть значением <code>&lt;length&gt;</code>, либо <code>&lt;percentage&gt;</code>, либо <code>&lt;flex&gt;</code>, или одним из ключевых слов <code>max-content</code>, <code>min-content</code>, или <code>auto</code>.</p>
+
+<p>Если <var>max</var> &lt; <var>min</var>, то <var>max</var> игнорируется и <code>minmax(min,max)</code> обрабатывается как <var>min</var>. As a maximum, a {{cssxref("flex_value","&lt;flex&gt;")}} value sets the flex factor of a grid track; it is invalid as a minimum.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>A non-negative length.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <code>&lt;percentage&gt;</code> must be treated as <code>auto</code>. The {{glossary("user agent")}} may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.</dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd>A non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor.</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Represents the largest max-content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Represents the largest min-content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>auto</code></dt>
+ <dd>As a maximum, identical to <code>max-content</code>. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    Item as wide as the content,&lt;br/&gt;
+    but at most 300 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Item with flexible width but a minimum of 200 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Inflexible item of 150 pixels width.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Track_sizing_and_minmax()">Basic concepts of grid layout - track sizing with minmax()</a></em></li>
+ <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">
+<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>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/mix-blend-mode/index.html b/files/ru/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..996a1d611a
--- /dev/null
+++ b/files/ru/web/css/mix-blend-mode/index.html
@@ -0,0 +1,649 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - CSS композитинг
+  - CSS свойство
+translation_of: Web/CSS/mix-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS свойство <strong><code>mix-blend-mode</code></strong> определяет режим смешивания цветов выбранного элемента с низлежащими слоями.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</p>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css">/* Ключевые слова */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Глобальные значения */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;blend-mode&gt;")}}</dt>
+ <dd>Режим смешивания, который нужно применить.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<div class="hidden" id="mix-blend-mode">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;Blending in isolation (no blending with the background)&lt;/div&gt;
+    &lt;div class="row isolate"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;defs&gt;
+                &lt;linearGradient id="red"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="green"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="blue"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+              &lt;/defs&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;Blending globally (blend with the background)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: auto;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  height: auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  position: relative;
+  background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
+              linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
+
+.R {
+  transform-origin: center;
+  transform: rotate(-30deg);
+  fill: url(#red);
+}
+
+.G {
+  transform-origin: center;
+  transform: rotate(90deg);
+  fill: url(#green);
+}
+
+.B {
+  transform-origin: center;
+  transform: rotate(210deg);
+  fill: url(#blue);
+}
+
+.isolate .group { isolation: isolate; }
+
+.normal .item      { mix-blend-mode: normal; }
+.multiply .item    { mix-blend-mode: multiply; }
+.screen .item      { mix-blend-mode: screen; }
+.overlay .item     { mix-blend-mode: overlay; }
+.darken .item      { mix-blend-mode: darken; }
+.lighten .item     { mix-blend-mode: lighten; }
+.color-dodge .item { mix-blend-mode: color-dodge; }
+.color-burn .item  { mix-blend-mode: color-burn; }
+.hard-light .item  { mix-blend-mode: hard-light; }
+.soft-light .item  { mix-blend-mode: soft-light; }
+.difference .item  { mix-blend-mode: difference; }
+.exclusion .item   { mix-blend-mode: exclusion; }
+.hue .item         { mix-blend-mode: hue; }
+.saturation .item  { mix-blend-mode: saturation; }
+.color .item       { mix-blend-mode: color; }
+.luminosity .item  { mix-blend-mode: luminosity; }
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</p>
+
+<h3 id="Пример_HTML">Пример HTML</h3>
+
+<pre class="brush: html">&lt;div class="isolate"&gt;
+  &lt;div class="circle circle-1"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-2"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css"><code>.</code>circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Без isolation, цвет фона будет учитываться */
+  position: relative;
+}</pre>
+
+<p>{{EmbedLiveSample("Пример_HTML", "100%", "180")}}</p>
+
+<h3 id="Пример_SVG">Пример SVG</h3>
+
+<p>Этот пример повторяет предыдущий с использованием SVG.</p>
+
+<pre class="brush: html">&lt;svg&gt;
+  &lt;g class="isolate"&gt;
+    &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
+    &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
+    &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Без isolation, цвет фона будет учитываться */</pre>
+
+<p>{{EmbedLiveSample("Пример_SVG", "100%", "180")}}</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', '#mix-blend-mode', 'mix-blend-mode') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/number/index.html b/files/ru/web/css/number/index.html
new file mode 100644
index 0000000000..325e4954b7
--- /dev/null
+++ b/files/ru/web/css/number/index.html
@@ -0,0 +1,139 @@
+---
+title: <number>
+slug: Web/CSS/number
+translation_of: Web/CSS/number
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;number&gt;</code></strong> - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types">тип хранения данных</a> в <a href="/en-US/docs/Web/CSS">CSS</a>  представляющий собой число: либо целое, либо с дробной частью.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Синтаксис <code>&lt;number&gt;</code> расширяет синтаксис {{cssxref("&lt;integer&gt;")}}. Дробное значение представлено с помощью <code>.</code>, после которой стоит одна (или более) цифра, и может быть присоединено к целочисленному типу данных. Не существует единицы измерения, связанной с числами.</p>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>Во время анимации, значения типа данных CSS <code>&lt;number&gt;</code> являются интерполированными как числа вещественные или с плавающей точкой. Скорость интерполяции определена <a href="/en-US/docs/Web/CSS/single-transition-timing-function">timing function</a>, связанной с анимацией.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Корректные_числа">Корректные числа</h3>
+
+<pre>12          Ряд, состоящий из &lt;integer&gt;, также является &lt;number&gt;.
+4.01        Положительное число с плавающей точкой
+-456.8      Отрицательно число с плавающей точкой
+0.0         Нуль
++0.0        Нуль, с + перед ним
+-0.0        Нуль, с - перед ним
+.60         Дробное число без присутствия нуля
+10e3        Научное обозначение
+-3.4e-2     Сложное научное обозначение
+</pre>
+
+<h3 id="Некорректные_числа">Некорректные числа</h3>
+
+<pre class="example-bad">12.         После дробных чисел должна присутствовать как минимум 1 цифра.
++-12.2      Одновременно перед числом допустимо ставить только один из симоволов +/-.
+12.1.1      Разрешена только одна "дробная" точка.
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Values', '#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Явное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Неявное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Научное обозначение</td>
+   <td>43.0</td>
+   <td>29</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Научное обозначение</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/object-fit/index.html b/files/ru/web/css/object-fit/index.html
new file mode 100644
index 0000000000..098d5875e3
--- /dev/null
+++ b/files/ru/web/css/object-fit/index.html
@@ -0,0 +1,162 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - CSS Property
+  - object-fit
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство<strong> <code>object-fit</code></strong> определяет, как содержимое заменяемого элемента, такого как <a href="/ru/docs/Web/HTML/Element/img" title="The HTML &lt;img> element embeds an image into the document. It is a replaced element."><code>&lt;img&gt;</code></a> или <code><a href="/ru/docs/Web/HTML/Element/video" title="The HTML Video element (&lt;video>) embeds a media player which supports video playback into the document.">&lt;video&gt;</a></code>, должно заполнять контейнер относительно его высоты и ширины.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p class="brush:css">Для <code>object-fit</code> можно указать одно из нижеперечисленных свойств.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.</dd>
+ <dt><code>cover</code></dt>
+ <dd>Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.</dd>
+ <dt><code>none</code></dt>
+ <dd>Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определен с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.</dd>
+</dl>
+
+<dl>
+ <dt><code>scale-down</code></dt>
+ <dd>Контент изменяет размер, сравнивая разницу между <code>none</code> и <code>contain, </code>для того, чтобы найти наименьший конкретный размер объекта.</dd>
+</dl>
+
+<h3 id="Правильный_синтаксис">Правильный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML_Контент">HTML Контент</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Контент">CSS Контент</h3>
+
+<pre class="brush: css">h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', 500, 450) }}</p>
+
+<h2 id="Specifications" name="Specifications">Технические параметры</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td><code>Добавлены ключевые слова from-image</code> <code>и flip</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+<p>{{Compat("css.properties.object-fit")}}</p>
+
+<h2 id="See_also" name="See_also">Смотри также</h2>
+
+<ul>
+ <li>Другие свойства CSS, связанные с изображениями (картинками): {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+ <li>{{cssxref("background-size")}}</li>
+</ul>
diff --git a/files/ru/web/css/object-position/index.html b/files/ru/web/css/object-position/index.html
new file mode 100644
index 0000000000..4b4bf53fff
--- /dev/null
+++ b/files/ru/web/css/object-position/index.html
@@ -0,0 +1,116 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+translation_of: Web/CSS/object-position
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a>-свойство <strong><code>object-position</code></strong> определяет выравнивание контента выбранного <a href="/ru/docs/Web/CSS/%D0%97%D0%B0%D0%BC%D0%B5%D1%89%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">замещаемого элемента</a> внутри блока элемента.</span> На областях блока, не покрытых объектом замещаемого элемента, будет отображаться фон элемента.</p>
+
+<p>Вы можете задавать способ подстройки собственного размера объекта замещаемого элемента (т. е., его естественного размера) под размер блока элемента, используя свойство {{cssxref("object-fit")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* значения &lt;position&gt; */
+object-position: center top;
+object-position: 100px 50px;
+
+/* Глобальные значения */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>От одного до четырёх значений, которые определяют 2D-позицию элемента. Могут использоваться как абсолютные, так и относительные значения сдвигов.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Позиция может быть даже такой, что замещаемый элемент будет отрисовываться за пределами своего блока.</p>
+</div>
+
+<h2 id="Формальное_определение">Формальное определение</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Формальный_синтаксис">Формальный синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Позиционирование_изображений">Позиционирование изображений</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<p>Здесь мы видим HTML, содержаний два {{HTMLElement("img")}}-элемента, отображающие логотипы MDN.</p>
+
+<pre class="brush: html notranslate">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>CSS содержит стандартные стили для самого <code>&lt;img&gt;</code>-элемента, а также отдельные стили для обоих изображений.</p>
+
+<pre class="brush: css notranslate">img {
+  width: 300px;
+  height: 250px;
+  border: 1px solid black;
+  background-color: silver;
+  margin-right: 1em;
+  object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+</pre>
+
+<p>Первое изображение расположено с отступом в 10 пикселей относительно левого края блока элемента. Второе изображение расположено своим правым краем впритык к правому краю блока элемента и сдвинуто вниз на 10% высоты блока элемента.</p>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Позиционирование_изображений', '100%','600px') }}</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('CSS3 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.object-position")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Другие CSS-свойства, связанные с изображениями: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/ru/web/css/opacity/index.html b/files/ru/web/css/opacity/index.html
new file mode 100644
index 0000000000..5d0891baac
--- /dev/null
+++ b/files/ru/web/css/opacity/index.html
@@ -0,0 +1,154 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - CSS свойство
+  - Opacity
+  - Непрозрачность
+  - Прозрачность
+translation_of: Web/CSS/opacity
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-свойство <strong><code>opacity</code></strong> устанавливает непрозрачность элемента. Непрозрачность - это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
+
+
+
+<p><code>opacity</code> применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.</p>
+
+<p>Использование <code>opacity</code> со значением, отличным от <code>1</code>, помещает элемент в новый <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context">контекст наложения</a>.</p>
+
+<p>Если вы  <a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">не хотите применять opacity к дочерним элементам</a>, используйте взамен свойство {{cssxref("background")}}. Например:</p>
+
+<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;alpha-value&gt;</code></dt>
+ <dd>{{cssxref("number", "число")}} в пределах от <code>0.0</code> до <code>1.0</code>, включительно, или {{cssxref("percentage", "проценты")}} в пределах от <code>0%</code> до <code>100%</code>, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Значение</th>
+    <th>Действие</th>
+   </tr>
+   <tr>
+    <td><code>0</code></td>
+    <td>Элемент полностью прозрачен (он становится невидимым).</td>
+   </tr>
+   <tr>
+    <td>Любое {{cssxref("number", "число")}} строго между <code>0</code> и <code>1</code></td>
+    <td>Элемент полупрозрачный (т.е. содержимое элемента можно увидеть).</td>
+   </tr>
+   <tr>
+    <td><code>1</code> (значение по умолчанию)</td>
+    <td>Элемент полностью непрозрачный (видимый).</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<pre class="brush: css">div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Едва видимый текст на фоне */
+}
+.medium {
+  opacity: 0.5; /* Видимость текста более четкая на фоне */
+}
+.heavy {
+  opacity: 0.9; /* Видимость текста очень четкая на фоне */
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="light"&gt;You can barely see this.&lt;/div&gt;
+&lt;div class="medium"&gt;This is easier to see.&lt;/div&gt;
+&lt;div class="heavy"&gt;This is very easy to see.&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Базовый_пример', '640', '64')}}</p>
+
+<h3 id="Различная_непрозрачность_с_hover">Различная непрозрачность с <code>:hover</code></h3>
+
+<pre class="brush: css">img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 и ниже */
+  zoom: 1; /* Триггеры "hasLayout" в IE 7 и ниже */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}</pre>
+
+<pre class="brush: html">&lt;img src="<a href="https://developer.mozilla.org/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>"
+  alt="MDN logo" width="128" height="146"
+  class="opacity"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Различная_непрозрачность_с_hover', '150', '175')}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещен текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.</p>
+
+<p>Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим <a href="https://www.w3.org/WAI/intro/wcag">Рекомендациям по доступности веб-контента (WCAG)</a>, для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-weight">жирный</a> или крупнее, или 24px или выше.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>opacity</code> как анимированную.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.opacity")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">Microsoft's filter:alpha(opacity=xx)</a></li>
+</ul>
diff --git a/files/ru/web/css/order/index.html b/files/ru/web/css/order/index.html
new file mode 100644
index 0000000000..8ee0382c91
--- /dev/null
+++ b/files/ru/web/css/order/index.html
@@ -0,0 +1,98 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS свойства
+translation_of: Web/CSS/order
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство  <strong><code>order</code></strong> определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значению <code>order</code>. Элементы с одинаковым значением <code>order</code>  располагаются в том порядке, в каком они находятся в исходном коде.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Числовые значения, в том числе отрицательные */
+order: 5;
+order: -5;
+
+/* Глобальные значения */
+order: inherit;
+order: initial;
+order: unset;</pre>
+
+<div class="note">
+<p><strong>Важно</strong>: <code>order</code> воздействует только на <strong>визуальный порядок</strong> элементов, но не логический порядок или табуляцию. <code><strong>order</strong></code> не должен применяться к невизуальным медиаданным, таким как речь.</p>
+</div>
+
+<p>Посмотрите <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Используем CSS flexible boxes</a> для более подробной информации и дополнительных свойствах.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Представляет порядковую группу, которая присвоена flex элементу.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Имеется базовый отрывок HTML кода:</p>
+
+<pre class="brush:html;">&lt;header&gt;...&lt;/header&gt;
+&lt;main&gt;
+  &lt;article&gt;Article&lt;/article&gt;
+  &lt;nav&gt;Nav&lt;/nav&gt;
+  &lt;aside&gt;Aside&lt;/aside&gt;
+&lt;/main&gt;
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.</p>
+
+<pre class="brush:css;">main { display: flex;  text-align:center; }
+main &gt; article { flex:1;        order: 2; }
+main &gt; nav     { width: 200px;  order: 1; }
+main &gt; aside   { width: 200px;  order: 3; }</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Спецификация">Спецификация</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('CSS3 Flexbox', '#order-property', 'order')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.order")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/docs/Web/Guide/CSS/Flexible_boxes">Используя CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/orphans/index.html b/files/ru/web/css/orphans/index.html
new file mode 100644
index 0000000000..89b79dc9d2
--- /dev/null
+++ b/files/ru/web/css/orphans/index.html
@@ -0,0 +1,117 @@
+---
+title: orphans
+slug: Web/CSS/orphans
+tags:
+  - Верстка
+  - печать
+  - разрыв страницы
+  - фрагментация
+translation_of: Web/CSS/orphans
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>orphans</code> устанавливает <em>минимальное</em> число строк в блочном контейнере, которое должно быть показано <em>внизу</em> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media">страницы</a>, региона или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Columns">столбца</a>.</p>
+
+<pre class="brush:css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* &lt;integer&gt; значения */</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Глобальные значения */</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p>В типографии, <em>orphan</em> это первая линия абзаца, которая отображается внизу страницы. (Абзац продолжается на следующей странице.)</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Минимальное число строк, которое можно оставить внизу фрагмента перед разрывом фрагмента. Значение должно быть положительным.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the first paragraph containing some text.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the third paragraph. It has a little bit more text than the first one.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[5] line-numbers language-css"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#8cffa0</span><span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">150</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">columns</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
+  <span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">p</span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#8ca0ff</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">p<span class="pseudo-class token">:first-child</span></span> <span class="punctuation token">{</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush: css; highlight[5] line-numbers language-css"> </pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", 380, 150)}}</p>
+
+<div> </div>
+
+<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('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Расширяет <code>orphans</code> для применения в любых фрагментах, включая страницы, регионы и столбцы.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.orphans")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("widows")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media">Paged media</a></li>
+</ul>
diff --git a/files/ru/web/css/overflow-block/index.html b/files/ru/web/css/overflow-block/index.html
new file mode 100644
index 0000000000..863222d28f
--- /dev/null
+++ b/files/ru/web/css/overflow-block/index.html
@@ -0,0 +1,135 @@
+---
+title: overflow-block
+slug: Web/CSS/overflow-block
+translation_of: Web/CSS/overflow-block
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>overflow-block</code></strong> устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.</p>
+
+<div class="note">
+<p>Свойтсво <code>overflow-block</code> отображается на {{Cssxref("overflow-y")}} или {{Cssxref("overflow-x")}} в зависимости от режима записи документа.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения свойства */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* Глобальные значения */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+</pre>
+
+<p>Свойство <code>overflow-block</code> указывается как одно ключевое слово, выбранное из списка значений ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Содержимое не обрезается и может отображаться за пределами начального и конечного краев блока отступа.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>При необходимости содержимое обрезается, чтобы поместиться в размер блока в поле заполнения. Браузеры отображают полосы прокрутки вне зависимости от того, вырезано ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать переполненное содержимое.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но все же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.</dd>
+</dl>
+
+<h3 id="Формат_синтаксиса">Формат синтаксиса</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-block:hidden&lt;/code&gt; — скрывает текст за пределами поля
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:scroll&lt;/code&gt; — всегда добавляет полосу прокрутки
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:visible&lt;/code&gt; — отображает текст вне поля, если это необходимо
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:auto&lt;/code&gt; — в большинстве браузеров, что эквивалентно &lt;code&gt;scroll&lt;/code&gt;
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 12px;}
+#div2 { overflow-block: scroll; margin-bottom: 12px;}
+#div3 { overflow-block: visible; margin-bottom: 120px;}
+#div4 { overflow-block: auto; margin-bottom: 120px;}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Examples", "100%", "780")}}</p>
+</figure>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }}</td>
+   <td>{{ Spec2('CSS3 Overflow') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение (pull request).</div>
+
+<p>{{Compat("css.properties.overflow-block")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Связанные свойства CSS: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Логические свойства CSS</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">Режимы письма</a></li>
+</ul>
diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html
new file mode 100644
index 0000000000..7250663fe6
--- /dev/null
+++ b/files/ru/web/css/overflow-wrap/index.html
@@ -0,0 +1,147 @@
+---
+title: overflow-wrap
+slug: Web/CSS/overflow-wrap
+translation_of: Web/CSS/overflow-wrap
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>overflow-wrap</strong></code> применяется к строковым элементам, устанавливая должен ли браузер расставлять переносы строк внутри неразрывной строки, чтобы избежать выхода текста за границы элемента.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div>
+
+<p class="hidden">Исходники для интерактивных примеров хранятся в GitHub репозитории. Если вы хотите законтребьюить в проект с примерами, пожалуйста, склонируйте  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам пул реквест.</p>
+
+<div class="note">
+<p><strong>Note:</strong> В отличие от {{cssxref("word-break")}}, <code>overflow-wrap</code> создает перенос только, если целое слово не может быть размещено на своей линии без переполнения</p>
+</div>
+
+<p>Изначально свойство <code>word-wrap</code> не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в <code>overflow-wrap</code> c алиасом <code>word-wrap</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css notranslate">/* Keyword values */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* Global values */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+</pre>
+
+<p>Свойство <code>overflow-wrap</code> задается с помощью ключевого слова и выбирается из списка значений приведенных ниже:</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Разрыв строк происходит согласно обычным правилам разрыва (такими как пробел между двумя словами).</dd>
+ <dt><code>anywhere</code></dt>
+ <dd>Чтобы избежать <span style="">выхода текста за границы элемента, таких как длинных слов или URL, неразрывная строка символов может быть разбита </span>в любой точке, если в строке нет других допустимых точек разрыва. Тире не вставляется. Возможность мягкого переноса, представленная разрывом слов, рассматривается, когда вычисляется минимальный контент внутренних размеров.</dd>
+ <dt><code>break-word</code></dt>
+ <dd>Так же как и со значением <code>anywhere</code>, слова, которые обычно нельзя перенести по слогам, могут быть разбиты в произвольных точках, если нет других допустимых разрывов в строке, но возможность мягкого переноса, представленная разрывом слов не рассматривается, когда вычисляется минимальный контент внутренних размеров.</dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Сравнение_overflow-wrap_word-break_и_hyphens">Сравнение overflow-wrap, word-break, и hyphens</h3>
+
+<p>Этот пример сравнивает результаты применения <code>overflow-wrap</code>, <code>word-break</code>, и <code>hyphens</code>, когда разбивается длинное слово.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="normal"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;normal&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-anywhere"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;overflow-wrap: anywhere&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-break-word"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="word-break"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;word-break&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, without &lt;code&gt;lang&lt;/code&gt; attribute)&lt;/p&gt;
+&lt;p lang="en"&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, English rules)&lt;/p&gt;
+&lt;p class="hyphens" lang="de"&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, German rules)&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+   width: 13em;
+   margin: 2px;
+   background: gold;
+}
+
+.ow-anywhere {
+   overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+   overflow-wrap: break-word;
+}
+
+.word-break {
+   word-break: break-all;
+}
+
+.hyphens {
+   hyphens: auto;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Text') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.overflow-wrap")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("text-overflow")}}</li>
+</ul>
diff --git a/files/ru/web/css/overflow/index.html b/files/ru/web/css/overflow/index.html
new file mode 100644
index 0000000000..e8977b7592
--- /dev/null
+++ b/files/ru/web/css/overflow/index.html
@@ -0,0 +1,134 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+translation_of: Web/CSS/overflow
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Резюме</h2>
+
+<p>Свойство CSS <code>overflow</code> определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.</p>
+
+<p>Использование свойства <code>overflow</code> со значениями, отличными от <code>visible</code>, (значение, принятое по умолчанию), создаёт новый <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">блочный контекст форматирования</a>. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута <code>scrollTop</code> для соответствующего HTML-элемента, даже если <code>overflow</code> имеет значение <code>hidden</code>, элемент, возможно, придется прокрутить.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Формат синтаксиса</a>: {{csssyntax("overflow")}}</pre>
+
+<pre>overflow: visible
+overflow: hidden
+overflow: scroll
+overflow: auto
+
+overflow: inherit
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Контет обрезается, без предоставления прокрутки.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могу печатать переполненное содержимое.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.</dd>
+</dl>
+
+<h4 id="Mozilla_Extensions" name="Mozilla_Extensions">Расширения Mozilla</h4>
+
+<dl>
+ <dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}</dt>
+ <dd>Используйте <code>overflow:hidden</code>.</dd>
+ <dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}</dt>
+ <dd>Использование {{ Cssxref("overflow-x") }} и {{ Cssxref("overflow-y") }} предпочтительнее.</dd>
+ <dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}</dt>
+ <dd>Использование {{ Cssxref("overflow-x") }} и {{ Cssxref("overflow-y") }} предпочтительнее.</dd>
+ <dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt>
+ <dd>Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и <code>&lt;html&gt;</code>, <code> &lt;body&gt;</code> клавишами со стрелками и колесом мыши.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css">p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: visible; /* содержимое не обрезается */
+}
+</pre>
+
+<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: hidden; /* полосы прокрутки не предоставляются */ }
+</pre>
+
+<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: scroll; /* всегда показывать полосы прокрутки */ }
+</pre>
+
+<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */ }
+</pre>
+
+<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p> </p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>
+    <p>Changed syntax to allow one or two keywords instead of only one</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузера</h2>
+
+<p>{{Compat("css.properties.overflow")}} </p>
+
+<h3 id="Firefox_(Gecko)_Notes" name="Firefox_(Gecko)_Notes">Firefox (Gecko) Примечания</h3>
+
+<p>Из-за Firefox 3.6 (Gecko 1.9.2), <code>свойство overflow неверно применяется к элементам</code> table-group (<code>&lt;thead&gt;</code> , <code>&lt;tbody&gt;</code> , <code>&lt;tfoot&gt;</code>). Это поведение будет исправлено в следующих версиях.</p>
+
+<h3 id="Internet_Explorer_Notes" name="Internet_Explorer_Notes">Internet Explorer Примечания</h3>
+
+<p>Internet Explorer 4 - 6 <code>увеличивает элемент с overflow:visible </code>(значение по умолчанию), чтобы заполнить содержимое в нём.<code> height/width </code>действуют подобно<code> min-height/min-width</code>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Связанные свойства CSS: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-block")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+</ul>
diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html
new file mode 100644
index 0000000000..c182cd7ee0
--- /dev/null
+++ b/files/ru/web/css/overscroll-behavior/index.html
@@ -0,0 +1,107 @@
+---
+title: overscroll-behavior
+slug: Web/CSS/overscroll-behavior
+tags:
+  - CSS
+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>
+
+<pre class="brush:css no-line-numbers">/* Значения-ключевые слова */
+overscroll-behavior: auto; /* по умолчанию */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Двойное значение */
+overscroll-behavior: auto contain;
+
+/* Глобальные значения */
+overflow: inherit;
+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>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>{{cssinfo}}</p>
+
+<h2 id="Syntax">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>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>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>The default scroll overflow behavior occurs as normal.</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>
+ <dt><code>none</code></dt>
+ <dd>No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">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><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>
+
+<pre class="brush: css">.messages {
+  height: 220px;
+  overflow: auto;
+  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>
+
+<pre class="brush: css">body {
+  margin: 0;
+  overscroll-behavior: none;
+}</pre>
+
+<h2 id="Specifications">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>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td>
+   <td>{{Spec2('Overscroll Behavior')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.overscroll-behavior")}}</p>
+
+<h2 id="See_also">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>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/css/padding-left/index.html b/files/ru/web/css/padding-left/index.html
new file mode 100644
index 0000000000..0e4c4a28ed
--- /dev/null
+++ b/files/ru/web/css/padding-left/index.html
@@ -0,0 +1,100 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - CSS свойство
+translation_of: Web/CSS/padding-left
+---
+<div><font><font>{{CSSRef}}</font></font></div>
+
+<p>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <strong><code>padding-left</code></strong> определяет ширину левого внутреннего отступа элемента.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</p>
+
+<p>Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырех сторонах элемента одним значением.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax"><font><font>Синтаксис</font></font></h2>
+
+<pre class="brush:css"><font><font>/ * </font></font><code><font><font>&lt;length&gt;</font></font></code><font><font> значения * /
+padding-left: 0.5em;</font></font><font><font>
+padding-left: 0;</font></font><font><font>
+padding-left: 2cm;</font></font>
+<font><font>
+/ * </font></font><code><font><font>&lt;percentage&gt;</font></font></code><font><font> значение * /
+padding-left: 10%;</font></font>
+<font><font>
+/ * Глобальные значения * /
+padding-left: inherit;</font></font><font><font>
+padding-left: initial;</font></font><font><font>
+padding-left: unset;</font></font>
+</pre>
+
+<h3 id="Values" name="Values"><font><font>Значения</font></font></h3>
+
+<p> </p>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Фиксированный размер заполнения отступа. Не может быть отрицательным.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Размер заполнения зависит от ширины блока. Не может быть отрицательным.</dd>
+</dl>
+
+<p> </p>
+
+<h3 id="Формальный_синтаксис"><font><font>Формальный синтаксис</font></font></h3>
+
+<pre class="syntaxbox"><font><font>{{csssyntax}}</font></font></pre>
+
+<h2 id="Examples" name="Examples"><font><font>Примеры</font></font></h2>
+
+<pre class="brush: css"><font><font>.content {padding-left: 5%; </font><font>}</font></font><font><font>
+.sidebox {padding-left: 10px; </font><font>}</font></font>
+</pre>
+
+<h2 id="Определения">Определения</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Переопределяет <code>padding-left</code> как анимируемое свойство.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-left', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility"><font><font>Совместимость</font></font></h2>
+
+<p>{{Compat("css.properties.padding-left")}}</p>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ru/web/css/padding-right/index.html b/files/ru/web/css/padding-right/index.html
new file mode 100644
index 0000000000..378a6ab6e2
--- /dev/null
+++ b/files/ru/web/css/padding-right/index.html
@@ -0,0 +1,134 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - CSS свойство
+translation_of: Web/CSS/padding-right
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p><a href="https://developer.mozilla.org/en/CSS" title="CSS">CSS</a> свойство <strong><code>padding-right</code></strong> элемента устанавливает значение поля от правого края элемента. Поля элемента (<a href="https://developer.mozilla.org/en/CSS/box_model#padding" title="http://developer.mozilla.org/en/CSS/Box_model#padding">padding area</a>) это область, расположенная между контентом и границей элемента. Отрицательное значение не валидно.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;length&gt; значения */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* &lt;percentage&gt; значения */
+padding-right: 10%;
+
+/* Общие значения */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt>&lt;length&gt;</dt>
+ <dd>Устанавливает положительную фиксированную ширину. Подробнее: {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt>&lt;percentage&gt;</dt>
+ <dd>Процент по отношению к ширине контейнера.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<pre class="brush: css">.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>padding-right</code>, как анимируемое свойство.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-right', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/padding/index.html b/files/ru/web/css/padding/index.html
new file mode 100644
index 0000000000..15789588c1
--- /dev/null
+++ b/files/ru/web/css/padding/index.html
@@ -0,0 +1,149 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - CSS Padding
+  - CSS свойство
+translation_of: Web/CSS/padding
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Обзор">Обзор</h2>
+
+<p class="summary">Свойство <strong><code>padding</code></strong> устанавливает внутренние отступы/поля со всех сторон элемента. <a href="/en/CSS/box_model#padding">Область отступов</a> это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.</p>
+
+<p class="summary">Cвойство <code>padding</code> краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Применяется для всех 4 сторон */
+padding: 1em;
+
+/* По вертикали | По горизонтали */
+padding: 5% 10%;
+
+/* Сверху | По горизонтали | Снизу */
+padding: 1em 2em 2em;
+
+/* Сверху | Справа | Снизу | Слева */
+padding: 2px 1em 0 1em;
+
+/* Глобальные значения */
+padding: inherit;
+padding: initial;
+padding: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Укажите одно, два, три или четыре следующих значения:</p>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Устанавливает неотрицательный, фиксированый размер. Подробнее в разделе {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Относительно ширины родительского блока.</dd>
+</dl>
+
+<ul>
+ <li><strong>Одно</strong> значение применяется ко всем четырем сторонам</li>
+ <li><strong>Два</strong> значения применяются: <strong>1.</strong> <em>верхняя и нижняя</em> и <strong>2.</strong> <em>левая и правая</em> стороны</li>
+ <li><strong>Три</strong> значения применяются: <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>левая и правая</em> и <strong>3.</strong> <em>нижняя</em> стороны</li>
+ <li><strong>Четыре</strong> значения применяются<strong>:</strong> <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>правая</em>, <strong>3.</strong> <em>нижняя</em> и <strong>4.</strong> <em>левая</em> стороны</li>
+</ul>
+
+<h3 id="Формальное_описание_синтаксиса">Формальное описание синтаксиса</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css"> padding: 5%;                /*  со всех сторон отступ 5% */
+</pre>
+
+<pre class="brush: css"> padding: 10px;              /*  со всех сторон отступ 10px */
+</pre>
+
+<pre class="brush: css"> padding: 10px 20px;         /*  сверху и снизу отступ 10px */
+                             /*  слева и справа отступ 20px */
+</pre>
+
+<pre class="brush: css"> padding: 10px 3% 20px;      /*  сверху отступ 10px       */
+                             /*  слева и справа отступ 3% */
+                             /*  снизу отступ 20px        */
+</pre>
+
+<pre class="brush: css"> padding: 1em 3px 30px 5px;  /*  сверху отступ 1em   */
+                             /*  справа отступ 3px   */
+                             /*  снизу отступ 30px   */
+                             /*  слева отступ 5px    */
+</pre>
+
+<p style="padding: 5% 1em; border: outset currentColor;">border:outset; padding:5% 1em;</p>
+
+<h2 id="Live_Sample" name="Live_Sample">Рабочий пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h4&gt;Hello world!&lt;/h4&gt;
+&lt;h3&gt;The padding is different in this line.&lt;/h3&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">h4{
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+</pre>
+
+<p>{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Box', '#the-padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.padding")}}</p>
+
+<div id="compat-desktop"></div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
+</ul>
diff --git a/files/ru/web/css/paged_media/index.html b/files/ru/web/css/paged_media/index.html
new file mode 100644
index 0000000000..e0f263426e
--- /dev/null
+++ b/files/ru/web/css/paged_media/index.html
@@ -0,0 +1,22 @@
+---
+title: Постраничные носители
+slug: Web/CSS/Paged_Media
+tags:
+  - CSS
+  - Руководство
+  - разрыв страницы
+  - справочник
+translation_of: Web/CSS/Paged_Media
+---
+<div>{{cssref}}</div>
+
+<p>Свойства <strong>Постраничных носителей</strong> (<strong>Paged media</strong>) контролируют представление содержимого страницы для принтера или любого другого носителя, который делает разбивку контента на отдельные страницы. Это позволяет установить разрыв страницы, контролировать область печати, назначить разные стили для левой и правой страниц, контролировать разрывы внутри элементов. Перечень широко поддерживаемых свойств:</p>
+
+<ul>
+ <li>{{ cssxref("page-break-before") }}</li>
+ <li>{{ cssxref("page-break-after") }}</li>
+ <li>{{ cssxref("page-break-inside") }}</li>
+ <li>{{ cssxref("orphans") }}</li>
+ <li>{{ cssxref("widows") }}</li>
+ <li>{{ cssxref("@page") }}</li>
+</ul>
diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html
new file mode 100644
index 0000000000..0092fcf06d
--- /dev/null
+++ b/files/ru/web/css/paint-order/index.html
@@ -0,0 +1,104 @@
+---
+title: paint-order
+slug: Web/CSS/paint-order
+tags:
+  - окраска
+  - отрисовка
+  - порядок окраски
+translation_of: Web/CSS/paint-order
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>paint-order</code></strong> позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Нормальный */
+paint-order: normal;
+
+/* Единичное значение */
+paint-order: stroke; /* отрисовывает сначала обводку, затем заливку и маркеры */
+paint-order: markers; /* отрисовывает сначала маркеры, затем заливку и обводку */
+
+/* Множественные значения */
+paint-order: stroke fill; /* отрисовывает сначала обводку, затем заливку, затем маркеры */
+paint-order: markers stroke fill; /* отрисовывает маркеры, затем обводку, затем заливку */
+</pre>
+
+<p>Если значение не указано, значением по умолчанию является следующий порядок  <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p>
+
+<p>Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном поряд друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределенное значение.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: В этом случае, маркеры отрисовываются только при рисовании форм SVG. включающих использование свойств <code>marker-*</code>  (например <code><a href="/en-US/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) и элемента <code><a href="/en-US/docs/Web/SVG/Element/marker">&lt;marker&gt;</a></code>. Они не применяются к тексту HTML, в этом случае, вы можете определить только порядок <code>stroke</code> и <code>fill</code>.</p>
+</div>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Окрасит различные части в обычном порядке.</dd>
+ <dt><code>stroke</code>,<br>
+ <code>fill</code>,<br>
+ <code>markers</code></dt>
+ <dd>Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"&gt;
+  &lt;text x="10" y="75"&gt;stroke in front&lt;/text&gt;
+  &lt;text x="10" y="150" class="stroke-behind"&gt;stroke behind&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", 165)}}</p>
+
+<h2 id="Спецификации">Спецификации</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("SVG2", "painting.html#PaintOrder", "paint-order")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.paint-order")}}</p>
diff --git a/files/ru/web/css/percentage/index.html b/files/ru/web/css/percentage/index.html
new file mode 100644
index 0000000000..fa0bde6686
--- /dev/null
+++ b/files/ru/web/css/percentage/index.html
@@ -0,0 +1,89 @@
+---
+title: <percentage>
+slug: Web/CSS/percentage
+translation_of: Web/CSS/percentage
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <strong><code>&lt;percentage&gt;</code></strong> представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, и {{Cssxref("font-size")}}.</p>
+
+<div class="note"><strong>Обратите внимание:</strong> Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных {{cssxref("&lt;length&gt;")}}) будет доступно в унаследованном свойстве, а не значение в процентах.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;percentage&gt;</code> состоит из {{cssxref("&lt;number&gt;")}}, за которым следует знак процента (<code>%</code>). Так же впереди может стоять знак <code>+</code> или <code>-</code>, хотя отрицательные значения допустимы не во всех свойствах. Как и у всех единиц измерения CSS между символом процента и числом нет пробельного символа.</p>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>При анимировании значения типа данных <code>&lt;percentage&gt;</code> интерполируются как настоящие числа с плавающей запятой. Скорость интерполяции зависит от функции времени, с которой используется анимация.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ширина_и_левый_отступ">Ширина и левый отступ</h3>
+
+<pre class="brush: html">&lt;div style="background-color:blue;"&gt;
+  &lt;div style="width:50%; margin-left:20%; background-color:lime;"&gt;
+    Width: 50%, Left margin: 20%
+  &lt;/div&gt;
+  &lt;div style="width:30%; margin-left:60%; background-color:pink;"&gt;
+    Width: 30%, Left margin: 60%
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>HTML код выше будет выглядеть так:</p>
+
+<p>{{EmbedLiveSample('Ширина_и_левый_отступ', '600', 140)}}</p>
+
+<h3 id="Размер_шрифта">Размер шрифта</h3>
+
+<pre class="brush: html">&lt;div style="font-size:18px;"&gt;
+  &lt;p&gt;Full-size text (18px)&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>HTML код выше будет выглядеть так:</p>
+
+<p>{{EmbedLiveSample('Размер_шрифта', 'auto', 160)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нет значительных изменений после CSS Уровня 2 (ревизия 1).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Не изменено с CSS Уровень 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.percentage")}}</p>
diff --git a/files/ru/web/css/perspective/index.html b/files/ru/web/css/perspective/index.html
new file mode 100644
index 0000000000..f0cd21e705
--- /dev/null
+++ b/files/ru/web/css/perspective/index.html
@@ -0,0 +1,284 @@
+---
+title: perspective
+slug: Web/CSS/perspective
+translation_of: Web/CSS/perspective
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <a href="/en/CSS" title="CSS">CSS</a> <strong><code>perspective </code></strong><code>определяет расcтояние между плоскостью z = 0 и пользователем для того чтобы придать 3D-позиционируемому элементу эффект переспективы. Каждый трансформируемый элемент с z &gt; 0 станет больше, с z &lt; 0 соответственно меньше.</code></p>
+
+<p>Элементы части которые находятся за пользователем, т.е. z-координата этих элементов больше чем значение  свойства <code>perspective, не отрисовываются.</code></p>
+
+<p><em><code>Точка схождения </code></em><code>по-умолчанию расположена в центре элемента, но её можно переместить используя свойство </code>{{ cssxref("perspective-origin") }}.</p>
+
+<p>При использовании данного свойства со значениями отличными от 0 или none создается новый <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css">/* Keyword value */
+perspective: none;
+
+/* Значения &lt;length&gt; */
+perspective: 20px;
+perspective: 3.5em;
+
+/* Глобальные значения */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd><font face="Consolas, Liberation Mono, Courier, monospace">Указывает что трасформация перспективы к элементу применяться не будет.</font></dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} у<code>станавливает растояние от пользователя до плоскости z = 0. Применяет трасформацию к элементу и его содержимому. Если значение отрицательно или равно 0, то преобразование не применяется.</code></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Three_cubes" name="Three_cubes">Три куба</h3>
+
+<h4 id="HTML_Content">HTML Content</h4>
+
+<pre class="brush: html">&lt;table&gt;
+   &lt;tbody&gt;
+      &lt;tr&gt;
+         &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
+         &lt;/th&gt;
+         &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
+         &lt;/th&gt;
+         &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
+         &lt;/th&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;
+            &lt;div class="container"&gt;
+               &lt;div class="cube pers250"&gt;
+                  &lt;div class="face front"&gt;1&lt;/div&gt;
+                  &lt;div class="face back"&gt;2&lt;/div&gt;
+                  &lt;div class="face right"&gt;3&lt;/div&gt;
+                  &lt;div class="face left"&gt;4&lt;/div&gt;
+                  &lt;div class="face top"&gt;5&lt;/div&gt;
+                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+               &lt;/div&gt;
+            &lt;/div&gt;
+         &lt;/td&gt;
+         &lt;td&gt;
+            &lt;div class="container"&gt;
+               &lt;div class="cube pers350"&gt;
+                  &lt;div class="face front"&gt;1&lt;/div&gt;
+                  &lt;div class="face back"&gt;2&lt;/div&gt;
+                  &lt;div class="face right"&gt;3&lt;/div&gt;
+                  &lt;div class="face left"&gt;4&lt;/div&gt;
+                  &lt;div class="face top"&gt;5&lt;/div&gt;
+                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+               &lt;/div&gt;
+            &lt;/div&gt;
+         &lt;/td&gt;
+         &lt;td&gt;
+            &lt;div class="container"&gt;
+               &lt;div class="cube pers500"&gt;
+                  &lt;div class="face front"&gt;1&lt;/div&gt;
+                  &lt;div class="face back"&gt;2&lt;/div&gt;
+                  &lt;div class="face right"&gt;3&lt;/div&gt;
+                  &lt;div class="face left"&gt;4&lt;/div&gt;
+                  &lt;div class="face top"&gt;5&lt;/div&gt;
+                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+               &lt;/div&gt;
+            &lt;/div&gt;
+         &lt;/td&gt;
+      &lt;/tr&gt;
+   &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_Content">CSS Content</h4>
+
+<pre class="brush: css">/* Короткие классы для различных значений perspective */
+.pers250 {
+    perspective: 250px;
+    -webkit-perspective: 250px;
+}
+.pers350 {
+    perspective: 350px;
+    -webkit-perspective: 350px;
+}
+.pers500 {
+    perspective: 500px;
+    -webkit-perspective: 500px;
+}
+
+/* Определяем div.container, div.cube, и свойства граней куба */
+ .container {
+   width: 200px;
+   height: 200px;
+   margin: 75px 0 0 75px;
+   border: none;
+}
+.cube {
+   width: 100%;
+   height: 100%;
+   backface-visibility: visible;
+   perspective-origin: 150% 150%;
+   transform-style: preserve-3d;
+   -webkit-backface-visibility: visible;
+   -webkit-perspective-origin: 150% 150%;
+   -webkit-transform-style: preserve-3d;
+}
+.face {
+   display: block;
+   position: absolute;
+   width: 100px;
+   height: 100px;
+   border: none;
+   line-height: 100px;
+   font-family: sans-serif;
+   font-size: 60px;
+   color: white;
+   text-align: center;
+}
+
+/* Определяем каждую грань в зависимости от направления */
+ .front {
+   background: rgba(0, 0, 0, 0.3);
+   transform: translateZ(50px);
+   -webkit-transform: translateZ(50px);
+}
+.back {
+   background: rgba(0, 255, 0, 1);
+   color: black;
+   transform: rotateY(180deg) translateZ(50px);
+   -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+   background: rgba(196, 0, 0, 0.7);
+   transform: rotateY(90deg) translateZ(50px);
+   -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+   background: rgba(0, 0, 196, 0.7);
+   transform: rotateY(-90deg) translateZ(50px);
+   -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+   background: rgba(196, 196, 0, 0.7);
+   transform: rotateX(90deg) translateZ(50px);
+   -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+.bottom {
+   background: rgba(196, 0, 196, 0.7);
+   transform: rotateX(-90deg) translateZ(50px);
+   -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Делаем таблицу немного лучше */
+th, p, td {
+   background-color: #EEEEEE;
+   padding: 10px;
+   font-family: sans-serif;
+   text-align: left;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Three_cubes', 940, 460) }}</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('CSS3 Transforms', '#perspective', 'perspective') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>
+    <p>12{{ property_prefix('-webkit') }}{{ CompatGeckoDesktop("10") }}<br>
+     45</p>
+   </td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}<br>
+     {{ CompatGeckoDesktop("16") }}<sup>[1]</sup></p>
+   </td>
+   <td>10</td>
+   <td>15{{ property_prefix('-webkit') }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>3.0{{ property_prefix('-webkit') }}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}<br>
+    {{ CompatGeckoMobile("16") }}<sup>[1]</sup></td>
+   <td>8.1</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In addition to the unprefixed support, Gecko 45.0 {{geckoRelease("45.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></li>
+</ul>
diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..99f9b27a87
--- /dev/null
+++ b/files/ru/web/css/pointer-events/index.html
@@ -0,0 +1,189 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+tags:
+  - CSS свойства
+  - Ссылка
+translation_of: Web/CSS/pointer-events
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS свойство<strong> <code>pointer-events</code></strong> позволяет контролировать события, при которых элемент может стать объектом события мыши. Если это свойство не задано, то к содержимому SVG будут применяться характеристики значения <code>visiblePainted.</code></p>
+
+<p>Вдобавок к указанию того, что элемент не является объектом события мыши, значение <code>none</code> сообщает событию мыши проходить "через" элемент и обращаться к элементу, находящемуся "под" ним.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Значения ключевых слов */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* только SVG */
+pointer-events: visibleFill;    /* только SVG */
+pointer-events: visibleStroke;  /* только SVG */
+pointer-events: visible;        /* только SVG */
+pointer-events: painted;        /* только SVG */
+pointer-events: fill;           /* только SVG */
+pointer-events: stroke;         /* только SVG */
+pointer-events: all;            /* только SVG */
+
+/* Глобальные значения */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Элемент ведёт себя так же, как и если бы свойство <code>pointer-events</code> не было задано. В SVG это значение даёт такой же эффект, как и значение <code>visiblePainted</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>Элемент не может быть целью (<a href="/ru/docs/Web/API/event/target">target</a>) cобытий мыши; тем не менее, целью событий мыши могут быть его потомки, если их <code>pointer-events</code> имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/<a href="/ru/docs/Web/API/event/bubbles">всплытия</a><code>.</code></dd>
+ <dt><code>visiblePainted</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство <code>fill</code> установлено в значение отличное от <code>none</code>, или над периметром элемента ('stroke'), при этом свойство <code>stroke</code> установлено в значение отличное от <code>none</code>.</dd>
+ <dt><code>visibleFill</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойства <code>fill</code> не влияет на обработку события.</dd>
+ <dt><code>visibleStroke</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над периметром элемента ('stroke'). Значение свойства <code>stroke</code> не влияет на обработку события.</dd>
+ <dt><code>visible</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств <code>fill</code> и <code>stroke</code> не влияют на обработку события.</dd>
+ <dt><code>painted</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство <code>fill</code> установлено в значение отличное от <code>none</code>, или над периметром элемента ('stroke'), при этом свойство <code>stroke</code> установлено в значение отличное от <code>none</code>. Значение свойства <code>visibility</code> не влияет на обработку события.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойств <code>visibility</code> и <code>fill</code> не влияют на обработку события.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над периметром элемента ('stroke'). Значение свойств <code>visibility</code> и <code>stroke</code> не влияют на обработку события.</dd>
+ <dt><code>all</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств <code>visibility</code>, <code>fill</code> и <code>stroke</code> не влияют на обработку события.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1">Пример 1</h3>
+
+<pre class="brush:css">/* Пример 1: Сделать так, что бы все объекты img не реагировали на перетаскивание, наведение(:hover), нажатие(click) и т.д. */
+img {
+  pointer-events: none;
+}</pre>
+
+<h3 id="Example_2" name="Example_2">Пример 2</h3>
+
+<p>Сделать ссылку на ресурс http://example.com не реагирующей на нажатие(click), наведение(:hover) и т.д.</p>
+
+<pre class="brush:html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;example.com&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<pre class="brush:css">a[href="http://example.com"] {
+  pointer-events: none;
+}</pre>
+
+<div>{{EmbedLiveSample('Example_2', "500", "100")}}</div>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши,  с помощью <code>pointer-events</code> не обязательно означает, что прослушиватели событий мыши на этом элементе не могут или не будут запускаться. Если у одного из  дочерних элементов есть явные <code>pointer-events,</code> позволяющие этому ребенку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает прослушиватели событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребенком, ни родителем (он пройдет через «родительский» на «цели» под ним).</p>
+
+<p>Мы хотели бы предоставить более тонкий контроль (а не только <code>auto</code> и <code>none</code>) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить <code>pointer-events</code> для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">этой странице вики</a> (не беспокойтесь, мы всё сохраним аккуратно). </p>
+
+<h2 id="Характеристики">Характеристики</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('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Это расширение для элементов HTML, хоть и присутствует в ранних версиях CSS Basic User Module Interface Level 3, было перенесено на <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузера</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>11.0</td>
+   <td>9.0 (2.0)</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td>HTML/XML content</td>
+   <td>2.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>11.0</td>
+   <td>15.0</td>
+   <td>4.0 (530)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.6</td>
+   <td>11</td>
+   <td>33</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Атрибут SVG {{SVGAttr("pointer-events")}}</li>
+ <li>Атрибут SVG {{SVGAttr("visibility")}}</li>
+ <li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> extended for use in (X)HTML content</li>
+ <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">60fps scrolling using pointer-events: none</a></li>
+</ul>
diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html
new file mode 100644
index 0000000000..e0988d3b9e
--- /dev/null
+++ b/files/ru/web/css/position/index.html
@@ -0,0 +1,327 @@
+---
+title: position
+slug: Web/CSS/position
+translation_of: Web/CSS/position
+---
+<div>{{CSSRef}}</div>
+
+<div>Свойство <font face="Open Sans, Arial, sans-serif">{{cssxref('','CSS')}}</font> <strong><code>position</code></strong> указывает, как элемент позиционируется в документе. {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}} и {{cssxref('left')}} определяют конечное местоположение позиционированных элементов.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h3 id="Типы_позиционирования">Типы позиционирования</h3>
+
+<ul>
+ <li><strong>Позиционируемый элемент</strong> — это элемент, у которого {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> является <code>relative</code>, <code>absolute</code>, <code>fixed</code> либо <code>sticky</code>. (Другими словами, это вce, кроме <code>static</code>.)</li>
+ <li><strong>Относительно позиционируемый элемент</strong> является элементом, {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> которого является <code>relative</code>. Свойства {{cssxref('top')}} и {{cssxref('bottom')}} определяют смещение по вертикали от его нормального положения; свойства {{cssxref('left')}} и {{cssxref('right')}} задают горизонтальное смещение.</li>
+ <li><strong>Абсолютно позиционируемый элемент</strong> — это элемент, чьё {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> является <code>absolute</code> или <code>fixed</code>. {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}} и {{cssxref('left')}} задают смещения от краёв {{cssxref('Containing_Block', 'содержащего блок элемента')}}. (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый <a href="../Guide/CSS/Block_formatting_context">контекст форматирования блока</a> (BFC) для своего содержимого.</li>
+ <li><strong>Элемент с липкой позицией</strong> — это элемент, у которого {{cssxref('computed_value', 'значение вычисленного')}} <code>position</code> является <code>sticky</code>. Он рассматривается как относительно позиционированный до тех пор, пока {{cssxref('Containing_Block', 'содержащий его блок')}} не пересечёт указанный порог (например, установка {{cssxref('top')}} в значение, отличное от <code>auto</code>) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край {{cssxref('Containing_Block', 'содержащего его блока')}}.</li>
+</ul>
+
+<p>В большинстве случаев абсолютно cпозиционированные элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно cпозиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p>
+
+<p>За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):</p>
+
+<ul>
+ <li>Если указаны <code>top</code> и <code>bottom</code> (технически, не <code>auto</code>) — приоритет будет у <code>top</code>.</li>
+ <li>Если указаны <code>left</code> и <code>right</code>: приоритет будет у <code>left</code>, когда {{cssxref('direction')}} <code>ltr</code> (английский язык, горизонтальный японский и т. д.), приоритет будет у <code>right</code>, когда {{cssxref('direction')}} является <code>rtl</code> (персидский , Арабский, иврит и т. д.).</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>position</code> указывается как одно ключевое слово, выбранное из списка значений ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>static</code></dt>
+ <dd>Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> и <code>z-index</code> <em>не применяются</em> к данному элементу. Это значение по умолчанию.</dd>
+ <dt><code>relative</code></dt>
+ <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается <em>относительно себя</em> на основе значений <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была <code>static</code>.</dd>
+ <dd>Это значение создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Его влияние на элементы <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> и <code>table-caption</code> не определено.</dd>
+ <dt><code>absolute</code></dt>
+ <dd>Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>.</dd>
+ <dd>Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство <code>transform</code>, <code>perspective</code>, или <code>filter</code>, установленное на что-то иное, кроме <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с <code>perspective</code> и <code>filter</code>, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>.</dd>
+ <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на <em>каждой странице</em>.</dd>
+ <dt><code>sticky</code></dt>
+ <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего <em>прокручивающего предка</em> и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>. Смещение не влияет на положение любых других элементов.</dd>
+ <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при <code>overflow</code> равном <code>hidden</code>, <code>scroll</code>, <code>auto</code> или <code>overlay</code>), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Relative_positioning" name="Relative_positioning">Относительное позиционирование</h3>
+
+<p>Относительно позиционированные элементы смещены на определенную величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведенном ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
+&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
+&lt;div class="box" id="four"&gt;Four&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">Абсолютное позиционирование</h3>
+
+<p>Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является <code>static</code>). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок - см. также <a class="external external-icon" href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">определение W3C</a>), который содержит блок корневого элемента документа.</p>
+
+<p>Простой пример:</p>
+
+<pre class="brush: html">&lt;h1&gt;Абсолютное позиционирование&lt;/h1&gt;
+&lt;p&gt;Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.&lt;/p&gt;
+&lt;p class="positioned"&gt;По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы.&lt;/p&gt;
+&lt;p&gt;Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих.&lt;/p&gt;
+&lt;p&gt;встроенные элементы &lt;span&gt;как этот&lt;/span&gt; и &lt;span&gt;вот этот&lt;/span&gt; будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов &lt;span&gt;перейдёт на новую строку, если это возможно, - как содержимое этого текста&lt;/span&gt;, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:&lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Absolute_positioning', '100%', 420)}}</p>
+
+<h3 id="Fixed_positioning" name="Fixed_positioning">Фиксированное позиционирование</h3>
+
+<p>Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было <code>transform</code>, <code>perspective</code>, или свойства <code>filter</code>, отличное от <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c <code>id="one"</code> фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim.
+    Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet.
+    Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.
+    Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. &lt;/p&gt;
+  &lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.box {
+  background: red;
+  width: 100px;
+  height: 100px;
+  margin: 20px;
+  color: white;
+}
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+}
+.outer {
+  width: 500px;
+  height: 500px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Fixed_positioning', '800px', '300px')}}</p>
+
+<h3 id="Sticky_positioning" name="Sticky_positioning">Липкое позиционирование</h3>
+
+<p>Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечет заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...</p>
+
+<pre class="brush: css">#one { position: sticky; top: 10px; }</pre>
+
+<p>... позиционирует элемент с id "one" относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.</p>
+
+<div>
+<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>
+
+<div></div>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
+    &lt;dd&gt;Apparat&lt;/dd&gt;
+    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
+    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
+    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
+  &lt;/dl&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Chromeo&lt;/dd&gt;
+    &lt;dd&gt;Common&lt;/dd&gt;
+    &lt;dd&gt;Converge&lt;/dd&gt;
+    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
+    &lt;dd&gt;Cursive&lt;/dd&gt;
+  &lt;/dl&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
+  &lt;/dl&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;T&lt;/dt&gt;
+    &lt;dd&gt;Ted Leo &amp; The Pharmacists&lt;/dd&gt;
+    &lt;dd&gt;T-Pain&lt;/dd&gt;
+    &lt;dd&gt;Thrice&lt;/dd&gt;
+    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
+    &lt;dd&gt;Two Gallants&lt;/dd&gt;
+  &lt;/dl&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+dl {
+  margin: 0;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Sticky_positioning', '500px', '300px')}}</p>
+
+<h2 id="Доступность">Доступность</h2>
+
+<p>Убедитесь, что элементы, расположенные с <code>absolute</code> или <code>fixed</code> значением, не затеняют другой контент при увеличении страницы, увеличивая размер текста.</p>
+
+<ul>
+ <li><a href="../Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="Производительность_и_доступность">Производительность и доступность</h3>
+
+<p>Элементы прокрутки, содержащие <code>fixed</code> или <code>sticky</code> контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать <code>sticky</code> или <code>fixed</code> контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление {{cssxref ('will-change', 'will-change: transform')}} к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.</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('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Добавляет значение свойства <code>sticky</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check outand send us a pull request.<br>
+Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("css.properties.position")}}</p>
diff --git a/files/ru/web/css/pseudo-elements/index.html b/files/ru/web/css/pseudo-elements/index.html
new file mode 100644
index 0000000000..74773b9b99
--- /dev/null
+++ b/files/ru/web/css/pseudo-elements/index.html
@@ -0,0 +1,102 @@
+---
+title: Псевдоэлементы
+slug: Web/CSS/Pseudo-elements
+tags:
+  - CSS
+  - Reference
+  - Псевдоэлементы
+  - Селекторы
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Псевдоэлемент</strong> в CSS — <dfn>это ключевое слово, добавляемое к селектору,</dfn> которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент {{ Cssxref("::first-line") }} может быть использован для изменения шрифта первой строки абзаца.</p>
+
+<pre class="brush: css no-line-numbers">/* Первая строка каждого элемента &lt;p&gt;. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> В отличие от псевдоэлементов, <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдоклассы</a> могут быть использованы для стилизации элемента на основе его <em>состояния</em>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">selector::pseudo-element {
+  property: value;
+}</pre>
+
+<p>В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Как правило, следует использовать двойное двоеточие (<code>::</code>) вместо одинарного (<code>:</code>). В этом состоит различие между псевдоклассами и псевдоэлементами. Однако, так как это различие не присутствовало в старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.</p>
+</div>
+
+<h2 id="Список_стандартных_псевдоэлементов">Список стандартных псевдоэлементов</h2>
+
+<div class="index">
+<ul>
+ <li>{{ Cssxref("::after") }}</li>
+ <li>{{ Cssxref("::before") }}</li>
+ <li>{{ cssxref("::cue")}}</li>
+ <li>{{ Cssxref("::first-letter") }}</li>
+ <li>{{ Cssxref("::first-line") }}</li>
+ <li>{{ Cssxref("::selection") }}</li>
+ <li>{{ Cssxref("::slotted") }}</li>
+ <li>{{ Cssxref("::backdrop") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Браузер</th>
+   <th>Начиная с версии</th>
+   <th>Поддерживает</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Internet Explorer</td>
+   <td>8.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>9.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>1.0 (1.5)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Opera</td>
+   <td>4.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>7.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Псевдо-классы">Псевдоклассы</a></li>
+</ul>
diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..3d9a247da7
--- /dev/null
+++ b/files/ru/web/css/radial-gradient()/index.html
@@ -0,0 +1,301 @@
+---
+title: radial-gradient()
+slug: Web/CSS/radial-gradient()
+translation_of: Web/CSS/radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>radial-gradient()</code></strong> создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("&lt;gradient&gt;")}}, который является расширением типа {{cssxref("&lt;image&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
+
+
+
+<p>Как и любой градиент, радиальный градиент не имеет <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>, тоесть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применен.</p>
+
+<p>Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.</p>
+
+<p>Поскольку <code>&lt;gradient&gt;ы</code> относятся к типу <code>&lt;image&gt;</code>, они могут быть использованы только там где используется тип <code>&lt;image&gt;</code>. По этой причине <code>radial-gradient()</code> не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("&lt;color&gt;")}}.</p>
+
+<h2 id="Композиция_свойства">Композиция свойства</h2>
+
+<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальнй градиент задается <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p>
+
+<p>Чтобы создать плавный градиент, функция <code>radial-gradient()</code> рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.</p>
+
+<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах расчитывается относительно пересечения конечной формы таким лучем, что является <code>100%</code>. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Градиент в центре контейнера,
+   переход от красного к синему и после к зеленому */
+radial-gradient(circle at center, red 0, blue, green 100%)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Форма градиента. Может принимать значение <code>circle</code> (подразумевается что формой является круг с постоянным радиусом) или <code>ellipse</code> (форма является эллипсом, выровненным по оси). По умолчанию имеет значение <code>ellipse</code>.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>Параметр определяющий размер конечной формы. Возможные значения:</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Значение</th>
+    <th>Описание</th>
+   </tr>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Схоже с <code>closest-side</code>, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>Заметка:</strong> Ранние реализации этой функции включают в себя другие значения свойства (<code>cover</code> and <code>contain</code>) которые являются синонимами <span class="st"><code>farthest-corner</code></span> и <code>closest-side</code>, соответственно. Рекоментуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.</p>
+ </div>
+ </dd>
+ <dt><code>&lt;color-stop&gt;</code></dt>
+ <dd>{{cssxref("&lt;color&gt;")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("&lt;percentage&gt;")}} или {{cssxref("&lt;length&gt;")}} вдоль оси градиента). Значения <code>0%</code>, или <code>0</code> представляют центр градиента; значение <code>100%</code> представляет собой виртуальное пересечение конечной формы с виртуальным лучем граддиента. Процентные значения будут линейно расположены на луче градиента.</dd>
+</dl>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox notranslate"><code>radial-gradient(
+  [ [ circle || <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> ]                         [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ ellipse || [ <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> | <a href="/en-US/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2} ]  [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ [ circle | ellipse ] || &lt;extent-keyword&gt; ]   [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ,
+  ]?
+  &lt;color-stop&gt; [ , &lt;color-stop&gt; ]+
+)
+где &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
+  и<code> &lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
+</code></pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_градиент">Простой градиент</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+} </pre>
+
+<p>{{EmbedLiveSample('Простой_градиент', 120, 120)}}</p>
+
+<h3 id="Градиент_со_смещенным_центром">Градиент со смещенным центром</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}</pre>
+
+<p>{{EmbedLiveSample('Градиент_со_смещенным_центром', 240, 120)}}</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Дополнительные примеры можно найти в <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</a>.</p>
+</div>
+
+<h2 id="Спецификация">Спецификация</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('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Стандартное использование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16")}}</td>
+   <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>10.0<sup>[3]</sup></td>
+   <td>11.60{{property_prefix("-o")}}</td>
+   <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Использование в {{cssxref("border-image")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Использование на любых других свойствах работающих с типом {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Устаревший webkit синтаксис</a> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>at</code> синтаксис (финальный стандартизованный вариант)</td>
+   <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16")}}<sup>[4]</sup></td>
+   <td>26</td>
+   <td>10.0</td>
+   <td>11.60{{property_prefix("-o")}}<sup>[2]</sup><br>
+    2.12</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://drafts.csswg.org/css-images-4/#color-interpolation-hint">Interpolation hints/gradient midpoints</a> (точки заданные в процентах без значения цвета)</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>40</td>
+   <td></td>
+   <td>27</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Стандартное спользование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Использование в {{cssxref("border-image")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Использование на любых других свойствах работающих с типом {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Устаревший webkit синтаксис</a> {{non-standard_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>at</code> синтаксис (финальный стандартизованный вариант)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 3.6 синтаксис - ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могую быть отключены установкой <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p>
+
+<p>[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревшый вариант <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Смотрите также <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">текущую поддержку</a> радиальных градиентов.</p>
+
+<p>[3] Internet Explorer от 5.5 до 9.0 поддерживают собственный фильтр <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code></a>.</p>
+
+<p>[4] В дополнении к поддержке без префикса, Gecko 44.0 {{geckoRelease("44.0")}} добавил поддержку версии с префиксом <code>-webkit</code> по соображениям обратной совместимости с настройкой <code>layout.css.prefixes.webkit</code>, установленной по умолчанию как <code>false</code>. Начиная с Gecko 49.0 {{geckoRelease("49.0")}} используется установка по умолчанию как <code>true</code>.</p>
+
+<h3 id="Сноски_к_Quantum_CSS">Сноски к Quantum CSS</h3>
+
+<ul>
+ <li>Gecko имеет долгоиграющий баг благодаря которому значения вроде <code>radial-gradient(circle gold,red)</code> будут работать, даже несмотря на то, что пропущена запятая между <code>circle</code> и <code>gold</code> ({{bug(1383323)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизу в Firefox 57) исправляет этот баг.</li>
+ <li>Также в Gecko выражения с {{cssxref("calc")}} считаются недействительными — значени не валидно при использовании в  radial-gradient() ({{bug(1376019)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизув Firefox 57) исправляет этот баг.</li>
+</ul>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Использование CSS градиентов</a></li>
+ <li>Другие варианты градиентов: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/ratio/index.html b/files/ru/web/css/ratio/index.html
new file mode 100644
index 0000000000..1167ae3f29
--- /dev/null
+++ b/files/ru/web/css/ratio/index.html
@@ -0,0 +1,89 @@
+---
+title: <ratio>
+slug: Web/CSS/ratio
+tags:
+  - медиа-запрос
+  - тип данных
+  - формат экрана
+translation_of: Web/CSS/ratio
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>&lt;ratio&gt;</code></strong> используется для описания <a href="/en-US/docs/Web/CSS/@media/aspect-ratio">соотношений сторон</a> в <a href="/en-US/docs/Web/CSS/Media_Queries">медиа-запросах</a>, обозначает соотношения между двумя безразмерными значениями.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;ratio&gt;</code> состоит из строго положительного  {{cssxref("&lt;integer&gt;")}}, за которым следует слэш  ('/', Unicode <code>U+002F SOLIDUS</code>) и второй строго положительный {{cssxref("&lt;integer&gt;")}}. Пробелы до и после черты не обязательны. Первое число представляет ширину, а второе высоту.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_в_медиа-запросах">Использование в медиа-запросах</h3>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 16/9) { ... }</pre>
+
+<h3 id="Общее_соотношение_сторон">Общее соотношение сторон</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">Ratio</th>
+   <th scope="col">Usage</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Ratio4_3.png" class="default internal" src="/@api/deki/files/5714/=Ratio4_3.png"></td>
+   <td><code>4/3</code></td>
+   <td>Традиционный TV-формат 20<sup>th</sup> века.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio16_9.png" src="/@api/deki/files/5711/=Ratio16_9.png"></td>
+   <td><code>16/9</code></td>
+   <td>Современный "широкоэкранный" TV-формат.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td>
+   <td><code>185/100</code> = <code>91/50</code><br>
+    <em>(нецелые делимые и делители не допускаются)</em></td>
+   <td>Наиболее распространенный видео-формат в 1960-х.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td>
+   <td><code>239/100</code><br>
+    <em>(нецелые делимые и делители не допускаются)</em></td>
+   <td>"Широкоэкранный," анаморфный видео-формат.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Media Queries', '#values', '&lt;ratio&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.ratio")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/@media/aspect-ratio">aspect-ratio</a></code> медиа-функция</li>
+</ul>
diff --git a/files/ru/web/css/reference/index.html b/files/ru/web/css/reference/index.html
new file mode 100644
index 0000000000..2a32f7019f
--- /dev/null
+++ b/files/ru/web/css/reference/index.html
@@ -0,0 +1,189 @@
+---
+title: Руководство по CSS
+slug: Web/CSS/Reference
+tags:
+  - CSS
+  - CSSOM
+  - DOM-CSS
+  - Стили
+translation_of: Web/CSS/Reference
+---
+<p><span class="seoSummary">Данный <em>справочник по CSS</em> перечисляет все стандартные свойства, <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассы</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементы</a>, <a href="/ru/docs/Web/CSS/At-rule">@-правила</a>, единицы измерения и селекторы <a href="/ru/docs/CSS">CSS</a> в алфавитном порядке. </span> Справочник позволит вам быстро найти подробную информацию о каждом из них. <span class="seoSummary">Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства <a href="/ru/docs/Web/CSS/CSS3">CSS3</a>. Также включает в себя краткое руководство </span> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Reference$edit#DOM_CSS">DOM-CSS / CSSOM</a>.</p>
+
+<p>Заметьте, что определения CSS-правил полностью (ASCII)  <a href="https://www.w3.org/TR/css-syntax-3/#intro">тексто-ориентированы</a>, в то время как определения правил DOM-CSS / CSSOM <a href="https://www.w3.org/TR/cssom/#introduction">объектно-ориентированы</a>.</p>
+
+<p>Смотрите также  <a href="/ru/docs/Web/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> для Gecko-специфичных свойств с префиксом <code>-moz</code>; и  <a href="/ru/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a> для WebKit-специфичных свойств. Смотрите  <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Обзор CSS-префиксов для разных браузеров от Peter Beverloo</a> для всех свойств с префиксами.</p>
+
+<h2 id="Базовый_синтаксис_правил">Базовый синтаксис правил</h2>
+
+<p>Имейте в виду, что любая синтаксическая ошибка в задании правил сделает некорректным всё правило.</p>
+
+<h3 id="Стили">Стили</h3>
+
+<pre class="syntaxbox"><strong><em>selectorlist</em> { <em>property</em>: <em>value</em>; </strong><em>[more property:value; pairs]</em> <strong>}</strong>
+
+...где <em>selectorlist</em>:<code> <em>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+</em></code>
+
+Смотрите списки <a href="#Selectors"><em>селекторов</em></a>, <a href="#pelm"><em>псевдоэлементов</em></a> и <a href="#pcls"><em>псевдоклассов</em></a> ниже.
+
+</pre>
+
+<h4 id="Примеры">Примеры</h4>
+
+<pre class="brush: css">strong { color: red; }
+div.menu-bar li:hover &gt; ul { display: block; }
+</pre>
+
+<p>Больше о примерах: <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors">#1</a>, <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors#Action_Using_selectors_based_on_relationships_and_pseudo-classes">#2</a></p>
+
+<h3 id="-правила">@-правила</h3>
+
+<p>Так как у них есть много различных структурных форматов, смотрите нужный синтаксис <a href="/ru/docs/Web/CSS/At-rule">@-правил</a>.</p>
+
+<h2 id="Справочный_указатель">Справочный указатель</h2>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="Selectors" name="Selectors">Селекторы</h2>
+
+<ul>
+ <li>Базовые селекторы
+  <ul>
+   <li><a href="/ru/docs/Web/CSS/Type_selectors">По тегу</a><code> elementname</code></li>
+   <li><a href="/ru/docs/Web/CSS/Class_selectors">По классу</a> <code>.classname</code></li>
+   <li><a href="/ru/docs/Web/CSS/ID_selectors">По ID</a> <code>#idname</code></li>
+   <li><a href="/ru/docs/Web/CSS/Universal_selectors">Универсальные</a><code> * ns|* *|*</code></li>
+   <li><a href="/ru/docs/Web/CSS/Attribute_selectors">По атрибутам</a><code> [attr=value]</code></li>
+  </ul>
+ </li>
+ <li>Комбиционные
+  <ul>
+   <li><a href="/ru/docs/Web/CSS/Adjacent_sibling_selectors">смежный селектор</a> <code>A + B</code></li>
+   <li><a href="/ru/docs/Web/CSS/General_sibling_selectors">следующего элемента</a> <code>A ~ B</code></li>
+   <li><a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a> <code>A &gt; B</code></li>
+   <li><a href="/ru/docs/Web/CSS/Descendant_selectors">потомков</a> <code>A B</code></li>
+  </ul>
+ </li>
+ <li id="pelm">Псевдоэлементы    <a href="/ru/docs/Web/CSS/Pseudo-elements">(больше информации)</a>
+  <ul>
+   <li>{{ Cssxref("::after") }}</li>
+   <li>{{ Cssxref("::before") }}</li>
+   <li>{{ Cssxref("::first-letter") }}</li>
+   <li>{{ Cssxref("::first-line") }}</li>
+   <li>{{ Cssxref("::selection") }}</li>
+   <li>{{ Cssxref("::backdrop") }}</li>
+   <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+  </ul>
+ </li>
+ <li id="pcls">Псевдоклассы    <a href="/ru/docs/Web/CSS/Псевдо-классы">(больше информации)</a>
+  <ul>
+   <li>{{ Cssxref(":active") }}</li>
+   <li>{{ cssxref(':any')}}</li>
+   <li>{{ Cssxref(":checked") }}</li>
+   <li>{{ Cssxref(":default") }}</li>
+   <li>{{ Cssxref(":dir", ":dir()")}}</li>
+   <li>{{ Cssxref(":disabled") }}</li>
+   <li>{{ Cssxref(":empty") }}</li>
+   <li>{{ Cssxref(":enabled") }}</li>
+   <li>{{ Cssxref(":first") }}</li>
+   <li>{{ Cssxref(":first-child") }}</li>
+   <li>{{ Cssxref(":first-of-type") }}</li>
+   <li>{{ Cssxref(":fullscreen") }}</li>
+   <li>{{ Cssxref(":focus") }}</li>
+   <li>{{ Cssxref(":hover") }}</li>
+   <li>{{ Cssxref(":indeterminate") }}</li>
+   <li>{{ Cssxref(":in-range") }}</li>
+   <li>{{ Cssxref(":invalid") }}</li>
+   <li>{{ Cssxref(":lang", ":lang()") }}</li>
+   <li>{{ Cssxref(":last-child") }}</li>
+   <li>{{ Cssxref(":last-of-type") }}</li>
+   <li>{{ Cssxref(":left") }}</li>
+   <li>{{ Cssxref(":link") }}</li>
+   <li>{{ Cssxref(":not", ":not()") }}</li>
+   <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+   <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+   <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+   <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+   <li>{{ Cssxref(":only-child") }}</li>
+   <li>{{ Cssxref(":only-of-type") }}</li>
+   <li>{{ Cssxref(":optional") }}</li>
+   <li>{{ Cssxref(":out-of-range") }}</li>
+   <li>{{ Cssxref(":read-only") }}</li>
+   <li>{{ Cssxref(":read-write") }}</li>
+   <li>{{ Cssxref(":required") }}</li>
+   <li>{{ Cssxref(":right") }}</li>
+   <li>{{ Cssxref(":root") }}</li>
+   <li>{{ Cssxref(":scope") }}</li>
+   <li>{{ Cssxref(":target") }}</li>
+   <li>{{ Cssxref(":valid") }}</li>
+   <li>{{ Cssxref(":visited") }}</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Полный <a href="http://www.w3.org/TR/selectors/#selectors" title="http://www.w3.org/TR/selectors/#selectors">список селекторов</a> в спецификации Selectors Level 3.</p>
+
+<h2 id="Обучение_CSS3">Обучение CSS3</h2>
+
+<p>Эти маленькие страницы описывают технологии, появившиеся в CSS3 или CSS2.1, но с плохой поддержкой браузерами до недавнего времени:</p>
+
+<ul>
+ <li><a href="/ru/docs/Web/Guide/CSS/Media_queries">Медиа-запросы</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Counters">Счётчики</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_gradients">Градиенты</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_transforms">Трансформации</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_animations">Анимации</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_transitions">Переходы</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_multiple_backgrounds">Множественные фоны</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts">Многоколоночные макеты</a></li>
+</ul>
+
+<h2 id="Концепции">Концепции</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Syntax">CSS синтаксис</a></li>
+ <li><a href="/ru/docs/Web/CSS/At-rule">@-правила</a></li>
+ <li><a href="/ru/docs/Web/CSS/Comments">Комментарии</a></li>
+ <li><a href="/ru/docs/Web/CSS/Specificity">Специфичность</a></li>
+ <li><a href="/ru/docs/Web/CSS/initial_value">Начальное значение</a></li>
+ <li><a href="/ru/docs/Web/CSS/inheritance">Наследование</a></li>
+ <li><a href="/ru/docs/Web/CSS/specified_value">Указанное значение</a> </li>
+ <li><a href="/ru/docs/Web/CSS/computed_value">Высчитанное значение</a></li>
+ <li><a href="/ru/docs/Web/CSS/used_value">Используемое значение</a></li>
+ <li><a href="/ru/docs/Web/CSS/actual_value">Актуальное значение</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value">Вычисленное значение</a> (почти то же, что высчитанное)</li>
+ <li><a href="/ru/docs/Web/CSS/box_model">Box-модель</a></li>
+ <li><a href="/ru/docs/Web/CSS/Replaced_element">Замещаемый элемент</a></li>
+ <li><a href="/ru/docs/Web/CSS/Value_definition_syntax">Синтаксис определения значений</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">Сокращенные свойства</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Объединение отступов</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Модель визуального форматирования</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode">Слои</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<p>Важнейшие типы объектов:</p>
+
+<ul>
+ <li>document . <a href="/ru/docs/Web/API/Document/styleSheets">styleSheets</a></li>
+ <li>styleSheets[x] . <a href="/ru/docs/Web/API/CSSRuleList">cssRules</a></li>
+ <li>cssRules[x] . <a href="/ru/docs/Web/API/CSSRule/cssText">cssText</a> (селекторы и стили)</li>
+ <li>cssRules[x] . <a href="/ru/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
+ <li>elem . <a href="/ru/docs/Web/API/HTMLElement/style">style</a></li>
+ <li>elem . style . <a href="/ru/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (только стили)</li>
+ <li>elem . <a href="/ru/docs/Web/API/Element/className">className</a></li>
+ <li>elem . <a href="/ru/docs/Web/API/Element/classList">classList</a></li>
+</ul>
+
+<p>важные методы:</p>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+</ul>
diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html
new file mode 100644
index 0000000000..e7dc20f24e
--- /dev/null
+++ b/files/ru/web/css/repeating-linear-gradient()/index.html
@@ -0,0 +1,134 @@
+---
+title: repeating-linear-gradient()
+slug: Web/CSS/repeating-linear-gradient()
+translation_of: Web/CSS/repeating-linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>repeating-linear-gradient()</code></strong> создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("&lt;gradient&gt;")}}, являющегося разновидностью типа данных {{cssxref("&lt;image&gt;")}}.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Повторяющийся градиент с углом наклона 45 градусов,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(45deg, blue, red);
+
+/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(to left top, blue, red);
+
+/* Повторяющийся градиент идущий от низа к верху,
+   начинающийся с синего, переходящего в зеленый на 40%,
+   и заканчивающийся красным цветом */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+</pre>
+
+<p>С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.</p>
+
+<p>Повторяющийся линейный градиент (как и любой прочий градиент) <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">не имеет размерностей по умолчанию</a>; т.е. у него нет предопределенного размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Поскольку <code>&lt;gradient&gt;</code> относится к типу данных <code>&lt;image&gt;</code> , он может быть использован только там где применим тип <code>&lt;image&gt;</code>. По этой причине <code>repeating-linear-gradient()</code> не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("&lt;color&gt;")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;сторона-или-угол&gt;</code></dt>
+ <dd>Положение точки начала линии градиента. Начинается со слова <code>to</code> и максимум двух ключевых слов: одно определяет сторону по горизонтали (<code>left</code> или <code>right</code>), и другое сторону по вертикали (<code>top</code> или <code>bottom</code>). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется <code><span class="css">to</span></code><span class="css"> </span><code><span class="css">bottom</span></code>.</dd>
+ <dd>Значения <code>to top</code>, <code>to bottom</code>, <code>to left</code>, и <code>to right</code> эквивалентны углам <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, и <code>90deg</code> соответственно. Прочие значения транслируются в угол.</dd>
+ <dt>{{cssxref("&lt;angle&gt;", "&lt;угол&gt;")}}</dt>
+ <dd>Угол наклона линии направления градиента. Значение <code>0deg</code> эквивалентно <code>to top</code>; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (<code>0deg</code>).</dd>
+ <dt><code>&lt;цвет-позиция&gt;</code></dt>
+ <dd>Значение {{cssxref("&lt;color&gt;", "&lt;цвета&gt;")}} с последующей (необязательной) его позицией (либо в {{cssxref("&lt;percentage&gt;", "&lt;процентах&gt;")}}, либо в единицах {{cssxref("&lt;length&gt;", "&lt;длины&gt;")}} вдоль оси градиента).</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Примечание:</strong> Рендер <a href="#Gradient_with_multiple_color_stops">перехода цветов в CSS градиентах</a> следует тем же правилам что и в <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG градиентах</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/en-US/CSS/angle">&lt;угол&gt;</a> | to &lt;сторона-или-угол&gt; ,]? &lt;цвет-позиция&gt; [, &lt;цвет-позиция&gt;]+ )
+                            \---------------------------------/ \----------------------------/
+                              Определение линии градиента         Список цветов и их позиций
+
+где <code>&lt;</code>сторона-или-угол<code>&gt; = [left | right] || [top | bottom]</code>
+   и <code>&lt;</code>цвет-позиция<code>&gt;    = &lt;цвет&gt; [ &lt;процент&gt; | &lt;длина&gt; ]?</code>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Полоски_зебры">Полоски зебры</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Полоски_зебры', 120, 120)}}</p>
+
+<h3 id="Повторяющиеся_горизонтальные_полосы">Повторяющиеся горизонтальные полосы</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Для дополнительных примеров пожалуйста обратитесь к статье <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</div>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en/CSS/Using_CSS_gradients">Using CSS gradients</a></li>
+ <li>Другие функции градиентов: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li>
+</ul>
diff --git a/files/ru/web/css/resolved_value/index.html b/files/ru/web/css/resolved_value/index.html
new file mode 100644
index 0000000000..8ea7300dd7
--- /dev/null
+++ b/files/ru/web/css/resolved_value/index.html
@@ -0,0 +1,37 @@
+---
+title: Решённое значение
+slug: Web/CSS/resolved_value
+tags:
+  - CSS
+translation_of: Web/CSS/resolved_value
+---
+<div>{{cssref}}</div>
+
+<p><strong>Решённое значение</strong> CSS свойства - значение, возвращаемое {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Для многих свойств, это {{cssxref("computed_value", "вычисленное значение") }}, но для старых свойств (включая {{cssxref("width")}} и {{cssxref("height")}}), это {{cssxref("used_value", "используемое значение")}}. Смотрите ссылку спецификации ниже для дополнильной информации.</p>
+
+<h2 id="Спецификации">Спецификации</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("CSSOM", "#resolved-values", "resolved value")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Справка по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+</ul>
diff --git a/files/ru/web/css/revert/index.html b/files/ru/web/css/revert/index.html
new file mode 100644
index 0000000000..3b61c5ad38
--- /dev/null
+++ b/files/ru/web/css/revert/index.html
@@ -0,0 +1,85 @@
+---
+title: revert
+slug: Web/CSS/revert
+translation_of: Web/CSS/revert
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Ключевое слово <strong><code>revert</code></strong> (CSS) откатывает один текущий уровень каскада, таким образом свойство принимает такое значение, которое было бы, если бы не было никаких стилей в текущем источнике стилей (авторских, пользовательских или браузерных).</span> Как следствие, оно сбрасывает свойство к значению по-умолчанию, которое было установлено браузером (или пользовательскими стилями, если такие имеются). Ключевое слово <strong><code>revert</code></strong> может быть применимо к любому свойству CSS, включая сокращённое свойство {{cssxref("all")}}.</p>
+
+<p>Ключевое слово <code>revert</code> полезно для изоляции встраиваемых виджетов или компонентов от стилей страницы, где они размещаются, особенно, когда оно используется совместно со свойством {{cssxref("all")}} .</p>
+
+<p>В пользовательских стилях <code>revert</code> откатывает каскад и сбрасывает свойство к значению по-умолчанию, которое было установлено браузером.</p>
+
+<div class="note">
+<p>Ключевое слово <code>revert</code> отличается от {{cssxref("initial")}}, поэтому его не следует с ним путать. {{cssxref("initial")}} использует <a href="/ru/docs/Web/CSS/initial_value">начальное значение</a>, которое определено отдельно для каждого свойства CSS-спецификацией.  Для сравнения, браузеры устанавливают значения по-умолчанию в зависимости от CSS селектора.</p>
+
+<p>Например, <a href="/ru/docs/Web/CSS/initial_value">начальное значение</a> для свойства {{cssxref("display")}} — <code>inline</code>, тогда как браузер устанавливает значение по-умолчанию свойства {{cssxref("display")}}  элемента {{HTMLElement("div")}} как <code>block</code>, а элемента {{HTMLElement("table")}} как <code>table</code>, и т.д</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;p&gt;Это секция!&lt;/p&gt;
+
+  &lt;aside class="widget"&gt;
+    &lt;p&gt;А это маленький виджет.&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">section {
+  color: blue;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+.widget {
+  all: revert;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+<h2 id="Спецификация">Спецификация</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('CSS4 Cascade', '#default', 'revert')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("css.types.global_keywords.revert")}}</p>
+</div>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Используйте {{cssxref("initial")}}, чтобы установить свойству начальное значение.</li>
+ <li>Используйте {{cssxref("unset")}}, чтобы установить свойству унаследованное значение, если оно наследуется, в противном случае начальное значение.</li>
+ <li>Используйте {{cssxref("inherit")}}, чтобы установить значение свойства элемента таким же, как у его родителя.</li>
+ <li>Свойство {{cssxref("all")}} позволяет одновременно сбросить все свойства к их начальному, унаследованному, откатанному или обнулённому состоянию.</li>
+</ul>
diff --git a/files/ru/web/css/right/index.html b/files/ru/web/css/right/index.html
new file mode 100644
index 0000000000..8944f81b7f
--- /dev/null
+++ b/files/ru/web/css/right/index.html
@@ -0,0 +1,141 @@
+---
+title: right
+slug: Web/CSS/right
+tags:
+  - CSS
+  - CSS Позиционирование
+  - CSS свойство
+translation_of: Web/CSS/right
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>right</code></strong> частично определяет горизонтальное положение позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. <strong><code>right</code></strong> не применится, если задано <code>position: static</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/right.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<p>Эффект свойства <code>right</code> зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):</p>
+
+<ul>
+ <li>Когда задано <code>position: absolute</code> или <code>fixed</code> — свойство <code>right</code> устанавливает расстояние между правым краем элемента и правым краем содержащего его блока.</li>
+ <li>Когда задано <code>position: relative</code> — свойство <code>right</code> устанавливает расстояние, на которое правый край элемента перемещается влево от его обычной позиции.</li>
+ <li>Когда задано <code>position: sticky</code> — свойство <code>right</code> работает так, как при <code>position: relative</code> во время нахождения элемента внутри области просмотра, и как <code>position: fixed</code> вне области просмотра.</li>
+ <li>Когда задано <code>position: static</code> — свойство <code>right</code> <em>не имеет никакого эффекта</em>.</li>
+</ul>
+
+<p>Когда заданы оба свойства {{cssxref("left")}} и <code>right</code>, и элемент не может растянуться, чтобы им соответсвовать, то позиционированние элемента is<em> overspecified</em>. В этом случае значение <code>left</code> имеет приоритет, when the container is left-to-right; и наоборот, значение <code>right</code> имеет приоритет,  when the container is right-to-left.</p>
+
+<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения величин */
+right: 3px;
+right: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+right: 10%;
+
+/* Ключевое слово */
+right: auto;
+
+/* Глобальные значения */
+right: inherit;
+right: initial;
+right: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Отрицательная, нулевая или положительная величина, которая представляет:
+ <ul>
+  <li>for <em>absolutely positioned elements</em>, the distance to the right edge of the containing block.</li>
+  <li>for <em>relatively positioned elements</em>, the distance that the element is moved to the left of its normal position.</li>
+ </ul>
+ </dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>A {{cssxref("&lt;percentage&gt;")}} of the containing block's width.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Specifies that:
+ <ul>
+  <li>for <em>absolutely positioned elements</em>, the position of the element is based on the {{Cssxref("left")}} property, while <code>width: auto</code> is treated as a width based on the content; or if <code>left</code> is also <code>auto</code>, the element is positioned where it should horizontally be positioned if it were a static element.</li>
+  <li>for <em>relatively positioned elements</em>, the distance of the element from its normal position is based on the {{Cssxref("left")}} property; or if <code>left</code> is also <code>auto</code>, the element is not moved horizontally at all.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, or the <code>auto</code> keyword.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры" name="Примеры">Примеры</h2>
+
+<pre class="brush: css; highlight:[16]">#example_3 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#example_4 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}</pre>
+
+<pre class="brush: html">&lt;div id="example_3"&gt;Example 3&lt;/div&gt;
+&lt;div id="example_4"&gt;Example 4&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Examples', 500, 220) }}</p>
+
+<h2 id="Спецификации" name="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>right</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Adds behavior for sticky positioning.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.right")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("position")}}, {{cssxref("left")}}, {{cssxref("top")}}, {{cssxref("bottom")}}</li>
+</ul>
diff --git a/files/ru/web/css/ruby-align/index.html b/files/ru/web/css/ruby-align/index.html
new file mode 100644
index 0000000000..24870c5d3d
--- /dev/null
+++ b/files/ru/web/css/ruby-align/index.html
@@ -0,0 +1,234 @@
+---
+title: ruby-align
+slug: Web/CSS/ruby-align
+translation_of: Web/CSS/ruby-align
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <code><strong>ruby-align</strong></code> CSS property defines the distribution of the different ruby elements over the base.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Keyword values */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Global values */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Is a keyword indicating that the ruby will be aligned with the start of the base text.</dd>
+ <dt><code>center</code></dt>
+ <dd>Is a keyword indicating that the ruby will be aligned at the middle of the base text</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Is a keyword indicating that the extra space will be distributed between the elements of the ruby.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This HTML will render differently with each value of <code>ruby-align</code>:</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="Ruby_aligned_at_the_start_of_the_base_text">Ruby aligned at the start of the base text</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:start;
+}</pre>
+
+<p>This gives the following result:</p>
+
+<p>{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}}</p>
+
+<h3 id="Ruby_aligned_at_the_center_of_the_base_text">Ruby aligned at the center of the base text</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:center;
+}</pre>
+
+<p>This gives the following result:</p>
+
+<p>{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}}</p>
+
+<h3 id="Extra_space_distributed_between_ruby_elements">Extra space distributed between ruby elements</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:space-between;
+}</pre>
+
+<p>This gives the following result:</p>
+
+<p>{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}}</p>
+
+<h3 id="Extra_space_distributed_between_and_around_ruby_element">Extra space distributed between and around ruby element</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:space-around;
+}</pre>
+
+<p>This gives the following result:</p>
+
+<p>{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_element", 180, 40)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align') }}</td>
+   <td>{{ Spec2('CSS3 Ruby') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td rowspan="1">Basic support</td>
+   <td rowspan="1">{{ CompatNo }} </td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td rowspan="1">{{ CompatNo }} [1]</td>
+   <td rowspan="1">{{ CompatNo }} </td>
+   <td rowspan="1">{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }} </td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{ CompatNo }} [1]</td>
+   <td>{{ CompatNo }} </td>
+   <td>CompatNo</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer, since IE9, implements an early draft of CSS Ruby where <code>ruby-align</code> had the following properties: <code>auto</code>, <code>left</code>, <code>center</code>, <code>right</code>, <code>distribute-letter</code>, <code>distribute-space</code>, and <code>line-edge</code>. Here is a rough conversion table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">IE syntax</th>
+   <th scope="col">Standard syntax</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td>Don't use <code>ruby-align</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td>Use <code>start</code> (in ltr scripts)</td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>center</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td>Use <code>start</code> (in rtl scripts)</td>
+  </tr>
+  <tr>
+   <td><code>distribute-letter</code></td>
+   <td>No direct equivalent, use <code>space-between</code> or <code>space-around</code></td>
+  </tr>
+  <tr>
+   <td><code>distribute-space</code></td>
+   <td><code>space-around</code></td>
+  </tr>
+  <tr>
+   <td><code>line-edge</code></td>
+   <td>No direct equivalent.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML Ruby elements: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, and {{HTMLElement("rtc")}}.</li>
+ <li>CSS Ruby properties: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.</li>
+</ul>
diff --git a/files/ru/web/css/scroll-behavior/index.html b/files/ru/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..8ba0b4f9f7
--- /dev/null
+++ b/files/ru/web/css/scroll-behavior/index.html
@@ -0,0 +1,114 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+translation_of: Web/CSS/scroll-behavior
+---
+<div>{{ CSSRef }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><strong><code>scroll-behavior</code></strong> - CSS свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему <em>viewport</em> пространству.</p>
+
+<p>Юзер-агенты могут игнорировать это свойство.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css">/* Ключевые значения */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Глобальные свойства */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Стандартное поведение прокрутки без эффекта плавности.</dd>
+ <dt><code>smooth</code></dt>
+ <dd>Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.</dd>
+</dl>
+
+<h3 id="Синтаксис">Синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;nav&gt;
+  &lt;a href="#page-1"&gt;1&lt;/a&gt;
+  &lt;a href="#page-2"&gt;2&lt;/a&gt;
+  &lt;a href="#page-3"&gt;3&lt;/a&gt;
+&lt;/nav&gt;
+&lt;scroll-container&gt;
+  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
+&lt;/scroll-container&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', "100%", 250) }}</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('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.scroll-behavior")}}</p>
diff --git a/files/ru/web/css/scroll-snap-type/index.html b/files/ru/web/css/scroll-snap-type/index.html
new file mode 100644
index 0000000000..2691947063
--- /dev/null
+++ b/files/ru/web/css/scroll-snap-type/index.html
@@ -0,0 +1,247 @@
+---
+title: scroll-snap-type
+slug: Web/CSS/scroll-snap-type
+translation_of: Web/CSS/scroll-snap-type
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> свойство <strong><code>scroll-snap-type</code></strong> определяет как строго прокрутка контейнера привязывается к  точкам привязки.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}</div>
+
+
+
+<p>Это свойство не уточняет какие именно анимации используются для привязки прокрутки, это остаётся за агентом пользователя.</p>
+
+<pre class="brush:css no-line-numbers">/* Ключевые слова */
+scroll-snap-type: none;
+scroll-snap-type: x;
+scroll-snap-type: y;
+scroll-snap-type: block;
+scroll-snap-type: inline;
+scroll-snap-type: both;
+
+/* Опционально mandatory | proximity*/
+scroll-snap-type: x mandatory;
+scroll-snap-type: y proximity;
+scroll-snap-type: both mandatory;
+
+/* и т.д. */
+
+/* Глобальные значения */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Когда визуальный {{Glossary("viewport")}} этого контейнера прокручивается, точки прокрутки игнорируются.</dd>
+ <dt><code>x</code></dt>
+ <dd>Прокрутка контейнера привязывается только по горизонтальной оси.</dd>
+ <dt><code>y</code></dt>
+ <dd>Прокрутка контейнера привязывается только по вертикальной оси.</dd>
+ <dt><code>block</code></dt>
+ <dd>Прокрутка контейнера привязывается только по блоковой оси.</dd>
+ <dt><code>inline</code></dt>
+ <dd>Прокрутка контейнера привязывается только по строчной оси.</dd>
+ <dt><code>both</code></dt>
+ <dd>Прокрутка контейнера независимо привязывается только по обоим осям (потенциально может привязываться к разным элементам на разных осях).</dd>
+ <dt><code>mandatory</code></dt>
+ <dd>Визуальный viewport контейнера остаётся на точке привязки, если он в данный момент не прокручивается. То есть он привязывается к точке, когда прокручивание завершилось. Если контент добавлен, перемещён, удалён или если изменён его размер, прокрутка будет отрегулирована так, чтобы оставаться на этой же точке.</dd>
+ <dt><code>proximity</code></dt>
+ <dd>Визуальный viewport контейнера может оставаться на точке привязки, если он в данный момент не прокручивается, в зависимости от параметров пользовательского агента. Если контент добавлен, перемещён, удалён или если изменён его размер, прокрутка может быть отрегулирована так, чтобы оставаться на этой же точке.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="holster"&gt;
+&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* setup */
+html, body, .holster {
+  height: 100%;
+}
+.holster {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container &gt; div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container &gt; div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container &gt; div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 100%;
+}
+/* appearance fixes */
+.y.container &gt; div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример", "100%", "1630")}}</p>
+
+<h2 id="Спецификация">Спецификация</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("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.scroll-snap-type")}}</p>
diff --git a/files/ru/web/css/selector_list/index.html b/files/ru/web/css/selector_list/index.html
new file mode 100644
index 0000000000..3bf50932d0
--- /dev/null
+++ b/files/ru/web/css/selector_list/index.html
@@ -0,0 +1,99 @@
+---
+title: Список селекторов
+slug: Web/CSS/Selector_list
+tags:
+  - Верстка
+  - список селекторов
+translation_of: Web/CSS/Selector_list
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <strong>список селекторов</strong> (<code>,</code>) выбирает все соответствующие ноды.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает все соответствующие элементы */
+span,
+div {
+  border: red 2px solid;
+}</pre>
+
+<p>Для уменьшения размеры таблицы стилей, можно использовать разделяемый запятой список селекторов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element, element, element { <em>свойства стиля</em> }</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Группирование_на_одной_линии">Группирование на одной линии</h3>
+
+<p>Группирование селекторов списком, разделенным запятой, на одной строк.</p>
+
+<pre class="brush: css">h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+</pre>
+
+<h3 id="Мультистрочное_группирование">Мультистрочное группирование</h3>
+
+<p>Группирование селекторов списком, разделенным запятой, на нескольких строках.</p>
+
+<pre class="brush: css">#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+</pre>
+
+<h3 id="Невалидные_списки_селекторов">Невалидные списки селекторов</h3>
+
+<p>Недостатком использования списков селекторов является то, что они не являются эквивалентными:</p>
+
+<pre class="brush: css">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css">h1, h2:maybe-unsupported, h3 { font-family: sans-serif }</pre>
+
+<p>Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.</p>
+
+<p>Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счет этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.</p>
+
+<pre class="brush: css">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css">:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Переименованно в "selector list"</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.list")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} pseudo-classes, which don't have the legacy mistake that is selector list invalidation.</li>
+</ul>
diff --git a/files/ru/web/css/shorthand_properties/index.html b/files/ru/web/css/shorthand_properties/index.html
new file mode 100644
index 0000000000..5ac6911db1
--- /dev/null
+++ b/files/ru/web/css/shorthand_properties/index.html
@@ -0,0 +1,143 @@
+---
+title: Краткая форма записи свойств
+slug: Web/CSS/Shorthand_properties
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/Shorthand_properties
+---
+<div>{{cssref}}</div>
+
+<p class="summary"><strong><dfn>Сокращенные свойства</dfn></strong> - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращенное свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.</p>
+
+<p>The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.</p>
+
+<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Tricky edge cases</h2>
+
+<p>Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:</p>
+
+<ol>
+ <li>A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it <strong>overrides</strong> previously set values. Therefore:
+
+  <pre class="brush:css">background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+</pre>
+  will not set the color of the background to <code>red</code> but to {{cssxref("background-color")}}'s default, <code>transparent</code>, as the second rule has precedence.</li>
+ <li>Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword <code>inherit</code> can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword <code>inherit</code>.</li>
+ <li>Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:
+  <ol>
+   <li>Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word <em>trouble</em>: TRBL)</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Background_Properties" name="Background_Properties">Background properties</h2>
+
+<p>A background with the following properties ...</p>
+
+<pre class="brush:css">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;</pre>
+
+<p>... can be shortened to just one declaration:</p>
+
+<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat left top;</pre>
+
+<p>(The shorthand form is actually the equivalent of the longhand properties above plus <code>background-attachment: scroll</code> and, in CSS3, some additional properties.)</p>
+
+<h2 id="Font_Properties" name="Font_Properties">Font properties</h2>
+
+<p>The following declarations ...</p>
+
+<pre class="brush:css">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>... can be shortened to the following:</p>
+
+<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<p>This shorthand declaration is actually equivalent to the longhand declarations above plus <code>font-variant: normal</code> and <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p>
+
+<h2 id="Border_Properties" name="Border_Properties">Border properties</h2>
+
+<p>With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...</p>
+
+<pre class="brush:css">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>... can be simplified as:</p>
+
+<pre class="brush:css">border: 1px solid #000;</pre>
+
+<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Margin and padding properties</h2>
+
+<p>Shorthand versions of margin and padding values work the same way. The following CSS declarations ...</p>
+
+<pre class="brush:css">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>... are the same as the following declaration. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").</p>
+
+<pre class="brush:css">margin: 10px 5px 10px 5px;</pre>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li>
+</ul>
diff --git a/files/ru/web/css/specificity/index.html b/files/ru/web/css/specificity/index.html
new file mode 100644
index 0000000000..79e8065987
--- /dev/null
+++ b/files/ru/web/css/specificity/index.html
@@ -0,0 +1,240 @@
+---
+title: Специфичность
+slug: Web/CSS/Specificity
+tags:
+  - CSS
+  - specifity
+  - Порядок применения правил
+  - Примеры
+  - Руководство
+  - Специфичность селектора
+translation_of: Web/CSS/Specificity
+---
+<p>{{cssref}}</p>
+
+<h2 id="Определение">Определение</h2>
+
+<p><span class="seoSummary"><strong>Специфичность</strong> - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из <a href="/ru/docs/Web/CSS/Reference#Selectors" title="/ru/docs/Web/CSS/Reference#Selectors">селекторов CSS</a> различных типов.</span></p>
+
+<h2 id="Как_вычисляется_специфичность">Как вычисляется <span class="seoSummary">специфичность</span>?</h2>
+
+<p>Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из <a href="#Selector_Types">типов селекторов</a> в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для <a href="#directly-targeted-elements">непосредственно соответствующего элемента</a> всегда будет иметь больший приоритет, чем правила, унаследованные от предка.</p>
+
+<div class="note">Примечание: <a href="#tree-proximity-ignorance">Взаимное расположение элементов</a> в дереве документа не влияет на специфичность.</div>
+
+<h3 id="Типы_селекторов">Типы селекторов</h3>
+
+<p>В следующем списке типы селекторов расположены по возрастанию специфичности:</p>
+
+<ol start="0">
+ <li>селекторы типов элементов (например, <code>h1</code>) и псевдоэлементов (например, <code>::before</code>).</li>
+ <li>селекторы классов (например, <code>.example</code>), селекторы атрибутов (например, <code>[type="radio"]</code>) и псевдокласов (например, <code>:hover</code>).</li>
+ <li>селекторы идентификаторов (например, <code>#example</code>).</li>
+</ol>
+
+<p>Универсальный селектор (<code>*</code>), комбинаторы (<code>+</code>, <code>&gt;</code>, <code>~</code>, '<code> </code>') и отрицающий псевдокласс (<code>:not()</code>) не влияют на специфичность. (Однако селекторы, объявленные <em>внутри</em> <code>:not()</code>, влияют)</p>
+
+<p>Стили, обьявленные в элементе (например, <code>style="font-weight:bold"</code>), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.</p>
+
+<h3 id="Важное_исключение_из_правил_-_!important">Важное исключение из правил - <code>!important</code></h3>
+
+<p>Когда при объявлении стиля используется модификатор <code>!important</code>, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор <code>!important</code> не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку <code>!important</code> усложняет отладку, нарушая естественное <a href="/ru-RU/docs/Web/CSS/Cascade">каскадирование</a> ваших стилей, он <strong>не приветствуется</strong> и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором <code>!important</code>, то применен будет стиль с большей специфичностью.</p>
+
+<p><strong>Несколько практических советов:</strong></p>
+
+<ul>
+ <li><strong>Всегда пытайтесь использовать</strong> специфичность, а <code>!important</code> используйте только в крайних случаях</li>
+ <li><strong>Используйте</strong> <code>!important</code> <strong>только</strong> в страничных стилях, которые переопределяют стили сайта или внешние стили (стили библиотек, таких как Bootstrap или normalize.css)</li>
+ <li><strong>Никогда не используйте</strong> <code>!important</code>, если вы пишете плагин или мэшап.</li>
+ <li><strong>Никогда не используйте</strong> <code>!important</code> в общем CSS сайта.</li>
+</ul>
+
+<p><strong>Вместо <code>!important</code> можно:</strong></p>
+
+<ol>
+ <li>Лучше использовать каскадные свойства CSS</li>
+ <li>
+  <p>Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:</p>
+
+  <pre class="lang-html prettyprint prettyprinted"><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"test"</span><span class="tag">&gt;</span><span class="pln">
+  </span><span class="tag">&lt;span&gt;</span><span class="pln">Text</span><span class="tag">&lt;/span&gt;</span><span class="pln">
+</span><span class="tag">&lt;/div&gt;</span></code></pre>
+
+  <pre class="lang-css prettyprint prettyprinted"><code><span class="pln">div</span><span class="pun">#</span><span class="pln">test span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> green </span><span class="pun">}</span><span class="pln">
+div span { color: blue }
+span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> red </span><span class="pun">}</span><span class="pln">
+</span></code></pre>
+ </li>
+</ol>
+
+<p>Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).</p>
+
+<p><strong>Вам придется использовать <code>!important</code> если:</strong></p>
+
+<p>А) Первый сценарий:</p>
+
+<ol>
+ <li>У вас есть общий файл стилей, устанавливающий правила для внешнего вида сайта.</li>
+ <li>Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством - объявлением стилей непосредственно в элементах</li>
+</ol>
+
+<p>В таком случае вам придется объявить некоторые стили в вашем общем файле CSS как <code>!important</code>, переопределяя, таким образом, стили, установленные в самих элементах.</p>
+
+<p>Пример из практики: Некоторые плохо написанные <strong>плагины jQuery</strong>, использующие присваивание стилей самим элементам.</p>
+
+<p>Б) Еще сценарий:</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="com">#someElement p {</span><span class="pln">
+    color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span><span class="pln">
+
+p</span><span class="pun">.</span><span class="pln">awesome </span><span class="pun">{</span><span class="pln">
+    color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span></code></pre>
+
+<p>Как сделать цвет текста в абзацах <code>awesome</code> красным всегда, даже если они расположены внутри <code>#someElement</code>? Без <code>!important</code> у первого правила специфичность больше и оно имеет преимущество перед вторым.</p>
+
+<p><strong>Как преодолеть !important</strong></p>
+
+<p>A) Просто добавьте еще одно правило с модификатором <code>!important</code>, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).</p>
+
+<p>Пример большей специфичности:</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="pln">table td    </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="pun">.</span><span class="pln">myTable td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="com">#myTable td {height: 50px !important;}</span></code></pre>
+
+<p>Б) Или добавьте правило с модификатором <code>!important</code> и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="pln">td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span></code></pre>
+
+<p>В) Или перепишите первоначальное правило без использования <code>!important</code>.</p>
+
+<p><strong>С более подробной информацией можно ознакомиться по следующим ссылкам: </strong></p>
+
+<p><a href="http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">Когда надо использовать <code>!important</code> в CSS?</a></p>
+
+<p><a href="http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">Что означает <code>!important</code> в CSS?</a></p>
+
+<p><a href="http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">Когда в CSS надо использовать модификатор <code>!important</code></a></p>
+
+<p><a href="http://stackoverflow.com/questions/11178673/how-to-override-important">Как преодолеть <code>!important</code></a></p>
+
+<p><a href="http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">Как использовать модификатор <code>!important</code> в CSS чтобы сэкономить время</a></p>
+
+<p> </p>
+
+<h3 id="Не_исключение_-_not()">Не исключение - <code>:not()</code></h3>
+
+<p>Отрицающий псевдокласс <code>:not</code> <em>не учитывается</em> как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри <code>:not</code>, при подсчете количества <a href="#selector-type">по типам селекторов</a> рассматриваются как обычные селекторы и учитываются.</p>
+
+<p>Следующий фрагмент CSS ...</p>
+
+<pre class="brush: css">div.outer p {
+  color: orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+</pre>
+
+<p>... примененный к такому HTML ...</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;Это div.outer&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;Это текст в div.inner&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>... отобразится на экране так:</p>
+
+<p><span style="color: #ffa500;">Это div.outer</span></p>
+
+<p><span style="color: #00ff00;">Это текст в div.inner</span></p>
+
+<h3 id="Специфичность_основана_на_форме">Специфичность основана на форме</h3>
+
+<p>Специфичность опирается на форму селектора. В следующем примере, при определении специфичности селектора, селектор <code>*[id="foo"]</code> считается селектором атрибута, даже при том, что ищет идентификатор.</p>
+
+<p>Эти объявления стилей ...</p>
+
+<pre class="brush: css">*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+</pre>
+
+<p>... примененные к нижеследующей разметке ...</p>
+
+<pre class="brush: html">&lt;p id="foo"&gt;Это пример.&lt;/p&gt;
+</pre>
+
+<p>... в результате выглядят так:</p>
+
+<p><span style="color: #008000;">Это пример.</span></p>
+
+<p>Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.</p>
+
+<h3 id="Независимость_от_расположения"><a id="tree-proximity-ignorance" name="tree-proximity-ignorance">Независимость от расположения</a></h3>
+
+<p>Взаимное расположение элементов, указанных в селекторе не влияет на специфичность правила. Следующие объявления стилей ...</p>
+
+<pre class="brush: css">body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+</pre>
+
+<p>... в сочетании со следующим HTML ...</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;body&gt;
+  &lt;h1&gt;Вот заголовок!&lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>... отобразится как:</p>
+
+<p><span style="color: #800080;">Вот заголовок!</span></p>
+
+<p>Потому что, хотя оба объявления имеют одинаковое количество <a href="#selector-type">типов селекторов</a>, но селектор <code>html h1</code> объявлен последним.</p>
+
+<h3 id="Непосредственно_соответствующие_элементы_и_унаследованные_стили"><a id="directly-targeted-elements" name="directly-targeted-elements">Непосредственно соответствующие элементы и унаследованные стили</a></h3>
+
+<p>Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила. Этот CSS ...</p>
+
+<pre class="brush: css" style="font-size: 14px;">#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}</pre>
+
+<p>... с таким HTML ...</p>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;html&gt;
+&lt;body id="parent"&gt;
+  &lt;h1&gt;Вот заголовок!&lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>... тоже отобразится как:</p>
+
+<p><span style="color: #800080;">Вот заголовок!</span></p>
+
+<p>Потому что селектор <code>h1</code> непосредственно соответствует элементу, а стиль, задающий зеленый цвет, всего лишь унаследован от родителя.</p>
+
+<h2 id="Дополнительная_информация">Дополнительная информация</h2>
+
+<ul>
+ <li>Калькулятор специфичности: Интерактивный сайт, помогущий вам проверить и понять ваши собственные правила CSS - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li>
+ <li>Специфичность селекторов в CSS3 - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/ru/web/css/tab-size/index.html b/files/ru/web/css/tab-size/index.html
new file mode 100644
index 0000000000..a66d51195d
--- /dev/null
+++ b/files/ru/web/css/tab-size/index.html
@@ -0,0 +1,89 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+translation_of: Web/CSS/tab-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p class="seoSummary">CSS-свойство <strong><code>tab-size</code></strong> используется для настройки ширины символа табуляции (<code>U+0009</code>).</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;integer&gt; значения */
+tab-size: 4;
+tab-size: 0;
+
+/* &lt;length&gt; значения */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Глобальные значения */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;integer&gt;")}}</dt>
+ <dd>Количество пробелов в табе. Должно быть неотрицательным.</dd>
+ <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
+ <dd>Ширина таба. Должно быть неотрицательным.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">pre {
+  tab-size: 4; /* Установит размер таба в 4 пробела */
+}
+</pre>
+
+<pre class="brush: css">pre {
+  tab-size: 0; /* Удалит отступ */
+}
+</pre>
+
+<pre class="brush: css">pre {
+  tab-size: 2; /* Установит размер таба в 2 пробела */
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Text', '#tab-size-property', 'tab-size')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.tab-size")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Управление размером символа табуляции (U+0009)</cite></a>, электронное письмо Anne van Kesteren в CSSWG.</li>
+</ul>
diff --git a/files/ru/web/css/text-align-last/index.html b/files/ru/web/css/text-align-last/index.html
new file mode 100644
index 0000000000..26ab1b594b
--- /dev/null
+++ b/files/ru/web/css/text-align-last/index.html
@@ -0,0 +1,139 @@
+---
+title: text-align-last
+slug: Web/CSS/text-align-last
+translation_of: Web/CSS/text-align-last
+---
+<div>{{CSSRef}}</div>
+
+<div>{{SeeCompatTable}}</div>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p><code>text-align-last</code> CSS свойство описывает как выравнивается последняя строка в блоке или строка, идущая сразу перед принудительным разрывом строки.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-align-last")}}</pre>
+
+<pre>text-align-last: auto
+text-align-last: start
+text-align-last: end
+text-align-last: left
+text-align-last: right
+text-align-last: center
+text-align-last: justify
+
+text-align-last: inherit
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Затронутая строка выравнивается в зависимости от значения  {{cssxref("text-align")}}, за исключением {{cssxref("text-align")}} со значением <code>justify</code>, в этом случае эффект такой же как установить <code>text-align-last</code> равным <code>left</code>.</dd>
+ <dt><code>start</code></dt>
+ <dd>Подобно <code>left</code> если направление слева направо, и <code>right</code> если направление справа налево.</dd>
+ <dt><code>end</code></dt>
+ <dd>Подобно <code>right</code> если направление слева направо, и <code>left</code> если направление справа налево.</dd>
+ <dt><code>left</code></dt>
+ <dd>Линейное содержимое выравнивается по левому краю линейного блока.</dd>
+ <dt><code>right</code></dt>
+ <dd>Линейное содержимое выравнивается по правому краю линейного блока.</dd>
+ <dt><code>center</code></dt>
+ <dd>Линейное содержимое центрируется внутри линейного блока.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Текст выравнивается по ширине. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css">div {
+  text-align: justify;
+  -moz-text-align-last: center;
+  text-align-last: center;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align-last', 'text-align-last')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>35<br>
+    {{WebkitBug("76173")}}</td>
+   <td>{{CompatGeckoDesktop("12.0")}}{{property_prefix('-moz')}}</td>
+   <td>5.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<br>
+    {{WebkitBug("76173")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая<br>
+    поддержка</td>
+   <td>{{CompatNo}}<br>
+    {{WebkitBug("76173")}}</td>
+   <td>{{CompatGeckoMobile("12.0")}}{{property_prefix('-moz')}}</td>
+   <td>6.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<br>
+    {{WebkitBug("76173")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>В Internet Explorer значения <code>start</code> и <code>end</code> <a href="http://msdn.microsoft.com/en-us/library/ie/ms531163%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms531163%28v=vs.85%29.aspx">не поддерживаются</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/ru/web/css/text-align/index.html b/files/ru/web/css/text-align/index.html
new file mode 100644
index 0000000000..925aceee44
--- /dev/null
+++ b/files/ru/web/css/text-align/index.html
@@ -0,0 +1,260 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+translation_of: Web/CSS/text-align
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p><code>text-align</code> CSS свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. <code>text-align</code> не контролирует выравнивание элементов самого блока, но только их линейное содержимое.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Формальный синтаксис</a>: {{csssyntax("text-align")}}
+</pre>
+
+<pre>text-align: left
+text-align: right
+text-align: center
+text-align: justify
+text-align: start
+text-align: end
+text-align: match-parent
+text-align: start end
+text-align: "."
+text-align: start "."
+text-align: "." end
+
+text-align: inherit
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>start</code> {{experimental_inline}}</dt>
+ <dd>Подобно <code>left</code> если направление слева направо, и <code>right</code> если наоборот.</dd>
+ <dt><code>end</code> {{experimental_inline}}</dt>
+ <dd>Подобно <code>right</code> если направление слева направо, и <code>left</code> если наоборот.</dd>
+ <dt><code>left</code></dt>
+ <dd>Линейное содержимое выравнивается по левому краю линейного блока.</dd>
+ <dt><code>right</code></dt>
+ <dd>Линейное содержимое выравнивается по правому краю линейного блока.</dd>
+ <dt><code>center</code></dt>
+ <dd>Линейное содержимое центрируется в линейном блоке.</dd>
+ <dt><code>&lt;string&gt;</code> {{experimental_inline}}</dt>
+ <dd>Первое появление односимвольной строки - это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.</dd>
+ <dt><code>match-parent</code> {{experimental_inline}}</dt>
+ <dd>Наподобие <code>inherit</code> с различием, что значение <code>start</code> и <code>end</code> вычисляются в соответствии {{cssxref("direction")}} и заменяются соответствующим <code>left</code> или <code>right</code> значением.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><a href="/samples/cssref/text-align.html">Посмотреть живые примеры</a></p>
+
+<h3 id="Живые_примеры">Живые примеры</h3>
+
+<div style="text-align: center; border: solid; margin: 1em 0;">div { <strong>text-align: center</strong>; border:solid; }
+
+<p style="background: gold; width: 22em; margin: 1em 0;">p { background:gold; width:22em; }</p>
+несколько текста...</div>
+
+<div style="text-align: center; border: solid; margin: 1em 0;">div { <strong>text-align: center</strong>; border:solid; }
+
+<p style="background: gold; width: 22em; margin: 1em auto;">p { background:gold; width:22em; <strong>margin: 1em auto</strong>; }</p>
+несколько текста...</div>
+
+<div style="text-align: -moz-center; text-align: -webkit-center; border: solid; margin: 1em 0;">div { <strong>text-align:-moz-center</strong>; text-align:-webkit-center; border:solid; }
+
+<p style="background: gold; width: 22em; margin: 1em 0;">p { background:gold; width:22em; }</p>
+несколько текста...</div>
+
+<h3 id="Примечание">Примечание</h3>
+
+<p>Стандартный совместимый способ центрировать сам блок без выравнивания его содержимого, это установка его left и right margin в auto, пример:<br>
+ <code>margin:auto;</code> или <code>margin:0 auto;</code> или <code> margin-left:auto; margin-right:auto;</code></p>
+
+<h2 id="Спецификации">Спецификации</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('CSS Logical Properties', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Нет изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Добавлены <code>ключевые слова start</code><font face="Open Sans, Arial, sans-serif">,</font><code><font face="Open Sans, Arial, sans-serif"> </font>end</code> и <code>match-parent</code>. Изменено безымянное начальное значение в <code>start</code> (которое было).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка (<code>left</code>, <code>right</code>, <code>center</code> and <code>justify</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Block alignment values [1] {{non-standard_inline}}</td>
+   <td>1.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>1.0 (85){{property_prefix("-khtml")}}<br>
+    1.3 (312){{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>start</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.1 (525)</td>
+  </tr>
+  <tr>
+   <td><code>end</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3.1 (525)</td>
+  </tr>
+  <tr>
+   <td><code>match-parent</code>{{experimental_inline}}</td>
+   <td>16</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("string&gt;")}}<br>
+    value{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Block alignment values [1] {{non-standard_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>start</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>end</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>match-parent</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("&lt;string&gt;")}} value{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Оба WebKit и Gecko поддерживают префиксную версию <code>left</code>, <code>center</code>, и <code>right</code>, которая применяется не только к линейному содержимому, но также и к блочным элементам. Это используется для реализации унаследованных {{htmlattrxref("align", "td")}} атрибутов на некоторых таблично-связанных элементах. Не используйте их в рабочих сайтах.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("margin","margin:auto")}}, {{Cssxref("margin-left","margin-left:auto")}}, {{Cssxref("vertical-align")}}</li>
+</ul>
diff --git a/files/ru/web/css/text-decoration-skip/index.html b/files/ru/web/css/text-decoration-skip/index.html
new file mode 100644
index 0000000000..206207acd9
--- /dev/null
+++ b/files/ru/web/css/text-decoration-skip/index.html
@@ -0,0 +1,151 @@
+---
+title: text-decoration-skip
+slug: Web/CSS/text-decoration-skip
+translation_of: Web/CSS/text-decoration-skip
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>text-decoration-skip</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property specifies what parts of the element’s content any text decoration affecting the element must skip over.</span> It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.</p>
+
+<pre class="brush:css no-line-numbers">/* Single keyword */
+text-decoration-skip: none;
+text-decoration-skip: objects;
+text-decoration-skip: spaces;
+text-decoration-skip: ink;
+text-decoration-skip: edges;
+text-decoration-skip: box-decoration;
+
+/* Multiple keywords */
+text-decoration-skip: objects spaces;
+text-decoration-skip: ink edges box-decoration;
+
+/* Global keywords */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Nothing is skipped, i.e. text decoration is drawn for all text content and across atomic inline-level boxes.</dd>
+ <dt><code>objects</code></dt>
+ <dd>The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.</dd>
+ <dt><code>spaces</code></dt>
+ <dd>All spacing is skipped, i.e. all <a href="http://www.unicode.org/reports/tr44/#White_Space">Unicode white space characters</a> and all word separators, plus any adjacent {{cssxref("letter-spacing")}} or {{cssxref("word-spacing")}}.</dd>
+ <dt><code>ink</code></dt>
+ <dd>The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.</dd>
+ <dd><img alt='An example of "text-decoration-skip: ink;".' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd>
+ <dt><code>edges</code></dt>
+ <dd>The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)</dd>
+ <dd><img alt='An example of "text-decoration-skip: edges;".' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png"></dd>
+ <dt><code>box-decoration</code></dt>
+ <dd>The text decoration is skipped over the box's margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a <em>decorating box</em> never draws over its own box decoration.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<p class="syntaxbox">{{csssyntax}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;p&gt;Hey, grab a cup of coffee!&lt;/p&gt;</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  margin: 0;
+  font-size: 3em;
+  text-decoration: underline;
+  text-decoration-skip: ink;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 60)}}</p>
+
+<h2 id="Спецификации">Спецификации</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("CSS3 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}</td>
+   <td>{{Spec2("CSS3 Text Decoration")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is not implemented yet. See {{bug(812990)}}.</p>
+
+<p>[2] This feature is not implemented yet. See the <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514536-text-decoration-styling">related request</a>.</p>
+
+<p>[3] Safari implements a {{property_prefix("-webkit")}} prefixed version of this property since version 8, though only supports the value <code>none</code> and the non-standard value <code>skip</code>. All other values behave like those two values.</p>
diff --git a/files/ru/web/css/text-indent/index.html b/files/ru/web/css/text-indent/index.html
new file mode 100644
index 0000000000..143069b642
--- /dev/null
+++ b/files/ru/web/css/text-indent/index.html
@@ -0,0 +1,212 @@
+---
+title: text-indent
+slug: Web/CSS/text-indent
+translation_of: Web/CSS/text-indent
+---
+<div>{{CSSRef}}</div>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font><strong>text-indent</strong></code> определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова <code>hanging </code>и <code>each-line </code>могут изменить данное поведение.</p>
+
+<p>Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.</p>
+
+<p> {{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* значение &lt;length&gt; */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* значение &lt;percentage&gt; зависит от ширины блока*/
+text-indent: 15%;
+
+/* значения ключевых слов */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* международные значения */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;length&gt; </code></dt>
+ <dd>Отступ определяется как абсолютная длина ({{cssxref("&lt;length&gt;")}}). Возможны также отрицательные значения. Статья про значение длины ({{cssxref("&lt;length&gt;")}}) расскажет больше про возможные единицы измерения.</dd>
+ <dt><code>&lt;percentage&gt; </code></dt>
+ <dd>В процентном ({{cssxref("&lt;percentage&gt;")}}) соотношении отступ зависит от ширины всего блока, внутри которого находится строка.</dd>
+ <dt><code>each-line</code> {{experimental_inline}} (экспериментальное значение)</dt>
+ <dd>Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса. </dd>
+ <dt><code>hanging</code> {{experimental_inline}} (экспериментальное значение)</dt>
+ <dd>Отступ добавляется ко всем строкам, <em>кроме </em>первой. </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Simple_indent" name="Simple_indent">Простые примеры отступов</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  text-indent: 5em;
+  background: powderblue;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_indent','100%','100%') }}</p>
+
+<h2 id="Percentage_indent_example" name="Percentage_indent_example">Пример со значением &lt;<code>percentage&gt; </code></h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt; </pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">p {
+  text-indent: 30%;
+  background: plum;
+}</pre>
+
+<p>{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}</p>
+
+<h2 id="Спецификация">Спецификация</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('CSS3 Text', '#text-indent', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Добавили ключевые слова <code>hanging</code> и <code>each-line</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>text-indent</code> как анимированное свойство</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Подробно определяет поведение блочно-строчных элементов (<code>display: inline-block) </code>и незаполненных блоков (anonymous block boxes)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>hanging</code></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>each-line</code></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hanging</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>each-line</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko это не поддерживает. Смотрите {{bug(784648)}}.</p>
diff --git a/files/ru/web/css/text-justify/index.html b/files/ru/web/css/text-justify/index.html
new file mode 100644
index 0000000000..90498601e6
--- /dev/null
+++ b/files/ru/web/css/text-justify/index.html
@@ -0,0 +1,115 @@
+---
+title: text-justify
+slug: Web/CSS/text-justify
+tags:
+  - Текст
+  - выравнивание текста
+translation_of: Web/CSS/text-justify
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-свойство <strong><code>text-justify</code></strong> определяет какой тип выравнивания следует применить к тексту,  когда {{cssxref("text-align")}}<code>: justify;</code> применяется к элементу.</p>
+
+<pre class="brush: css no-line-numbers">text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* Устаревшее значение */
+</pre>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>text-justify</code> указывается как одно ключевое слово, выбранное из нижеследующего списка значений.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Выравнивание текста отключено. Оно имеет такой же эффект как отсутствие применение свойства {{cssxref("text-align")}}, хотя оно полезно, если вам нужно включать и выключать выравнивание.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер выбирает лучший тип выравнивания в текущей ситуации, основываясь на балансе между производительностью и качеством, а также на том, что более подходит для языка текста (например, английского, иероглифных языков, и т.п.).  Оно используется по умолчанию, если <code>text-justify</code> не установлен.</dd>
+ <dt><code>inter-word</code></dt>
+ <dd>Выравнивание текста по средствам добавления пробелов между словами (эффективно варьируя {{cssxref("word-spacing")}}), что наиболее подходит для языков, которые используют разделение слов пробелами, таких как английский или корейский.</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>Выравнивание текста по средствам добавления пробелов между символами (effectively varying {{cssxref("letter-spacing")}}), что наиболее подходит для таких языков как японский.</dd>
+ <dt><code>distribute</code> {{deprecated_inline}}</dt>
+ <dd>Показывает тоже поведение, что и <code>inter-character</code>; это значение сохранилось для обратной совместимости.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p class="none"&gt;&lt;code&gt;text-justify: none&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="auto"&gt;&lt;code&gt;text-justify: auto&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="dist"&gt;&lt;code&gt;text-justify: distribute&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="word"&gt;&lt;code&gt;text-justify: inter-word&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="char"&gt;&lt;code&gt;text-justify: inter-character&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;</pre>
+</div>
+
+<pre class="brush: css">p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}</pre>
+
+<p>{{EmbedLiveSample("Examples","100%",400)}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Text', '#text-justify-property', 'text-justify')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.text-justify")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/ru/web/css/text-shadow/index.html b/files/ru/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..891786f7b1
--- /dev/null
+++ b/files/ru/web/css/text-shadow/index.html
@@ -0,0 +1,138 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS-свойство <strong><code>text-shadow</code></strong> добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам <code><a href="/en-US/docs/Web/CSS/text-decoration">decorations</a></code>.</span> Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если Вы желаете внести вклад в проект интерактивных примеров, пожалуйста создайте клон <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам запрос на извлечение (pull request).</p>
+
+<h2 id="Syntax_2">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* смещение-x | смещение-y | радиус-размытия | цвет */
+text-shadow: 1px 1px 2px black;
+
+/* цвет | смещение-x | смещение-y | радиус-размытия */
+text-shadow: #fc0 1px 0 10px;
+
+/* смещение-x | смещение-y | цвет */
+text-shadow: 5px 5px #558abb;
+
+/* цвет | смещение-x | смещение-y */
+text-shadow: white 2px 5px;
+
+/* смещение-x | смещение-y
+/* Используем значения по умолчанию для цвета и радиуса-размытия */
+text-shadow: 5px 10px;
+
+/* Значения принятые глобально */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+</pre>
+
+<p>Это свойство определено как разделённый запятыми список теней.</p>
+
+<p>Каждая тень определена как два или три значения <code>&lt;длина&gt;</code>, за которыми следует необязательное значение <code>&lt;цвет&gt;</code>. Первые два значения <code>&lt;длина&gt;</code> определяют параметры <code>&lt;смещение-x&gt;</code> и <code>&lt;смещение-y&gt;</code>. Третье необязательное значение <code>&lt;длина&gt; задаёт</code> <code>&lt;радиус-размытия&gt;</code>. Значение <code>&lt;цвет&gt;</code> определяет цвет тени.</p>
+
+<p>Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.</p>
+
+<p>Это свойство можно применить к <a href="/ru-RU/docs/Web/CSS/Pseudo-elements">псевдо-элементам</a> {{cssxref("::first-line")}} и {{cssxref("::first-letter")}}.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;цвет&gt;")}}</dt>
+ <dd>Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется опредлить значение цвета явно.</dd>
+ <dt><code>&lt;смещение-x&gt; &lt;смещение-y&gt;</code></dt>
+ <dd>Обязательные. Эти величины {{cssxref("&lt;длина&gt;")}} задают расстояние тени от текста. <code>&lt;смещение-x&gt;</code> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <code>&lt;смещение-y&gt;</code> определяет вертикальное растояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в <code>0</code>, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <code>&lt;радиус-размытия&gt;</code>.</dd>
+ <dt><code>&lt;радиус-размытия&gt;</code></dt>
+ <dd>Необязательный. Это величина {{cssxref("&lt;длина&gt;")}}. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию <code>0</code>, в случае когда параметр не определён.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простая_тень">Простая тень</h3>
+
+<div>
+<pre class="brush: css">.red-text-shadow {
+  text-shadow: red 0 -2px;
+}</pre>
+
+<pre class="brush: html">&lt;p class="red-text-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
+
+<h3 id="Множественные_тени">Множественные тени</h3>
+
+<div>
+<pre class="brush:css">.white-text-with-blue-shadow {
+  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+  color: white;
+  font: 1.5em Georgia, serif;
+}</pre>
+
+<pre class="brush: html">&lt;p class="white-text-with-blue-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>text-shadow</code> как анимируемую.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Свойство CSS <code>text-shadow</code> было <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">ошибочно определено в CSS2</a> и удалено из CSS2 (Level 1). Спецификация The CSS Text Module Level 3 исправила синтаксис. Позже оно было перемещено в <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="Syntax">{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице была сформирована из структурированных данных. Если Вы хотите внести вклад в эти данные, сверьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение (pull request).</div>
+
+<p>{{Compat("css.properties.text-shadow")}}</p>
+
+<h3 id="Примечание_Quantum_CSS">Примечание Quantum CSS</h3>
+
+<ul>
+ <li>В движке Gecko есть программная ошибка в результате которой метод перехода ({{cssxref("transition")}}) не будет производить переход от элемента со свойством <code>text-shadow</code> с заданным цветом к элементу со свойством <code>text-shadow</code> без заданного цвета  ({{bug(726550)}}). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, выпуск которого запланирован уже в версии Firefox 57).</li>
+</ul>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - Интерактивный генератор теней CSS.</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>Тип данных {{cssxref("&lt;color&gt;")}} (для определения цвета теней)</li>
+ <li><a href="/ru-RU/docs/Web/HTML/Applying_color">Определение цвета для элемента HTML посредством CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/text-size-adjust/index.html b/files/ru/web/css/text-size-adjust/index.html
new file mode 100644
index 0000000000..fc87bf341b
--- /dev/null
+++ b/files/ru/web/css/text-size-adjust/index.html
@@ -0,0 +1,165 @@
+---
+title: text-size-adjust
+slug: Web/CSS/text-size-adjust
+tags:
+  - Эксперементально
+translation_of: Web/CSS/text-size-adjust
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>text-size-adjust</code></strong> контролирует алгоритм увеличения текста, используемый на некоторых смартфонах и планшетах. Другие браузеры будут игнорировать это свойство.</p>
+
+<p>Так как это свойство нестандартное, нужно использовать префиксы: <code>-moz-text-size-adjust</code>, <code>-webkit-text-size-adjust</code>, и <code>-ms-text-size-adjust</code>.</p>
+
+<p>Поскольку при разработке многих сайтов не подразумевался их просмотр на мобильных устройствах, то мобильные браузеры отличаются от браузеров для настольных компьютеров способом вывода страницы на экран. Для размещения страниц они используют не ширину экрана устройства, а {{glossary("viewport")}}, который значительно шире, обычно 800 или 1000 пикселей. Чтобы вернуть соответствие слишком широкой страницы истинному размеру устройства, они или показывают лишь часть того, что на самом деле визуализировано, или же уменьшают размер viewport до размеров устройства.</p>
+
+<p>Так как текст, который был уменьшен для того, чтобы уместиться на мобильном экране, может стать очень маленьким, многие мобильные браузеры применяют алгоритм увеличения текста для того, чтобы масштабировать текст и сделать его более удобным для чтения. Когда элемент, содержащий текст, использует 100% ширины экрана, алгоритм увеличивает размер его текста, но без изменения макета. Свойство <code>text-size-adjust</code>  позволяет веб-разработчикам отменить или изменить это поведение, так как веб-страницы, созданные с учётом вывода на маленькие экраны, не нуждаются в нём.</p>
+
+<p>This approach has been used as numerous web sites are not able to cope with small screens and are not usable when using the classical layout algorithm. This technique has drawbacks: the text is so tiny that it is unreadable without zooming. Even so, the user experience is better with the classical approach, which often leads to put secondary content at the top of the smartphone display, effectively pushing the main content of the page outside the viewport.</p>
+
+<p>But when the user zoomed in until the text becomes readable, an horizontal scrollbar is often needed as the line becomes larger than the width of the screen. This horizontal scrollbar has to be used to read each line of the text, which is a user experience nightmare. To prevent this, several mobile browsers implement a text <strong>inflation</strong> algorithm. When a focused element containing text use 100 % of the width of the screen, its text size is increased until it reached a readable size, without modifying the layout and removing the need of an horizontal scrollbar.</p>
+
+<p>The <code>text-size-adjust</code> property allows Web authors to opt out from this behavior, as Web pages designed to handle small screen widths do not need it.</p>
+
+<div class="note"><strong>Предупреждения</strong><strong>:</strong>
+
+<ul>
+ <li>Это свойство является нестандартным. In order to use it, Web authors have to duplicate, or even triplicate it, prefixed for each engine supporting it.</li>
+ <li>Its behavior, and even the syntax, is slightly different from one browser engine to the other. Web developers should read the browser compatibility section with the required attention.</li>
+ <li><strong>Это свойство работает только на смартфонах. </strong>As there is no inflation algorithm on desktop browsers, and on some tablet browsers like the iPad, the property is not supported there (and ignored). This property is only designed to opt out, or to cancel this opt-out, of the inflating behavior, <em>not to opt in</em>.</li>
+ <li>If <code>-webkit-text-size-adjust</code> is explicitly set to <code>none</code>, old versions of Webkit-based desktop and tablet browsers, like Chrome≤26 or Safari≤5, instead of ignoring the property, will prevent the user to zoom in or out the Web page.<a href="https://bugs.webkit.org/show_bug.cgi?id=56543">#</a></li>
+ <li>Not all engines do allow to control the final size of the text using a percentage value (E.g. Webkit and Trident do allow it, Gecko doesn't). Again Web developers should read the browser compatibility section with the required attention.</li>
+</ul>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css notranslate">/* Text is never inflated */
+text-size-adjust: none;
+
+/* Text may be inflated */
+text-size-adjust: auto;
+
+/* Text may be inflated in this exact proportion */
+text-size-adjust: 80%;
+
+/* Глобальные значения */
+text-size-adjust: inherit;
+text-size-adjust: initial;
+text-size-adjust: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Is a keyword preventing the usage of the inflation algorithm on the element. Basically, this means that the element will be displayed without its font inflated. On old WebKit-based desktop browsers (Chrome≤26, Safari≤5), this will instead prevent the user from zooming the webpage in or out.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Is a keyword allowing the usage of the inflation algorithm on the element. Browsers are not forced to use it and they won't do it on desktops and on some tablets. Its main use is to cancel a <code>none</code> value previously set.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>A percentage value is a synonym of the <code>auto</code> keyword, with the additional information that the percentage value is the increase rate to be applied to the font size when the inflation algorithm is applied.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Спецификации">Спецификации</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("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td>
+   <td>{{Spec2("CSS Text Size Adjust")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенности</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Проценты</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенности</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("-moz")}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-ms")}}<sup>[2]</sup><br>
+    11{{property_prefix("-webkit")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Процент</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] There is a bug in old Webkit-based desktop browsers. If <code>-webkit-text-size-adjust</code> is explicitly set to <code>none</code>, Webkit-based desktop browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page. See <a href="https://bugs.webkit.org/show_bug.cgi?id=56543">Bug 56543</a> (affected Safari≤5 &amp; Chrome≤26), <a href="https://code.google.com/p/chromium/issues/detail?id=163359">Bug 163359</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=84186">Bug 84186</a>.</p>
+
+<p>[2] If the viewport is set using {{HTMLElement("meta")}} element, the value of the CSS <code>text-size-adjust</code> property is ignored. See <a href="https://msdn.microsoft.com/en-us/library/ie/dn793579(v=vs.85).aspx">detailed implementation hints on MSDN</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">Документация</a> от Apple.</li>
+ <li><a class="external" href="http://dbaron.org/log/20111126-font-inflation">Описание поведения</a> Gecko от L. David Baron.</li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">Документация</a> от Microsoft.</li>
+</ul>
diff --git a/files/ru/web/css/time/index.html b/files/ru/web/css/time/index.html
new file mode 100644
index 0000000000..c300093e72
--- /dev/null
+++ b/files/ru/web/css/time/index.html
@@ -0,0 +1,87 @@
+---
+title: <time>
+slug: Web/CSS/time
+tags:
+  - Верстка
+  - Типы данных
+  - время
+translation_of: Web/CSS/time
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>&lt;time&gt;</code></strong> представляет значение времени, выраженное в секундах или милисекундах. Он используется в {{cssxref("animation")}}, {{cssxref("transition")}}, и связанных свойствах.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;time&gt;</code> состоит из ​​​​​​{{cssxref("&lt;number&gt;")}}, который следует за одним из нижеперечисленных значений. На выбор, ему может предшествовать символ <code>+</code> или <code>-</code> символ. Как и во всех измерениях, между символом и числом не допускается пробел.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Хотя число <code>0</code> имеет одно значение, независимо от единиц измерения, они не могут быть опущены. Другими словами <code>0</code> недопустимо и представляется <code>0s</code> или <code>0ms</code>.</p>
+</div>
+
+<h3 id="Единицы">Единицы</h3>
+
+<dl>
+ <dt><strong><code id="s">s</code></strong></dt>
+ <dd>Представляет время в секундах. Примеры: <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd>
+ <dt><strong><code id="ms">ms</code></strong></dt>
+ <dd>Представляет время в милисекундах. Примеры: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Преобразование между <code>s</code> и <code>ms</code> следует из логики <code>1s</code> = <code>1000ms</code>.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Валидное_время">Валидное время</h3>
+
+<pre>12s         Положительное целочисленные
+-456ms      Отрицательное целочисленные
+4.3ms       Нецелочисленное
+14mS        Единица регистронечувствительна, однако, заглавные буквы не рекомендуются
++0s         Ноль с первоначальным + и единица измерения
+-0ms        Ноль с первоначальным - и единица измерения
+</pre>
+
+<h3 id="Невалидное_время">Невалидное время</h3>
+
+<pre class="example-bad">0           Хотя ноль разрешен без единиц измерения для &lt;length&gt;, это невалидно для &lt;time&gt;.
+12.0        Это &lt;number&gt;, а не &lt;time&gt;, так как пропущена единица измерения.
+7 ms        Пробел между числом и единицей измерения не допускается.
+</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нормативное определение <code>s</code> и <code>ms</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Неформальное определение<code>s</code> и <code>ms</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.time")}}</p>
diff --git a/files/ru/web/css/top/index.html b/files/ru/web/css/top/index.html
new file mode 100644
index 0000000000..bdbc98174e
--- /dev/null
+++ b/files/ru/web/css/top/index.html
@@ -0,0 +1,211 @@
+---
+title: top
+slug: Web/CSS/top
+tags:
+  - CSS
+  - CSS Позиционирование
+  - CSS свойство
+  - Справка
+translation_of: Web/CSS/top
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>top</code></strong> частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. <strong><code>top</code></strong> не применится, если задано <code>position: static</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<p>Эффект свойства <code>top</code> зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):</p>
+
+<ul>
+ <li>Когда задано <code>position: absolute</code> или <code>fixed</code> — значение свойства <code>top</code> устанавливается как расстояние между верхней гранью элемента и верхней гранью родительского контейнера.</li>
+ <li>Когда задано <code>position: relative</code> — значение свойство <code>top</code> устанавливается как расстояние, на которое смещается верхний край элемента от нормальной позиции.</li>
+ <li>Когда задано <code>position: sticky</code> — свойство <code>top</code> работает так, как при <code>position: relative</code> во время нахождения элемента внутри области просмотра, и как <code>position: fixed</code> вне области просмотра.</li>
+ <li>Когда задано <code>position: static</code> — свойство <code>top</code> <em>не имеет никакого эффекта</em>.</li>
+</ul>
+
+<p>Когда заданы оба свойства <code>top</code> и {{cssxref("bottom")}}, а свойство {{cssxref("position")}} установлено как <code>absolute</code> или <code>fixed</code>, то оба свойства <code>top</code> и {{cssxref("bottom")}} учитываются. Во всех остальных ситуациях, если {{cssxref("height")}} как-либо ограничена или <code>position</code> установлено как <code>relative</code>, то свойство <code>top</code> будет учтено, а {{cssxref("bottom")}} — проигнорировано.</p>
+
+<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения величин */
+top: 3px;
+top: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+top: 10%;
+
+/* Ключевое слово */
+top: auto;
+
+/* Глобальные значения */
+top: inherit;
+top: initial;
+top: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Отрицательная, нулевая или положительная величина, которая представляет:
+ <ul>
+  <li>для <em>абсолютно позиционируемых элементов</em> &amp;mdash расстояние от верхнего края содержащего их блока;</li>
+  <li>для <em>относительно позиционируемых элементов</em> &amp;mdash расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.</li>
+ </ul>
+ </dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Процент от высоты родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Это ключевое слово, которое означает:
+ <ul>
+  <li>для <em>абсолютно спозиционированных элементов</em> — позиция элемента опирается на свойство {{cssxref("bottom")}}, пока <code>height: auto</code> обрабатывается как высота в зависимости от содержимого; если так же и <code>bottom: auto</code>, то элемент располагается так же, как при статическом позиционировании.</li>
+  <li>для <em>относительно спозиционированных элементов</em> — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("bottom")}}; если значение <code>bottom</code> также <code>auto</code>, элемент вообще не перемещается по вертикали.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} или ключевое слово <code>auto</code>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+<pre class="brush: css">/* Для body могут быть использованы единицы px, также и для div */
+body{
+  width: 100%;
+  height: 100%;
+}
+
+/* div теперь может использовать значения в процентах (body ширина и высота установлены) */
+div {
+  position: absolute;
+  left: 15%;
+  top: 30%;
+  bottom: 30%;
+  width: 70%;
+  height: 40%;
+  text-align: left;
+  border: 3px rgb(0,0,0) solid;
+}</pre>
+
+<pre class="brush: html"> &lt;?xml version="1.0" encoding="utf-8"?&gt;
+ &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+ &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
+   &lt;head&gt;
+     &lt;meta http-equiv="Content-Type" content="application/xhtml+xml" /&gt;
+     &lt;title&gt;Mozilla.org height top left width percentage CSS&lt;/title&gt;
+     &lt;style type="text/css"&gt;
+       /* Для body могут быть использованы единицы px, также и для div */
+       body {
+         width: 100%;
+         height: 100%;
+       }
+       /* div теперь может использовать значения в процентах (body ширина и высота установлены) */
+       div {
+         position: absolute;
+         left: 15%;
+         top: 30%;
+         bottom: 30%;
+         width: 70%;
+         height: 40%;
+         text-align: left;
+         border: 3px rgb(0,0,0) solid;
+       }
+     &lt;/style&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;center&gt;
+        &lt;div&gt;
+             ...Some content...
+        &lt;/div&gt;
+      &lt;/center&gt;
+
+   &lt;/body&gt;
+ &lt;/html&gt;</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Transitions', '#animatable-css', 'top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>top</code> как анимируемое</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В Internet Explorer до версии 7.0, когда оба свойства <code>top</code> и {{cssxref("bottom")}} определены, позиция элемента ограничена и свойство <code>top</code> имеет приоритет: вычисленное значение <code>bottom</code> устанавливается как <code>-top</code>, в то время как заданное для него значение игнорируется.</p>
diff --git a/files/ru/web/css/touch-action/index.html b/files/ru/web/css/touch-action/index.html
new file mode 100644
index 0000000000..b8b0c38033
--- /dev/null
+++ b/files/ru/web/css/touch-action/index.html
@@ -0,0 +1,232 @@
+---
+title: touch-action
+slug: Web/CSS/touch-action
+translation_of: Web/CSS/touch-action
+---
+<div>{{CSSRef}}</div>
+
+<p>Css-свойство touch-action указывает как элемент будет управляться через тачскрин (например, при помощи возможности приближения (zooming), встроенной в браузер).</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+touch-action: auto;
+touch-action: none;
+touch-action: pan-x;
+touch-action: pan-left;
+touch-action: pan-right;
+touch-action: pan-y;
+touch-action: pan-up;
+touch-action: pan-down;
+touch-action: pinch-zoom;
+touch-action: manipulation;
+
+/* Global values */
+touch-action: inherit;
+touch-action: initial;
+touch-action: unset;
+</pre>
+
+<p>По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером. Приложение, использующие  {{domxref("Pointer_events", "Pointer events", "", 1)}} получит событие {{domxref("HTMLElement/pointercancel_event", "pointercancel")}}, когда браузер начнет обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь свое поведение для оставшихся жестов благодаря прослушиванию событий  {{domxref("HTMLElement/pointermove_event", "pointermove")}} и {{domxref("HTMLElement/pointerup_event", "pointerup")}}. Applications using {{domxref("Touch_events", "Touch events", "", 1)}} disable the browser handling of gestures by calling {{domxref("Event.preventDefault","preventDefault()")}}, but should also use <code>touch-action</code> to ensure the browser knows the intent of the application before any event listeners have been invoked.</p>
+
+<p>When a gesture is started, the browser intersects the <strong>touch-action</strong> values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, <strong>touch-action</strong> is typically applied only to individual elements which have some custom behavior, without needing to specify <strong>touch-action</strong> explicitly on any of that element's descendants. After a gesture has started, changes to <strong>touch-action</strong> values will not have any impact on the behavior of the current gesture.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>touch-action</code> property may be specified as either:</p>
+
+<ul>
+ <li>any one of the keywords <code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code>, <em>or</em></li>
+ <li>one of the keywords <code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, and/or one of the keywords <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code>, plus optionally the keyword <code><a href="#">pinch-zoom</a></code>.</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>Enable browser handling of all panning and zooming gestures.</dd>
+ <dt><a id="none" name="none"><code>none</code></a></dt>
+ <dd>Disable browser handling of all panning and zooming gestures.</dd>
+ <dt><a id="pan-x" name="pan-x"><code>pan-x</code></a></dt>
+ <dd>Enable single-finger horizontal panning gestures. May be combined with <strong>pan-y, pan-up,</strong> <strong>pan-down </strong>and/or <strong>pinch-zoom</strong>.</dd>
+ <dt><a id="pan-y" name="pan-y"><code>pan-y</code></a></dt>
+ <dd>Enable single-finger vertical panning gestures. May be combined with <strong>pan-x, pan-left, </strong><strong>pan-right</strong> and/or <strong>pinch-zoom</strong>.</dd>
+ <dt><a id="manipulation" name="manipulation"><code>manipulation</code></a></dt>
+ <dd>Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of <strong>click</strong> events when the user taps the screen. This is an alias for "<strong>pan-x pan-y pinch-zoom</strong>" (which, for compatibility, is itself still valid).</dd>
+</dl>
+
+<dl>
+ <dt><a id="pan-keywords" name="pan-keywords"><code>pan-left</code>, <code>pan-right,pan-up,pan-down</code> {{experimental_inline}}</a></dt>
+ <dd>Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (<strong>pan-up</strong>) means that the user is dragging their finger downward on the screen surface, and likewise <strong>pan-left</strong> means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, <strong>"</strong><strong>pan-left pan-right</strong>" is invalid since "<strong>pan-x</strong>" is simpler, but "<strong>pan-left pan-down</strong>" is valid).</dd>
+ <dt><a id="pinch-zoom" name="pinch-zoom"><code>pinch-zoom</code></a></dt>
+ <dd>Enable multi-finger panning and zooming of the page. This may be combined with any of the <strong>pan-</strong> values.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface. </p>
+
+<pre class="brush: css notranslate">#map {
+  touch-action: none;
+}
+</pre>
+
+<p>Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.</p>
+
+<pre class="brush: css notranslate">.image-carousel {
+  width: 100%;
+  height: 150px;
+  touch-action: pan-y pinch-zoom;
+}
+</pre>
+
+<p><strong>touch-action </strong>is also often used to completely disable the delay of <strong>click </strong>events caused by support for the<strong> </strong>double-tap to zoom gesture.</p>
+
+<pre class="brush: css notranslate">html {
+  touch-action: manipulation;
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#touch-action', 'touch-action')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Added <code>pinch-zoom</code> property value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Added <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> property values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(36.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td>
+   <td>10.0{{property_prefix("-ms")}}<sup>[2]</sup><br>
+    11.0</td>
+   <td>{{CompatOpera(23)}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td><code>pan-up</code>, <code>pan-down</code>, <code>pan-left</code>, <code>pan-right</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td><code>pinch-zoom</code></td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>10.0{{property_prefix("-ms")}}<sup>[2]</sup><br>
+    11.0</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(36.0)}}</td>
+   <td>{{CompatChrome(36.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.1 [3]</td>
+  </tr>
+  <tr>
+   <td><code>pan-up</code>, <code>pan-down</code>, <code>pan-left</code>, <code>pan-right</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>pinch-zoom</code></td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This property (Level 1 keywords only) is implemented since Firefox 29, but is hidden behind the <code>layout.css.touch_action.enabled</code> preference. Starting in Firefox Nightly 50, it is enabled by default when running in nightly builds only. It is currently on track to be released in Firefox 52, see {{bug(1244402)}}.</p>
+
+<p>[2] IE10+ additionally supports the non-standard values <a href="https://msdn.microsoft.com/zh-cn/library/windows/apps/hh767313.aspx">pinch-zoom, double-tap-zoom, cross-slide-x and cross-slide-y</a>.</p>
+
+<p>[3] <a href="https://bugs.webkit.org/show_bug.cgi?id=149854">Only supports the manipulation and auto values in iOS</a>.</p>
+
+<p>[4] See {{webkitbug("133112")}}.</p>
+
+<p>[5] See {{bug(1285685)}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Pointer_events","Pointer Events")}}</li>
+ <li>WebKit Blog <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/" rel="bookmark" title="Permanent Link: More Responsive Tapping on iOS">More Responsive Tapping on iOS</a></li>
+</ul>
diff --git a/files/ru/web/css/transform-function/index.html b/files/ru/web/css/transform-function/index.html
new file mode 100644
index 0000000000..ac2d219b1f
--- /dev/null
+++ b/files/ru/web/css/transform-function/index.html
@@ -0,0 +1,207 @@
+---
+title: <transform-function>
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Transforms
+  - Layout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/transform-function
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>&lt;transform-function&gt;</code></strong> CSS data type denotes a function used to modify an element's appearance. A transform can usually be expressed by matrices, with the result determined by using matrix multiplication on each point.</p>
+
+<h2 id="Coordinates_for_2D_graphics">Coordinates for 2D graphics</h2>
+
+<p>Various coordinate models can be used to describe any transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.</p>
+
+<h3 id="Cartesian_coordinates">Cartesian coordinates</h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p>
+
+<p>In the <a class="external" href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a> each point of <a class="external" href="https://en.wikipedia.org/wiki/Euclidean_geometry">Euclidian space</a> is described using two values: the <em>abscissa</em> and the <em>ordinate</em>. In CSS (and most computer graphics), the origin <code>(0, 0)</code> is the top-left corner of any element. Each point is mathematically described using the vector notation <code>(x, y)</code>.</p>
+
+<p>Each linear function is described using a 2x2 matrix like:</p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>By using matrix multiplication with the linear function and each point in question, a transformation is created:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div>
+
+<p>Note that it is possible to apply several transformations in a row:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div>
+
+<div style="text-align: center;"> </div>
+
+<p>With this notation, it is possible to describe, and therefore composite, most common transformations: rotations, scaling, or skewing. In fact, all transformations that are linear functions can be described. Composite transforms are effectively applied in order from right to left. However, one major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p>
+
+<p><a class="external" href="https://en.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Möbius</a>' <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.</p>
+
+<h2 id="Functions_defining_transformations">Functions defining transformations</h2>
+
+<p>Several functions are available to describe transformations in CSS. Each one applies a geometric operation, in 2D or 3D:</p>
+
+<dl>
+ <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt>
+ <dd>The <code>matrix()</code> CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.</dd>
+ <dd><code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt>
+ <dd>The <code>matrix3d()</code> CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.</dd>
+ <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt>
+ <dd>The <code>perspective()</code> CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z&gt;0 becomes larger; each 3D-element with z&lt;0 becomes smaller. The strength of the effect is determined by the value of this property.</dd>
+ <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt>
+ <dd>The <code>rotate()</code> CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called <em>point reflection</em>.</dd>
+ <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt>
+ <dd>The <code>rotate3d()</code> CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</dd>
+ <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt>
+ <dd>The <code>rotateX()</code> CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd>
+ <dd><code>rotateX(a)</code>is a shorthand for <code>rotate3D(1, 0, 0, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt>
+ <dd>The <code>rotateY()</code> CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd>
+ <dd><code>rotateY(a)</code>is a shorthand for <code>rotate3D(0, 1, 0, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt>
+ <dd>The <code>rotateZ()</code> CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd>
+ <dd><code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/scale","scale()")}}</dt>
+ <dd>The <code>scale()</code> CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd>
+ <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt>
+ <dd>The <code>scale3d()</code> CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd>
+ <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt>
+ <dd>The <code>scaleX()</code> CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleX(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a vertical axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd>
+ <dd><code>scaleX(sx)</code> is a shorthand for <code>scale(sx, 1)</code> or for <code>scale3d(sx, 1, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt>
+ <dd>The <code>scaleY()</code> CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleY(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a horizontal axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd>
+ <dd><code>scaleY(sy)</code> is a shorthand for <code>scale(1, sy)</code> or for <code>scale3d(1, sy, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt>
+ <dd>The <code>scaleZ()</code> CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleZ(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> along the z-axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd>
+ <dd><code>scaleZ(sz)</code> is a shorthand for <code>scale3d(1, 1, sz)</code>.</dd>
+ <dt>{{cssxref("transform-function/skew","skew()")}}</dt>
+ <dd>The <code>skew()</code> CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd>
+ <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt>
+ <dd>The <code>skewX()</code> CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd>
+ <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt>
+ <dd>The <code>skewY()</code> CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd>
+ <dt>{{cssxref("transform-function/translate","translate()")}}</dt>
+ <dd>The <code>translate()</code> CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.</dd>
+ <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt>
+ <dd>The <code>translate3d()</code> CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.</dd>
+ <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt>
+ <dd>The <code>translateX()</code> CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves horizontally.</dd>
+ <dd><code>translateX(tx)</code> is a shorthand for <code>translate(tx, 0)</code>.</dd>
+ <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt>
+ <dd>The <code>translateY()</code> CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves vertically.</dd>
+ <dd><code>translateY(ty)</code> is a shorthand for <code>translate(0, ty)</code>.</dd>
+ <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt>
+ <dd>The <code>translateZ()</code> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves.</dd>
+ <dd><code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>12.0</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>10.0</td>
+   <td>15.0</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid(2.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11.5</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>{{CompatAndroid(3.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>22</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p>
+
+<p>Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("length")}} in addition to the standard {{cssxref("number")}}.</p>
+
+<p>[2] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p>
+
+<p>Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as <code>-ms-transform: rotate(10deg) translateZ(0);</code>, will prevent the entire property from being applied.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS {{cssxref("transform")}} property</li>
+</ul>
diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html
new file mode 100644
index 0000000000..71d94f55e7
--- /dev/null
+++ b/files/ru/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,154 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+tags:
+  - CSS
+  - CSS трансформация
+  - CSS функция
+  - Reference
+  - Rotate
+  - transform
+translation_of: Web/CSS/transform-function/rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p>Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется <em>точечным отражением</em>.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">rotate(<em>a</em>)
+</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Является {{ cssxref("&lt;angle&gt;") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Декартовы координаты на ℝ<sup>2</sup></th>
+   <th scope="col">Однородные координаты на ℝℙ<sup>2</sup></th>
+   <th scope="col">Декартовы координаты наℝ<sup>3</sup></th>
+   <th scope="col">Однородные координаты наℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Базовый_пример", "auto", 180)}}</p>
+
+<h3 id="Объединение_вращения_с_другим_преобразованием">Объединение вращения с другим преобразованием</h3>
+
+<p>Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotate"&gt;Rotated&lt;/div&gt;
+&lt;div class="rotate-translate"&gt;Rotated + Translated&lt;/div&gt;
+&lt;div class="translate-rotate"&gt;Translated + Rotated&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  width: 100px;
+  height: 100px;
+  background-color: lightgray;
+}
+
+.rotate {
+  background-color: transparent;
+  outline: 2px dashed;
+  transform: rotate(45deg);
+}
+
+.rotate-translate {
+  background-color: pink;
+  transform: rotate(45deg) translateX(180px);
+}
+
+.translate-rotate {
+  background-color: gold;
+  transform: translateX(180px) rotate(45deg);
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.rotate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-function")}}</li>
+ <li>{{cssxref("transform-function/rotate3d", "rotate3d()")}}</li>
+</ul>
diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html
new file mode 100644
index 0000000000..5558f3f69f
--- /dev/null
+++ b/files/ru/web/css/transform-function/rotate3d()/index.html
@@ -0,0 +1,131 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+tags:
+  - CSS
+translation_of: Web/CSS/transform-function/rotate3d()
+---
+<div>{{CSSRef}}</div>
+
+<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращяя его в трехмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("&lt;transform-function&gt;")}}.</div>
+
+<div> </div>
+
+<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div>
+
+
+
+<p>In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} property). If, as specified, the vector is not <em>normalized</em> (i.e., if the sum of the square of its three coordinates is not 1), the {{glossary("user agent")}} will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.</p>
+
+<div class="note"><strong>Note:</strong> Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The amount of rotation created by <code>rotate3d()</code> is specified by three {{cssxref("&lt;number&gt;")}}s and one {{cssxref("&lt;angle&gt;")}}. The <code>&lt;number&gt;</code>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <code>&lt;angle&gt;</code> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p>
+
+<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
+ <dt><code>y</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
+ <dt><code>z</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
+ <dt><code>a</code></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <td rowspan="2">This transformation applies to the 3D space and can't be represented on the plane.</td>
+  </tr>
+  <tr>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+  </tr>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+  </tr>
+  <tr>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Rotating_on_the_y-axis">Rotating on the y-axis</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}</p>
+
+<h3 id="Rotating_on_a_custom_axis">Rotating on a custom axis</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> data type for compatibility info.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/transform-function/scale3d()/index.html b/files/ru/web/css/transform-function/scale3d()/index.html
new file mode 100644
index 0000000000..7caca80cca
--- /dev/null
+++ b/files/ru/web/css/transform-function/scale3d()/index.html
@@ -0,0 +1,99 @@
+---
+title: scale3d()
+slug: Web/CSS/transform-function/scale3d()
+translation_of: Web/CSS/transform-function/scale3d()
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scale3d()</code> CSS функция изменяет размер элемента. Благодяря величине масштабирования определенной вектором, может изменять различные размеры в разных масштабах.</p>
+
+<p>Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.</p>
+
+<p>Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
+</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<dl>
+ <dt><em>sx</em></dt>
+ <dd>Является  {{cssxref("&lt;number&gt;")}} , представляющим абсцисс вектора масштабирования.</dd>
+ <dt><em>sy</em></dt>
+ <dd>Является  {{cssxref("&lt;number&gt;")}} , представляющим ординату вектора масштабирования.</dd>
+ <dt><em>sz</em></dt>
+ <dd>Является  {{cssxref("&lt;number&gt;")}}, представляющим z-компонент масштабирующего вектора.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Это преобразование применяется к пространству 3D и не может быть представлено на плоскости.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Without_changing_the_origin">Without changing the origin</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}</p>
+
+<h3 id="Translating_the_origin_of_the_transformation">Translating the origin of the transformation</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}</p>
diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html
new file mode 100644
index 0000000000..04ff2df26c
--- /dev/null
+++ b/files/ru/web/css/transform-function/skew()/index.html
@@ -0,0 +1,117 @@
+---
+title: skew()
+slug: Web/CSS/transform-function/skew()
+translation_of: Web/CSS/transform-function/skew()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>skew()</code></strong> трансформирует элемент, наклоняя его в 2D-пространстве.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>
+
+
+
+<p>Данная трансформация является линейным преобразованием векторного пространства (трансвекция или <a href="https://en.wikipedia.org/wiki/Shear_mapping">shear mapping</a>), которое деформирует каждую точку элемента на определенный угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>skew()</code> задается одним или двумя значениями которые отображают наклон в каждом из направлений.</p>
+
+<pre class="syntaxbox notranslate">skew(<em>ax</em>)
+
+skew(<em>ax</em>, <em>ay</em>)
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>ax</code></dt>
+ <dd>Указывается значение {{cssxref("&lt;angle&gt;")}}, которое является углом наклона вдоль оси X.</dd>
+ <dt><code>ay</code></dt>
+ <dd>Указывается значение {{cssxref("&lt;angle&gt;")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно <code>0</code>. В этом случае вертикального наклона не будет, а будет только горизонтальный.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Используя_только_наклон_по_оси_x">Используя только наклон по оси x</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Обычный&lt;/div&gt;
+&lt;div class="skewed"&gt;Наклоненный&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}</p>
+
+<h3 id="Используя_два_угла">Используя два угла</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Обычный&lt;/div&gt;
+&lt;div class="skewed"&gt;Наклоненный&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Using_two_angles", 200, 200)}}</p>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> data type for compatibility info.</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/transform-style/index.html b/files/ru/web/css/transform-style/index.html
new file mode 100644
index 0000000000..c8c931cc27
--- /dev/null
+++ b/files/ru/web/css/transform-style/index.html
@@ -0,0 +1,118 @@
+---
+title: transform-style
+slug: Web/CSS/transform-style
+translation_of: Web/CSS/transform-style
+---
+<div>{{CSSRef("CSS Transforms")}}{{SeeCompatTable}}</div>
+
+<p>Свойство <code>transform-style</code> <a href="/en-US/docs/Web/CSS">CSS</a> определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент.</p>
+
+<p>Если flat, то дочерний элемент  не будет существовать в своем собственном 3D-пространстве.</p>
+
+<p>Поскольку это свойство не наследуется, его следует устанавливать для всех не прямых потомков элемента.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Keyword values */
+transform-style: preserve-3d;
+transform-style: flat;
+
+/* Global values */
+transform-style: inherit;
+transform-style: initial;
+transform-style: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>preserve-3d</code></dt>
+ <dd>Показывает, что дочерний элемент должен быть спозиционирован в 3D-пространстве.</dd>
+ <dt><code>flat</code></dt>
+ <dd>Показывает, что дочерний элемент лежит в той же плоскости, что и родительский.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-style', 'transform-style')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>12{{property_prefix('-webkit')}}</td>
+   <td>{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}<br>
+    {{CompatGeckoDesktop("16")}}</td>
+   <td>10<sup>[1]</sup></td>
+   <td>15{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0{{property_prefix('-webkit')}}</td>
+   <td>{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}<br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>8.1</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer currently doesn't support the <code>preserve-3d</code> value.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></li>
+</ul>
diff --git a/files/ru/web/css/transform/index.html b/files/ru/web/css/transform/index.html
new file mode 100644
index 0000000000..d599420c00
--- /dev/null
+++ b/files/ru/web/css/transform/index.html
@@ -0,0 +1,155 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - CSS
+  - transform
+  - Верстка
+  - Свойство CSS
+  - наклон
+  - поворот
+  - трансформация
+translation_of: Web/CSS/transform
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>transform</code></strong> позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS <a href="/en-US/docs/Web/CSS/Visual_formatting_model">визуальной форматируемой модели</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+
+
+
+<p>Если свойство имеет значение, отличное от  <code>none</code>, будет создан <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">контекст наложения</a>. В этом случае, элемент будет действовать как <a href="/en-US/docs/Web/CSS/Containing_block">содержащий блок</a> для любых элементов <code>position: fixed;</code> или <code>position: absolute;</code> которые он содержит.</p>
+
+<div class="warning">
+<p>Только трансформируемый элемент может быть <code>transform</code>. Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">неизменяемые инлайновые блоки</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col">блоки таблица-колонка</a>, и <a href="/en-US/docs/Web/HTML/Element/colgroup">блоки таблица-колонка-группа</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Значения ключевым словом*/
+transform: none;
+
+/* Значения функций */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+/* Мультифункциональные значения */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* Глобальные значения */
+transform: inherit;
+transform: initial;
+transform: unset;
+</pre>
+
+<p>Свойство <code>transform</code> может быть указано как значение ключевого слова <code><a href="#none">none</a></code> или как одно или более значений <code><a href="#&lt;transform-function>">&lt;transform-function&gt;</a></code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
+ <dd>Одна или более применяемых <a href="/en-US/docs/Web/CSS/transform-function">функций CSS-трансформации</a>. Функции трансформации  умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>Указывает, что трансформация не должна применяться.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>Если {{cssxref("transform-function/perspective", "perspective()")}} является одним из мультифункциональных значений, оно должно быть указано первым.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Transformed element&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: solid red;
+  transform: translate(30px, 20px) rotate(20deg);
+  width: 140px;
+  height: 60px;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Примеры", "400", "160")}}</p>
+
+<p>Для того, чтобы посмотреть другие примеры, обратитесь к <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Использование CSS-трансформации</a> и {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p>Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определенных типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.</p>
+
+<p>Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте ее для написания {{cssxref("Media_Queries", "медиа-запроса")}}, который отключит анимацию, если пользователь уменьшил анимацию в системных настройках.</p>
+
+<p>Узнать больше:</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Добавлены 3D-функции трансформации.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.transform")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms">Использование CSS-трансформации</a></li>
+ <li>{{cssxref("&lt;transform-function&gt;")}} типы  данных</li>
+ <li><a href="https://louisremi.github.io/jquery.transform.js/">Плагин jQuery для кросс-браузерной 2D-трансформации</a></li>
+</ul>
diff --git a/files/ru/web/css/transition-duration/index.html b/files/ru/web/css/transition-duration/index.html
new file mode 100644
index 0000000000..f40f16a273
--- /dev/null
+++ b/files/ru/web/css/transition-duration/index.html
@@ -0,0 +1,341 @@
+---
+title: transition-duration
+slug: Web/CSS/transition-duration
+translation_of: Web/CSS/transition-duration
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>transition-duration</code></strong> определяет продолжительность выполнения анимации. Значение по-умолчанию равняется <code>0s</code>, т.е. отстутствие анимации.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</p>
+
+
+
+<p>You may specify multiple durations; each duration will be applied to the corresponding property as specified by the {{ cssxref("transition-property") }} property, which acts as a master list. If there are fewer durations specified than in the master list, the user agent repeat the list of durations. If there are more durations, the list is simply truncated to the right size. In both case the CSS declaration stays valid.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;time&gt; values */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+
+/* Глобальные значения */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Is a {{cssxref("&lt;time&gt;")}} denoting the amount of time the transition from the old value of a property to the new value should take. A time of <code>0s</code> indicates that no transition will happen, that is the switch between the two states will be instantaneous. A negative value for the time renders the declaration invalid.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<div>
+<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;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
+</div>
+
+<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;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+</div>
+
+<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;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+</div>
+
+<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;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+</div>
+</div>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Transitions', '#transition-duration', 'transition-duration') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.transition-duration")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li>{{cssxref('transition')}}</li>
+ <li>{{cssxref('transition-property')}}</li>
+ <li>{{cssxref('transition-timing-function')}}</li>
+ <li>{{cssxref('transition-delay')}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/transition/index.html b/files/ru/web/css/transition/index.html
new file mode 100644
index 0000000000..4fa585f14b
--- /dev/null
+++ b/files/ru/web/css/transition/index.html
@@ -0,0 +1,106 @@
+---
+title: transition
+slug: Web/CSS/transition
+tags:
+  - CSS
+  - CSS переход
+  - Reference
+  - transition
+  - Свойство CSS
+translation_of: Web/CSS/transition
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <strong><code>transition</code></strong> - это {{ cssxref("Shorthand_properties", "сокращенное свойство") }} для {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, и {{ cssxref("transition-delay") }}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p>
+
+<p>Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью {{ cssxref("Псевдо-классы", "псевдоклассов") }}, таких как {{cssxref(":hover")}} или {{cssxref(":active")}} или установлены динамически с помощью JavaScript.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Применить к 1 свойству */
+/* имя свойства | длительность */
+transition: margin-left 4s;
+
+/* имя свойства | длительность | задержка */
+transition: margin-left 4s 1s;
+
+/* имя свойства | длительность | временная функция | задержка */
+transition: margin-left 4s ease-in-out 1s;
+
+/* Применить к 2 свойствам */
+transition: margin-left 4s, color 1s;
+
+/* Применить ко всем измененным свойствам */
+transition: all 0.5s ease-out;
+
+/* Глобальные значения */
+transition: inherit;
+transition: initial;
+transition: unset;
+</pre>
+
+<p>Свойство <code>transition</code> указывается как один или более одно-свойственных переходов (single-property transitions), разделённых запятой.</p>
+
+<p>Каждый одно-свойственный transition описывает переход, который должен быть применён к одному свойству (или специальным значениям <code>all</code> и <code>none</code>). Это включает в себя:</p>
+
+<ul>
+ <li>ноль или одно значение, представляющее свойство, к которому должен быть применён переход. Это может быть одно из:
+  <ul>
+   <li>ключевое слово <code>none</code></li>
+   <li>ключевое слово <code>all</code></li>
+   <li>{{cssxref("&lt;custom-ident&gt;")}} именование свойства CSS.</li>
+  </ul>
+ </li>
+ <li>ноль или одно {{cssxref("&lt;single-transition-timing-function&gt;")}} значение, представляющее временну́ю функцию</li>
+ <li>ноль, одно или два {{cssxref("&lt;time&gt;")}} значения. Первое значение, которое может быть интерпретировано как время, присваивается {{cssxref("transition-duration")}}, а второе значение, которое может быть интерпретировано как время, присваивается {{cssxref("transition-delay")}}.</li>
+</ul>
+
+<p>Посмотрите, <a href="/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Когда_у_списков_значений_свойств_разные_длины" title="ru/CSS/CSS Transitions#Когда у списков значений свойств разные длины">что предпринимается</a> когда у списков значений свойств разные длины. Вкратце, избыточные свойства, не подлежащие анимации, игнорируются.</p>
+
+<h3 id="Формальное_описание_синтаксиса">Формальное описание синтаксиса</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Примеры CSS переходов включены в главную статью о <a href="/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="/ru/CSS/CSS transitions">CSS переходах</a>.</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("css.properties.transition")}}</p>
+
+<p>[2] <a href="http://www.quirksmode.org/css/transitions/properties.html#t031">PPK test</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="ru/CSS/CSS transitions">Использование CSS переходов</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/ru/web/css/type_selectors/index.html b/files/ru/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..dad05d9663
--- /dev/null
+++ b/files/ru/web/css/type_selectors/index.html
@@ -0,0 +1,121 @@
+---
+title: Селектор по типу
+slug: Web/CSS/Type_selectors
+translation_of: Web/CSS/Type_selectors
+---
+<div><span class="s1">{{CSSRef("Selectors")}}</span></div>
+
+<h2 id="Summary" name="Summary">Краткое описание</h2>
+
+<p>CSS селекторы по типу выбирают элементы по имени узла. Используются отдельно, поэтому, селектор типа для конкретного имени тега выбирает все элементы этого типа, то есть с этим именем узла в документе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">element { <em>style properties</em> }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: DodgerBlue;
+  color: #ffffff;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Здесь тег <em>span</em> с каким-то текстом.&lt;/span&gt;
+&lt;p&gt;Здесь тег <em>p</em> с каким-то текстом.&lt;/p&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', 200, 100) }}</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('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#type-selectors', 'type selectors') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#basic-concepts', 'type selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/universal_selectors/index.html b/files/ru/web/css/universal_selectors/index.html
new file mode 100644
index 0000000000..9742586517
--- /dev/null
+++ b/files/ru/web/css/universal_selectors/index.html
@@ -0,0 +1,132 @@
+---
+title: Универсальные селекторы
+slug: Web/CSS/Universal_selectors
+translation_of: Web/CSS/Universal_selectors
+---
+<p><span class="s1">{{CSSRef("Selectors")}}</span></p>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p>Звездочка (*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звездочки с простых селекторов имеет тот же эффект. Например, <em>* .warning</em> и <em>.warning</em> считаются равными.</p>
+
+<p>В CSS 3, звездочка (<code>*</code>) может использоваться в комбинации с пространством имён</p>
+
+<ul>
+ <li><code>ns|*</code> - вхождения всех элементов в пространстве имён ns</li>
+ <li><code>*|*</code> - находит все элементы</li>
+ <li><code>|*</code> - ищет все элементы без объявленного пространства имён</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">*[lang^=en]{color:green;}
+*.warning {color:red;}
+*#maincontent {border: 1px solid blue;}
+</pre>
+
+<pre class="brush: html">&lt;p class="warning"&gt;
+  &lt;span lang="en-us"&gt;Зелёный span&lt;/span&gt; в красном параграфе.
+&lt;/p&gt;
+&lt;p id="maincontent" lang="en-gb"&gt;
+  &lt;span class="warning"&gt;Красный span&lt;/span&gt; в зеленом параграфе.
+&lt;/p&gt;</pre>
+
+<p>{{ EmbedLiveSample('Example', 250, 100) }}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 Selectors', '#the-universal-selector', 'universal selector') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#universal-selector', 'universal selector') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Определено поведение в отношении пространств имен и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементов</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>7</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка пространств имён</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9</td>
+   <td>8</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка пространств имён</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/url()/index.html b/files/ru/web/css/url()/index.html
new file mode 100644
index 0000000000..8db95012a1
--- /dev/null
+++ b/files/ru/web/css/url()/index.html
@@ -0,0 +1,171 @@
+---
+title: url()
+slug: Web/CSS/url()
+translation_of: Web/CSS/url()
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <code><strong>url()</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The <code><strong>url()</strong></code> function can be passed as a parameter of another CSS functions, like the {{cssxref('attr()')}} function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the &lt;url&gt; data type.</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Simple usage */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* associated properties */
+background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* Properties with fallbacks */
+cursor: url(pointer.cur), pointer;
+
+/* Associated short-hand properties */
+background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
+border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
+
+/* As a parameter in another CSS function */
+background-image: cross-fade(20% url(first.png), url(second.png));
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* as part of a non-shorthand multiple value */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* at-rules */
+@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+</pre>
+
+<p>Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).</p>
+
+<p class="task-list-item">The <code><strong>url()</strong></code> function can be included as a value for {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, <a href="/en-US/docs/Web/CSS/@font-face/src">src</a> as part of a <a href="/en-US/docs/Web/CSS/@font-face">@font-face</a> block, and <a href="/en-US/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></p>
+
+<p>In CSS Level 1, the <code>url()</code> functional notation described only true URLs. In CSS Level 2, the definition of <code>url()</code> was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, <code>url()</code> denotes only true <code>&lt;url&gt;</code>s.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>
+ <dl>
+  <dt>&lt;url&gt;</dt>
+  <dd>A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent:
+  <pre class="syntaxbox notranslate">&lt;css_property&gt;: url("https://example.com/image.png")
+&lt;css_property&gt;: url('https://example.com/image.png')
+&lt;css_property&gt;: url(https://example.com/image.png)</pre>
+  </dd>
+  <dt>path</dt>
+  <dd>References the ID of an <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">SVG shape</a> -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, or <code>rect</code> -- using the shape's geometry as the path.</dd>
+ </dl>
+ </dd>
+ <dt><code style="white-space: nowrap;">&lt;url-modifier&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>In the future, the <code>url()</code> function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string.This is not supported and not fully defined in the specification.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">url( <a href="/en-US/docs/Web/CSS/string">&lt;string&gt;</a> &lt;url-modifier&gt;* )</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="content_property">content property</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css highlight[2] notranslate">li::after {
+  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p>
+
+<h3 id="data-uri">data-uri</h3>
+
+<div id="color-value">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="background"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">.background {
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css highlight[6] notranslate">.background {
+  background: yellow;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("data-uri", "100%", 50)}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>No significant change from CSS Level 2 (Revision 1).</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change from CSS Level 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', 'url()')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("css.types.url")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li><font><font>{{cssxref ("набор изображений", "набор изображений ()")}}</font></font></li>
+ <li><font><font>{{cssxref ("плавное затухание")}}</font></font></li>
+</ul>
diff --git a/files/ru/web/css/url/index.html b/files/ru/web/css/url/index.html
new file mode 100644
index 0000000000..da5bae7c33
--- /dev/null
+++ b/files/ru/web/css/url/index.html
@@ -0,0 +1,93 @@
+---
+title: <url>
+slug: Web/CSS/url
+tags:
+  - Адрес
+  - Типы данных
+  - относительный адрес
+translation_of: Web/CSS/url
+---
+<div>{{CssRef}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>&lt;url&gt;</code></strong> обозначает указатели на ресурсы, такие как изображения или шрифты. URL-адреса могут быть использованы в многочисленных свойствах CSS, таких как {{Cssxref("background-image")}}, {{Cssxref("cursor")}} или {{cssxref("list-style")}}.</p>
+
+<div class="note">
+<p><strong>URI или URL?</strong> Существует разница между {{Glossary("URI")}} и {{Glossary("URL")}}. URI просто идентифицирует ресурс. URL является типом URI, и описывает <em>месторасположение</em> ресурса.URI может быть либо URL-адресом, либо именем ресурса ({{Glossary("URN")}}).</p>
+
+<p>В CSS Уровень 1, фунциональная нотация <code>url()</code>описывала только истинные URL-адреса. В CSS Уровень 2, определение <code>url()</code> было расширено для описания любого URI, будь то URL или URN. Неожиданно, что  <code>url()</code> может быть использовано для создания типа данных CSS <code>&lt;uri&gt;</code>. Это изменение было не только неожиданным, но и ненужным, так как URN почти не используется в реальном CSS. Для избежания путанницы, CSS Уровень 3 вернулся к более узкому, первоначальному определению. Сейчас <code>url()</code> означает только истинное значение <code>&lt;url&gt;</code>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;url&gt;</code> является указанием к использованию функциональной нотации <code id="The_url()_functional_notation">url()</code>. Он  может быть задан без кавычек или с использованием одинарных или двойных кавычек. Допускаются относительные URL-адреса, относящиеся к URL-адресу страницы стилей (а не к URL-адресу веб-страницы).</p>
+
+<pre class="syntaxbox">&lt;a_css_property&gt;: url("http://mysite.example.com/mycursor.png")
+&lt;a_css_property&gt;: url('http://mysite.example.com/mycursor.png')
+&lt;a_css_property&gt;: url(http://mysite.example.com/mycursor.png)
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Контрольные символы выше 0x7e не допустимы в URL-адресах без кавычек, начиная с Firefox 15. Смотри {{Bug(752230)}} для более детальной информации.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+</pre>
+
+<pre class="brush: css">ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+</pre>
+
+<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('CSS4 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нет значительных изменений по сравнению с CSS Уровень 2 (Revision 1).</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет значительных изменений по сравнению с CSS Уровень 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<div>{{Compat("css.types.url")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ru/web/css/used_value/index.html b/files/ru/web/css/used_value/index.html
new file mode 100644
index 0000000000..07cc2213ee
--- /dev/null
+++ b/files/ru/web/css/used_value/index.html
@@ -0,0 +1,132 @@
+---
+title: Используемое значение
+slug: Web/CSS/used_value
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/used_value
+---
+<div>{{cssref}}</div>
+
+
+
+<div><strong>Используемое значение </strong>- <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS </a>свойство, которое используется, когда все вычисления уже выполнены, смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value">вычисленное значение</a>.</div>
+
+<article>
+<p>После того как {{glossary("user agent")}} закончил свои расчеты каждое свойство CSS имеет своё значение. Используемые значения  (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов  (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Змечание</strong>:  {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает <a href="/ru/docs/">решённое значение</a>, которое может быть <a href="/ru/docs/">вычесленным значением</a> или <a href="/ru/docs/">используемым значением</a>, в зависимости от свойства.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Данный пример показывает вычисление и отображение значения <code>width</code> трёх элементов (обновление при изменении размера):</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre><code>&lt;div id="no-width"&gt;
+  &lt;p&gt;No explicit width.&lt;/p&gt;
+  &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+  &lt;div id="width-50"&gt;
+    &lt;p&gt;Explicit width: 50%.&lt;/p&gt;
+    &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+    &lt;div id="width-inherit"&gt;
+      &lt;p&gt;Explicit width: inherit.&lt;/p&gt;
+      &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre><code>#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Make results easier to see */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}</code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre><code>function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);</code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', '80%', 372) }}</p>
+
+<h2 id="Difference_from_computed_value">Difference from computed value</h2>
+
+<p>CSS 2.0 defined only <em>computed value</em> as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., <code>display</code>, <code>font-size</code>, or <code>line-height</code>), the computed values and used values are the same. The following are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from <a href="http://www.w3.org/TR/CSS2/changes.html#q36" title="http://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a>):</p>
+
+<ul>
+ <li><code>background-position</code></li>
+ <li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li>
+ <li><code>height</code>, <code>width</code></li>
+ <li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li>
+ <li><code>min-height</code>, <code>min-width</code></li>
+ <li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li>
+ <li><code>text-indent</code></li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<header></header>
+</article>
+
+
+
+<article>
+<header></header>
+</article>
+
+<h2 id="Смотреть_так_же">Смотреть так же:</h2>
+
+<ul>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/user-select/index.html b/files/ru/web/css/user-select/index.html
new file mode 100644
index 0000000000..09d6ac7cb4
--- /dev/null
+++ b/files/ru/web/css/user-select/index.html
@@ -0,0 +1,143 @@
+---
+title: user-select
+slug: Web/CSS/user-select
+tags:
+  - Верстка
+  - Свойство
+translation_of: Web/CSS/user-select
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>user-select</strong></code> определяет может ли пользователь выбрать текст.  Оно не влияет на контент, загруженный как {{Glossary("Chrome", "chrome")}}, за исключением текстовых блоков.</p>
+
+<pre class="brush:css">/* Ключевые слова в значении */
+user-select: none;
+user-select: auto;
+user-select: text;
+user-select: contain;
+user-select: all;
+
+/* Глобальные значения */
+user-select: inherit;
+user-select: initial;
+user-select: unset;
+
+/* Специфичные для Mozilla значения */
+-moz-user-select: none;
+-moz-user-select: text;
+-moz-user-select: all;
+
+/* Специфичные для WebKit значения */
+-webkit-user-select: none;
+-webkit-user-select: text;
+-webkit-user-select: all; /*Не работает Safari; используйте только
+                             "none" или "text", или, в противном случае, оно
+                             будет разрешать ввод в &lt;html&gt; контейнер */
+
+/* Специфичные для Microsoft значения */
+-ms-user-select: none;
+-ms-user-select: text;
+-ms-user-select: element;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект {{domxref("Selection")}} может содержать эти элементы.</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Вычисляемое значение, автоматически определяется следующим образом:</p>
+
+ <ul>
+  <li>Для псевдо-элементов <code>::before</code> и <code>::after</code> вычисляемое значение -  <code>none</code></li>
+  <li>Если элемент  является редактируемым, вычисляемое значение - <code>contain</code></li>
+  <li>Иначе, если вычисляемое значение <code>user-select</code> для родителя этого элемента - <code>all</code>, вычисляемое значение - <code>all</code></li>
+  <li>Иначе, если вычисляемое значение <code>user-select</code> для родителя этого элемента - <code>none</code>, вычисляемое значение - <code>none</code></li>
+  <li>Иначе, вычисляемое значение - <code>text</code></li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>Текст может быть выбран пользователем.</dd>
+ <dt><code>all</code></dt>
+ <dd>В HTML-редакторе, если двойной клик или контекстный клик произошел во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.</dd>
+ <dt><code>element</code>{{non-standard_inline}} (IE-specific alias)</dt>
+ <dd>Аналогичен <code>contain</code>. Поддерживается только в Internet Explorer.</dd>
+</dl>
+
+<div class="note">
+<p id="Formal_syntax"><strong>Примечание:</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">renames user-select: element to contain</a>.</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;You should be able to select this text.&lt;/p&gt;
+&lt;p class="unselectable"&gt;Hey, you can't select this text!&lt;/p&gt;
+&lt;p class="all"&gt;Clicking once will select all of this text.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.all {
+  -moz-user-select: all;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>Первое определение. Также определение <code>-webkit-user-select</code> как устаревшего псевдонима <code>user-select</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.user-select")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("::selection")}}</li>
+ <li>Объект JavaScript {{domxref("Selection")}}.</li>
+ <li><a href="http://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a> in <a href="http://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
+</ul>
diff --git a/files/ru/web/css/using_css_custom_properties/index.html b/files/ru/web/css/using_css_custom_properties/index.html
new file mode 100644
index 0000000000..db7a1674bd
--- /dev/null
+++ b/files/ru/web/css/using_css_custom_properties/index.html
@@ -0,0 +1,281 @@
+---
+title: Использование переменных в CSS
+slug: Web/CSS/Using_CSS_custom_properties
+tags:
+  - CSS
+  - CSS переменные
+  - Web
+  - Руководства
+translation_of: Web/CSS/Using_CSS_custom_properties
+---
+<div>{{SeeCompatTable}}</div>
+
+<div> </div>
+
+<p><strong>CSS переменные</strong> (<strong>пользовательские CSS-свойства</strong>) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. <span id="result_box" lang="ru"><span>Они устанавливаются с использованием custom property нотации </span></span>(<span class="short_text" id="result_box" lang="ru"><span>например.</span></span> <strong><code>--main-color: black;</code></strong>) и доступны через функцию <a href="/en-US/docs/Web/CSS/var">var()</a> (<span class="short_text" id="result_box" lang="ru"><span>например.</span></span> <code>color: <strong>var(--main-color)</strong>;</code>) .</p>
+
+<p>Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись <code>--main-text-color</code> более понятна, чем <code>#00ff00</code>, особенно если этот же цвет используется и в другом контексте.</p>
+
+<p>CSS переменные подчиняются каскаду и наследуют значения от своих родителей.</p>
+
+<h2 id="Основное_использование">Основное использование</h2>
+
+<p>Объявление переменной:</p>
+
+<pre class="brush:css; highlight:[2]  language-css">element {
+  --main-bg-color: brown;
+}
+</pre>
+
+<p>Использование переменной:</p>
+
+<pre class="brush:css; highlight:[2]  language-css">element {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> В более ранней спецификации префикс для переменных был <code>var-</code> , но позже был изменен на <code>--</code>. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})</p>
+</div>
+
+<h2 id="Первый_шаг_с_CSS_Переменными">Первый шаг с CSS Переменными</h2>
+
+<p>Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:</p>
+
+<div id="sample1">
+<pre class="brush:css; highlight:[3,20,26,32]">.one {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.two {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.three {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 75px;
+}
+.four {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 100px;
+}
+
+.five {
+  background-color: brown;
+}
+
+</pre>
+
+<p>Мы применим его к этому HTML:</p>
+
+<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;
+    &lt;input class="three"&gt;
+    &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+
+<p>что приводит нас к этому:</p>
+
+<p>{{EmbedLiveSample("sample1",600,180)}}</p>
+
+<p><br>
+ Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдо-классе :root, автор CSS может избежать ненужных повторений, используя эту переменную.</p>
+</div>
+
+<div id="sample2">
+<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root {
+  --main-bg-color: brown;
+}
+
+.one {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.two {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.three {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 75px;
+}
+.four {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 100px;
+}
+
+.five {
+  background-color: var(--main-bg-color);
+}
+
+</pre>
+
+<div style="display: none;">
+<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;
+    &lt;input class="three"&gt;
+    &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>Это приводит к тому же результату, что и предыдущий пример, но позволяет <span class="short_text" id="result_box" lang="ru"><span class="alt-edited">объявить желаемое свойство только один раз</span></span>.</p>
+
+<h2 id="Наследование_переменных_в_CSS_и_возвращаемые_значения">Наследование переменных в CSS и возвращаемые значения</h2>
+
+<p>Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:</p>
+
+<pre class="brush: html">&lt;div class="one"&gt;
+  &lt;div class="two"&gt;
+    &lt;div class="three"&gt;&lt;/div&gt;
+    &lt;div class="four"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>со следующим CSS:</p>
+
+<pre class="brush: css">.two {
+  --test: 10px;
+}
+
+.three {
+  --test: 2em;
+}
+</pre>
+
+<p>В результате <code>var(--test) будет:</code></p>
+
+<ul>
+ <li>для элемента с классом <code>class="two"</code>: <code>10px</code></li>
+ <li>для элемента с классом <code>class="three"</code>: <code>2em</code></li>
+ <li>для элемента с классом <code>class="four"</code>: <code>10px</code> (унаследовано от родителя)</li>
+ <li>для элемента с классом <code>class="one"</code>: <em>недопустимое значение</em>, что является значением по умолчанию для любого пользовательского свойства.</li>
+</ul>
+
+<p>Используя <a href="/en-US/docs/Web/CSS/var">var()</a> вы можете объявить множество <strong>возвращаемых значений</strong> когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.</p>
+
+<p>Первый аргумент функции это имя <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательского свойства</a>. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательское свойство</a> является не действительным. Например:</p>
+
+<pre><code>.two {
+  color: var(--my-var, red); /* red если --my-var не определена */
+}
+
+.three {
+  background-color: var(--my-var, var(--my-background, pink)); /* pink если --my-var и --my-background не определены */
+}
+
+.three {
+  background-color: var(--my-var, --my-background, pink); /* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена */
+}</code></pre>
+
+<div class="note">
+<p>В замещаемых значениях можно использовать запятые по аналогии с <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательскими свойствами</a>. Например, var(--foo, red, blue) опеределит red, blue как замещающее значение (от первой запятой и до конца определения функции)</p>
+</div>
+
+<div class="note">
+<p>Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.</p>
+</div>
+
+<h2 id="Обоснованность_и_полезность">Обоснованность и полезность</h2>
+
+<p>Понятие классической концепции CSS, связанность с каждым свойством, не очень удобно в плане пользовательских свойств. Когда значения пользовательских свойств обрабатываются, браузер не знает где они будут применяться, поэтому нужно учитывать почти все допустимые значения.</p>
+
+<p>К сожалению, эти значения могут использоваться через функциональную запись <code>var()</code> , в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к невалидным выражениям CSS, что приводит к новой концепции <em>валидности во время исполнения.</em></p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    33.0<br>
+    {{CompatNo}} 34.0<sup>[2]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}}<sup>[3]</sup><br>
+    {{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36.0)}}</td>
+   <td>9.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9.1</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome initially implemented this feature using a different syntax, which required to prefix custom property names with <code>-webkit-var-</code> to define them. They could then be used unprefixed within a <code>-webkit-var()</code> function. Additionally, the implementation was hidden behind the <em>Enable experimental WebKit features</em> flag under <code>chrome://flags</code>, later renamed to <em>Enable experimental Web Platform features</em>.</p>
+
+<p>[2] В Chrome 34.0 убрали эту функцию из-за проблем с производительностью.</p>
+
+<p>[3] This feature is implemented behind the preference <code>layout.css.variables.enabled</code>, defaulting to <code>false</code> and using the old <code>var-<var>variablename</var></code> syntax in Gecko 29. Starting from Gecko 31 the preference is enabled by default and the new <code>--<var>variablename</var></code> syntax is used.</p>
diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html
new file mode 100644
index 0000000000..c7e311b39a
--- /dev/null
+++ b/files/ru/web/css/vertical-align/index.html
@@ -0,0 +1,243 @@
+---
+title: vertical-align
+slug: Web/CSS/vertical-align
+translation_of: Web/CSS/vertical-align
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>  <code>vertical-align</code> описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).</p>
+
+<pre class="brush: css no-line-numbers">/* ключевые значения */
+vertical-align: baseline;
+vertical-align: sub;
+vertical-align: super;
+vertical-align: text-top;
+vertical-align: text-bottom;
+vertical-align: middle;
+vertical-align: top;
+vertical-align: bottom;
+
+/* значения длины (&lt;length&gt;) */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* процентные значения (&lt;percentage&gt;) */
+vertical-align: 20%;
+
+/* глобальные значения */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+</pre>
+
+<p>Свойство <code> vertical-align</code> может использоваться в двух контекстах:</p>
+
+<ul>
+ <li>Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать {{HTMLElement("img")}} в строке текста:</li>
+</ul>
+
+<div id="vertical-align-inline">
+<pre class="hidden brush: html">&lt;p&gt;
+top:&lt;img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+middle:&lt;img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+bottom:&lt;img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+super:&lt;img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+sub:&lt;img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+&lt;p&gt;
+text-top:&lt;img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+text-bottom:&lt;img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+0.2em:&lt;img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-1em:&lt;img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+20%:&lt;img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-100%:&lt;img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+
+</pre>
+
+<pre class="hidden brush: css">#* {
+  box-sizing: border-box;
+}
+
+img {
+  margin-right: 0.5em;
+}
+
+p {
+  height: 3em;
+  padding: 0 .5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+
+<ul>
+ <li>Для вертикального позиционирования содержимого ячейки таблицы:</li>
+</ul>
+
+<div id="vertical-align-table">
+<pre class="hidden brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td style="vertical-align: baseline"&gt;baseline&lt;/td&gt;
+    &lt;td style="vertical-align: top"&gt;top&lt;/td&gt;
+    &lt;td style="vertical-align: middle"&gt;middle&lt;/td&gt;
+    &lt;td style="vertical-align: bottom"&gt;bottom&lt;/td&gt;
+    &lt;td&gt;
+      &lt;p&gt;Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо нее появится нечто еще более причудливое и необъяснимое.&lt;/p&gt;
+&lt;p&gt;Существует и другая теория, согласно которой это уже случилось.&lt;/p&gt;</pre>
+
+<pre class="hidden brush: css">table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table, th, td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования <a href="/ru/docs/Web/HTML/Block-level_elements">блочных элементов</a>.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>vertical-align</code> задается одним из ключевых значений, указанных ниже.</p>
+
+<h3 id="Значения_для_строчных_элементов">Значения для строчных элементов</h3>
+
+<h4 id="Значения_относительно_родительского_элемента">Значения относительно родительского элемента</h4>
+
+<p>Данные значения позиционируют элемент по вертикали относительно родительского элемента:</p>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dd>Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых <a href="/ru/docs/CSS/Replaced_element">замещаемых элементов</a>, таких как {{HTMLElement("textarea")}}, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.</dd>
+ <dt><code>sub</code></dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Выравнивает</span> <span class="hps">базовую линию</span> <span class="hps">элемента с</span> <span class="alt-edited hps">базовой линией подстрочного индекса </span><span class="alt-edited hps">своего</span> <span class="hps">родителя.</span></span></dd>
+ <dt><code>super</code></dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Выравнивает</span> <span class="hps">базовую линию</span> <span class="hps">элемента с</span> базовой линией <span class="alt-edited hps">надстрочного индекса </span><span class="alt-edited hps">своего</span> <span class="hps">родителя</span></span>.</dd>
+ <dt><code>text-top</code></dt>
+ <dd>Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.</dd>
+ <dt><code>text-bottom</code></dt>
+ <dd>Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства {{Cssxref("line-height")}}) над базовой линией родительского элемента. Допустимы отрицательные значения.</dd>
+</dl>
+
+<h4 id="Значения_относительно_строки">Значения относительно строки</h4>
+
+<p>Следующие значения позиционируют элемент по вертикали относительно всей строки:</p>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>Выравнивает верхний край элемента и его потомков с верхним краем всей строки.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Выравнивает нижний край элемента и его потомков с нижним краем всей строки.</dd>
+</dl>
+
+<p>Для элементов, у которых нет базовой линии, вместо нее используется нижняя граница внешнего отступа (margin).</p>
+
+<h3 id="Значения_для_ячеек_таблицы">Значения для ячеек таблицы</h3>
+
+<dl>
+ <dt><code>baseline</code> (и <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code>, и <code>&lt;percentage&gt;</code>)</dt>
+ <dd>Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.</dd>
+ <dt><code>top</code></dt>
+ <dd>Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.</dd>
+</dl>
+
+<p>Допустимы отрицательные значения.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Изображение &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по умолчанию.&lt;/div&gt;
+&lt;div&gt;Изображение &lt;img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по верхнему краю.&lt;/div&gt;
+&lt;div&gt;Изображение &lt;img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по нижнему краю.&lt;/div&gt;
+&lt;div&gt;Изображение &lt;img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по центру.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример")}}</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>vertical-align</code> как анимируемый.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Добавляет значение {{cssxref("&lt;length&gt;")}} и позволяет применять его к элементам с типом <code>table-cell</code> – {{cssxref("display")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.vertical-align")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}</li>
+ <li><a href="http://phrogz.net/css/vertical-align/index.html" title="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></li>
+ <li><a href="http://christopheraue.net/2014/03/05/vertical-align/" title="http://christopheraue.net/2014/03/05/vertical-align/">All You Need To Know About Vertical-Align</a></li>
+</ul>
diff --git a/files/ru/web/css/visibility/index.html b/files/ru/web/css/visibility/index.html
new file mode 100644
index 0000000000..933c5ddbdf
--- /dev/null
+++ b/files/ru/web/css/visibility/index.html
@@ -0,0 +1,172 @@
+---
+title: visibility
+slug: Web/CSS/visibility
+tags:
+  - CSS
+  - Web
+  - Расположение CSS
+  - Свойства CSS
+  - Шаблон
+translation_of: Web/CSS/visibility
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>visibility</code></strong> скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы {{HTMLElement("table")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
+
+
+
+<p>Чтобы скрыть и удалить элемент из разметки, установите свойству {{cssxref("display")}} значение <code>none</code>, вместо использования <code>visibility</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Значения */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* Глобальные значения */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+</pre>
+
+<p>Свойство <code>visibility</code> указывается в качестве одного из значений ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<ul>
+ <li>Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью <code>{{Cssxref("display")}}: none</code> примененного к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.</li>
+ <li>Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.</li>
+ <li>Для других элементов <code>collapse</code> обрабатывается также, как <code>hidden</code></li>
+</ul>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Значение по умолчанию, элемент виден.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства <code>visibility:visible</code>. Элемент не может получить focus (например, при навигации с помощью <a href="/ru/docs/Web/HTML/Global_attributes/tabindex">tabindex</a>).</dd>
+ <dt><code>collapse</code></dt>
+</dl>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>Значения видимости изменяются между <em>видим</em> и <em>не видим</em>. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений <code>visible</code>, интерполируется как дискретный шаг, где значения временной функции от <code>0</code> до <code>1</code> для <code>visible</code> и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции <code>cubic-bezier()</code> cо значениями вне [0, 1]) ближе к конечной точке.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<h4 id="HTML">HTML </h4>
+
+<pre class="brush: html">&lt;p class="visible"&gt;Первый параграф виден.&lt;/p&gt;
+&lt;p class="not-visible"&gt;Второй параграф не виден.&lt;/p&gt;
+&lt;p class="visible"&gt;Третий параграф также виден. Заметь, второй параграф занимает место.&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.visible {
+  visibility: visible;
+}
+
+.not-visible {
+  visibility: hidden;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Базовый_пример')}}</p>
+
+<h3 id="Пример_с_таблицой">Пример с таблицой</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre><code>&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;1.1&lt;/td&gt;
+    &lt;td class="collapse"&gt;1.2&lt;/td&gt;
+    &lt;td&gt;1.3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr class="collapse"&gt;
+    &lt;td&gt;2.1&lt;/td&gt;
+    &lt;td&gt;2.2&lt;/td&gt;
+    &lt;td&gt;2.3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;3.1&lt;/td&gt;
+    &lt;td&gt;3.2&lt;/td&gt;
+    &lt;td&gt;3.3&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre><code>.collapse {
+  visibility: collapse;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid gray;
+}</code></pre>
+
+<p>{{EmbedLiveSample('Пример_с_таблицой')}}</p>
+
+<h2 id="Соображения_доступности">Соображения доступности</h2>
+
+<p>Использование <code>visibility</code> со значением <code>hidden</code> на элементе удалит его из <a href="/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C/What_is_accessibility#%D0%A1%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_API_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B0">дерева доступности</a>. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<ul>
+ <li>Поддержка <code>visibility:collapse</code> отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать <code>visibility:hidden</code> со столбцами и строками.</li>
+ <li><code>visibility:collapse</code> может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока <code>visibility:visible</code> не указан явно для вложенной таблицы.</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Определяет значение <code>collapse</code> применимым к flex элементам</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-visibility-property', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>visibility</code> как анимирумое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.visibility")}}</p>
diff --git a/files/ru/web/css/white-space/index.html b/files/ru/web/css/white-space/index.html
new file mode 100644
index 0000000000..772e924843
--- /dev/null
+++ b/files/ru/web/css/white-space/index.html
@@ -0,0 +1,168 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<div>Свойство <code><strong>white-space</strong></code> управляет тем, как обрабатываются {{Glossary("whitespace", "пробельные символы")}} внутри элемента.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
+
+<div class="hidden">Исходный код примеров хранится на GitHub. Если вы хотите улучшить примеры, скопируйте  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на изменение.</div>
+
+<div class="note">
+<p><strong>Примечание:</strong> Для управления переносами <em>внутри слов</em> используйте {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}} или {{CSSxRef("hyphens")}}.</p>
+</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Ключевые значения */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+white-space: break-spaces;
+
+/* Глобальные значения */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>white-space</code> определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы. </dd>
+ <dt><code>nowrap</code></dt>
+ <dd>Объединяет последовательности пробелов в один пробел, как значение <code>normal</code>, но не переносит строки (оборачивание текста) внутри текста.</dd>
+ <dt><code>pre</code></dt>
+ <dd>Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы {{HTMLElement("br")}}.</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы {{HTMLElement("br")}}, и при необходимости для заполнения строчных боксов.</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам {{HTMLElement("br")}}, и при необходимости для заполнения строчных боксов..</dd>
+ <dt><code>break-spaces</code></dt>
+ <dd>Поведение идентично <code>pre-wrap</code> со следующими отличиями:
+ <ul>
+  <li>Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.</li>
+  <li>Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.</li>
+  <li>Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>В приведенной ниже таблице указано поведение различных значений свойства <code>white-space</code>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th></th>
+   <th>Новые строки</th>
+   <th>Пробелы и табуляция</th>
+   <th>Перенос текста по словам</th>
+   <th>Пробелы в конце строки</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Объединяются в одну</td>
+   <td>Объединяются в один пробел</td>
+   <td>Переносится</td>
+   <td>Удаляются</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Объединяются в одну</td>
+   <td>Объединяются в один пробел</td>
+   <td>Не переносится</td>
+   <td>Удаляются</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Сохраняются как в источнике</td>
+   <td>Сохраняются как в источнике</td>
+   <td>Не переносится</td>
+   <td>Сохраняются как в источнике</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Сохраняются как в источнике</td>
+   <td>Сохраняются как в источнике</td>
+   <td>Переносится</td>
+   <td>Висят</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Сохраняются как в источнике</td>
+   <td>Объединяются в один пробел</td>
+   <td>Переносится</td>
+   <td>Удаляются</td>
+  </tr>
+  <tr>
+   <th><code>break-spaces</code></th>
+   <td>Сохраняются как в источнике</td>
+   <td>Сохраняются как в источнике</td>
+   <td>Переносится</td>
+   <td>Переносятся</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Основной_пример">Основной пример</h3>
+
+<pre class="brush: css notranslate">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="Перенос_строк_внутри_элементов_HTMLElementpre">Перенос строк внутри элементов {{HTMLElement("pre")}} </h3>
+
+<pre class="brush: css notranslate">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* текущие браузеры */
+}</pre>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Уточняется алгоритм переноса строк.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("css.properties.white-space")}}</p>
diff --git a/files/ru/web/css/widows/index.html b/files/ru/web/css/widows/index.html
new file mode 100644
index 0000000000..62f2492e7f
--- /dev/null
+++ b/files/ru/web/css/widows/index.html
@@ -0,0 +1,123 @@
+---
+title: widows
+slug: Web/CSS/widows
+translation_of: Web/CSS/widows
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <code>widows</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> определяет какое минимальное количество линий должно быть оставлено в начале новой страницы на <code>paged</code> носителе. В типографике, «висячая» строка<strong> (</strong><em>widow)</em> это последняя строка параграфа, оказавшаяся в начале следующей страницы. Установка свойства <code>widows</code> позволяет предотвратить висячие строки.</p>
+
+<p>На нестраничных носителях, таких как <code>screen</code>, CSS свойство <code>widows</code> не имеет эффекта.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("widows")}}
+</pre>
+
+<pre>widows: 2
+widows: 3
+
+widows: inherit
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Обозначает минимальное количество строк, которые могут остаться одни вверху новой страницы. Если значение не <strong>положительное</strong>, такое объявление недействительно.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:css">p {
+  widows: 3;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Extends <code>widows</code> to apply to any type of fragment, like pages, regions or columns.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Recommend to consider <code>widows</code> in relation with columns</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Исходная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера"><nobr></nobr>Совместимость браузера</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>9.2</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("Paged Media")}}</li>
+</ul>
diff --git a/files/ru/web/css/width/index.html b/files/ru/web/css/width/index.html
new file mode 100644
index 0000000000..15dd65de37
--- /dev/null
+++ b/files/ru/web/css/width/index.html
@@ -0,0 +1,207 @@
+---
+title: width
+slug: Web/CSS/width
+translation_of: Web/CSS/width
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство CSS <strong><code>width</code></strong> устанавливает ширину элемента. По умолчанию она равняется ширине <a href="/ru/docs/Web/CSS/box_model#content">внутренней области</a>, но если {{cssxref("box-sizing")}} имеет значение <code>border-box</code>, то она будет равняться ширине <a href="/ru/docs/Web/CSS/box_model#border">области рамки</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Свойства {{cssxref("min-width")}} и {{cssxref("max-width")}} перекрывают {{cssxref("width")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значения */
+width: 300px;
+width: 25em;
+
+/* &lt;percentage&gt; значения */
+width: 75%;
+
+/* Значения-ключевые слова */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Глобальные значения */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<p>Свойство <code>width</code> указывается как:</p>
+
+<ul>
+ <li>одно из следующих ключевых слов: <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
+ <li><code><a href="#&lt;length>">&lt;length&gt;</a></code> или <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>. За ними так же могут быть указаны одни из следующих ключевых слов: <code><a href="#border-box">border-box</a></code>, <code><a href="#content-box">content-box</a></code>.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
+ <dd>Ширина - фиксированная величина.</dd>
+ <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
+ <dd>Ширина в процентах - размер относительно ширины родительского блока.</dd>
+ <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt>
+ <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} применяются к области рамки элемента.</dd>
+ <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt>
+ <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} применяются к внутренней области элемента.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>Браузер рассчитает и выберет ширину для указанного элемента.</dd>
+ <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt>
+ <dd>Использует <code>fill-available</code> размер строки или <code>fill-available</code> размер блока, в зависимости от способа разметки.</dd>
+ <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt>
+ <dd>Внутренняя максимальная предпочтительная ширина.</dd>
+ <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt>
+ <dd>Внутренняя минимальная ширина.</dd>
+ <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt>
+ <dd>Ширина содержащего блока минус горизонтальные <code>margin</code>, <code><font face="consolas, Liberation Mono, courier, monospace">border</font></code> и <code>padding</code>.</dd>
+ <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt>
+ <dd>Наибольшее из:
+ <ul>
+  <li>внутренняя минимальная ширина</li>
+  <li>меньшая из внутренней предпочтительной ширины и доступной ширины</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ширина_по_умолчанию">Ширина по умолчанию</h3>
+
+<pre class="brush:css">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html">&lt;p class="goldie"&gt;Сообщество Mozilla производит множество отличного ПО.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
+
+<h3 id="Пиксели_и_em">Пиксели и em</h3>
+
+<pre class="brush: css">.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="px_length"&gt;Ширина в пикселях&lt;/div&gt;
+&lt;div class="em_length"&gt;Ширина в em&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
+
+<h3 id="Проценты">Проценты</h3>
+
+<pre class="brush: css">.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html">&lt;div class="percent"&gt;Ширина в процентах&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
+
+<h3 id="max-content_2">max-content</h3>
+
+<pre class="brush:css;">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit используют нестандартное имя */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="maxgreen"&gt;Сообщество Mozilla производит множество отличного ПО.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p>
+
+<h3 id="min-content_2">min-content</h3>
+
+<pre class="brush:css">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="minblue"&gt;Сообщество Mozilla производит множество отличного ПО.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь, что элементы с <code>width</code> не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>width</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Уточняет к какому элементу относится</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.width")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/box_model">Блочная модель</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
+</ul>
diff --git a/files/ru/web/css/will-change/index.html b/files/ru/web/css/will-change/index.html
new file mode 100644
index 0000000000..a6b0030a21
--- /dev/null
+++ b/files/ru/web/css/will-change/index.html
@@ -0,0 +1,166 @@
+---
+title: will-change
+slug: Web/CSS/will-change
+translation_of: Web/CSS/will-change
+---
+<p>{{ CSSRef() }}{{SeeCompatTable}}</p>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code style="font-style: normal;">will-change</code> предоставляет автору возможность уведомить браузер об ожидаемом изменении элемента<span class="seoSummary">, таким образом браузер может настроить соответсвующую оптимизацию до того как элемент действительно изменится. Такой тип оптимизации может повысить отзывчивость страницы, совершая, возможно дорогие операции до того как они действительно понадобятся. </span></p>
+
+<pre><code>/* Keyword values */
+will-change: auto;
+will-change: scroll-position;
+will-change: contents;
+will-change: transform;        /* Example of &lt;custom-ident&gt; */
+will-change: opacity;          /* Example of &lt;custom-ident&gt; */
+will-change: left, top;        /* Example of two &lt;animateable-feature&gt; */
+
+/* Global values */
+will-change: inherit;
+will-change: initial;
+will-change: unset;</code></pre>
+
+
+
+<p>Правильно использование этого свойства может быть немного сложнее:</p>
+
+<ul>
+ <li>
+  <p id="Don't_apply_will-change_to_too_many_elements"><em>Не применяйте will-change к большому числу элементов.</em> Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжелые оптимизации ссылающиеся на <code>will-change</code> используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.</p>
+ </li>
+ <li>
+  <p><em>Используйте умеренно.</em> Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление <code>will-change</code> прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключать <code>will-change</code> используя скрипт до и после того как произошли изменения.</p>
+ </li>
+ <li>
+  <p><em>Не применяйте will-change к элементам для выполнения преждевременной оптимизации</em>. Если ваша страница хорошо отрабатывается, не применяйте <code>will-change</code> свойство к элементу только чтобы выжать немного больше скорости. <code>will-change</code> предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Черезмерное использование <code>will-change</code> приведет к излишнему потреблению памяти и вызовет более тяжелый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведет к ухудшению производительности.</p>
+ </li>
+ <li>
+  <p id="Give_it_sufficient_time_to_work"><em>Дайте ему достаточно времени, чтобы работать</em>. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.</p>
+ </li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Это ключевое слово не выражает конкретной цели; пользовательский агент должен применяться независимо эвристики и оптимизации как он это обычно делает.</dd>
+</dl>
+
+<p>&lt;Animateable-feature&gt; может иметь одно из следующих значений:</p>
+
+<dl>
+ <dt><code>scroll-position</code></dt>
+ <dd>Указывает, что автор ожидает анимацию или изменение положения скролла элемента в ближайшем будущем.</dd>
+ <dt><code>contents</code></dt>
+ <dd>Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.</dd>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Указывает, что автор ожидает анимацию или измение свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись,  тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, или <code>contents</code>. </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">.sidebar {
+  will-change: transform;
+}
+</pre>
+
+<p>В примере выше прямо в таблицу стилей добавляется свойство <code>will-change</code>, которое заставит браузер держать оптимизацию в памяти намного дольше, чем нужно, а мы уже видели почему следует этого избегать. Ниже приведён ещё один пример, показывающий, как применить свойство <code>will-change</code> с помощью скриптов, что вероятно, вам следует делать в большинстве случаев.</p>
+
+<pre class="brush: js">var el = document.getElementById('element');
+
+// Set will-change when the element is hovered
+el.addEventListener('mouseenter', hintBrowser);
+el.addEventListener('animationEnd', removeHint);
+
+function hintBrowser() {
+  // The optimizable properties that are going to change
+  // in the animation's keyframes block
+  this.style.willChange = 'transform, opacity';
+}
+
+function removeHint() {
+  this.style.willChange = 'auto';
+}</pre>
+
+<p>Однако может быть целесообразно включить will-change в вашу таблицу стилей для приложения, в котором страница переворачивается при нажатии клавиши, например альбом или перезентация, где страницы большие и сложные. Это позволит браузеру заранее подготовить переход и позволит быстро переключаться между страницами, как только будет нажата клавиша.</p>
+
+<pre class="brush: css">.slide {
+  will-change: transform;
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS Will Change', '#will-change', 'will-change') }}</td>
+   <td>{{ Spec2('CSS Will Change') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("css.properties.will-change")}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(36)}}</td>
+   <td>{{CompatGeckoDesktop(36)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(24)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile(36)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В Firefox с 31 до 35 версии свойство <code>will-change</code> было доступно, но только, если пользователь установил значение флага <code style="font-style: normal; line-height: 1.5;">layout.css.will-change.enabled</code> в <code>true</code>. Выбор был удалён в Firefox 43.</p>
+
+<p>Firefox позволяет установить <code>will-change: will-change</code> до версии 42.0, что не соответствует спецификации. Это было исправлено в Firefox 43.0. Смотрите {{bug("1195884")}}.</p>
diff --git a/files/ru/web/css/word-break/index.html b/files/ru/web/css/word-break/index.html
new file mode 100644
index 0000000000..9ce8625ed0
--- /dev/null
+++ b/files/ru/web/css/word-break/index.html
@@ -0,0 +1,136 @@
+---
+title: word-break
+slug: Web/CSS/word-break
+tags:
+  - CSS
+translation_of: Web/CSS/word-break
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/ru/docs/Web/CSS">CSS</a> <strong> <code>word-break</code></strong> определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
+
+<p class="hidden">Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете помочь в улучшении примеров, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-реквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевых слов */
+word-break: normal;
+word-break: break-all;
+word-break: keep-all;
+word-break: break-word; /* не включено в стандарт */
+
+/* Глобальные значения */
+word-break: inherit;
+word-break: initial;
+word-break: unset;
+</pre>
+
+<p>Свойство <code>word-break</code> определяется одним из описанных ниже ключевых слов.</p>
+
+<h3 class="brush:css" id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Поведение по умолчанию для расстановки перевода строк.</dd>
+ <dt><code>break-all</code></dt>
+ <dd>При превышении границ блока, перевод строки будет вставлен между любыми двумя символами (за исключением текста на китайском/японском/корейском языке).</dd>
+ <dt><code>keep-all</code></dt>
+ <dd>Перевод строки не будет испольован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию (<code>normal</code>).</dd>
+ <dt><code>break-word</code> {{Non-standard_Inline}}</dt>
+ <dd>При превышении границ блока, обычно остающиеся целыми слова, могут быть разбиты в произвольном месте, если не будет найдено более подходящее для переноса строки место.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Заметка:</strong> В отличие от <code>word-break: break-word</code> и <code>overflow-wrap: break-word</code> (смотри {{cssxref("overflow-wrap")}}), <code>word-break: break-all</code> вставит перевод строки в том месте, где текст будет превышать занимаемый им блок (даже в том случае, когда текст можно перенести по словам).</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;1. &lt;code&gt;word-break: normal&lt;/code&gt;&lt;/p&gt;
+&lt;p class="normal narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;2. &lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="breakAll narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;3. &lt;code&gt;word-break: keep-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="keepAll narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;4. &lt;code&gt;word-break: break-word&lt;/code&gt;&lt;/p&gt;
+&lt;p class="breakWord narrow"&gt;This is a long and
+  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.narrow {
+  padding: 5px;
+  border: 1px solid;
+  display: table;
+  max-width: 100%;
+}
+
+.normal {
+  word-break: normal;
+}
+
+.breakAll {
+  word-break: break-all;
+}
+
+.keepAll {
+  word-break: keep-all;
+}
+
+.breakWord {
+  word-break: break-word;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Примеры', '100%', 600)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости была сформирована из структурированных данных. Если вы хотите уточнить информацию, пожалуйста, склонируйте репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-реквест.</div>
+
+<p>{{Compat("css.properties.word-break")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("overflow-wrap")}}</li>
+</ul>
diff --git a/files/ru/web/css/word-spacing/index.html b/files/ru/web/css/word-spacing/index.html
new file mode 100644
index 0000000000..b2afe4205f
--- /dev/null
+++ b/files/ru/web/css/word-spacing/index.html
@@ -0,0 +1,121 @@
+---
+title: word-spacing
+slug: Web/CSS/word-spacing
+tags:
+  - Текст
+  - форматирование
+translation_of: Web/CSS/word-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>word-spacing</code></strong> устанавливает длину пробела между словами и между тегами.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значение ключевым словом */
+word-spacing: normal;
+
+/* &lt;length&gt; значения */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* &lt;percentage&gt; значения  */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* Глобальные значения */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Нормальный интервал между словами, определенный текущим шрифтом и/или браузером.</dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>Определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.</dd>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>Определяет дополнительный интервал как процент от предварительной ширины символа.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="mozdiv1"&gt;Here are many words...&lt;/div&gt;
+&lt;div id="mozdiv2"&gt;...and many more!&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#mozdiv1 {
+  word-spacing: 15px;
+}
+
+#mozdiv2 {
+  word-spacing: 5em;
+} </pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Большое положительное или отрицательное значение <code>word-spacing</code> может сделать предложения, к которым применяется стиль, нечитаемыми.  Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы.</p>
+
+<p>Разборчивый <code>word-spacing</code> должен быть определен в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</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('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Заменяет предыдущее значение значением <code>&lt;spacing-limit&gt;</code>, которое определяет те же вещи, плюс значение <code>&lt;percentage&gt;</code>. Позволяет использовать до трех значений, описывающих оптимальное, минимальное и максимальное значение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>word-spacing</code> как анимированный.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.word-spacing")}}</p>
diff --git a/files/ru/web/css/writing-mode/index.html b/files/ru/web/css/writing-mode/index.html
new file mode 100644
index 0000000000..1b828cbce4
--- /dev/null
+++ b/files/ru/web/css/writing-mode/index.html
@@ -0,0 +1,166 @@
+---
+title: writing-mode
+slug: Web/CSS/writing-mode
+translation_of: Web/CSS/writing-mode
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Свойство <strong><code>writing-mode</code></strong> устанавливает горизонтальное или вертикальное положение текста также как и направление блока.</p>
+
+<p>Свойство определяет направление потока блока, в каком направлении складываются контейнеры уровня блока и направление в котором инлайновый контент находится в родительском блоке. Также свойство <code>writing-mode</code> определяет порядок контента блочного уровня.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Keyword values */
+writing-mode: horizontal-tb;
+writing-mode: horizontal-bt;
+writing-mode: vertical-rl;
+writing-mode: vertical-lr;
+
+/* Global values */
+writing-mode: inherit;
+writing-mode: initial;
+writing-mode: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>horizontal-tb</code></dt>
+ <dd>Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line.</dd>
+ <dt><code>horizontal-bt</code></dt>
+ <dd>Content flows horizontally from left to right, vertically from bottom to top. The next horizontal line is positioned above the previous line.</dd>
+ <dt><code>vertical-rl</code></dt>
+ <dd>Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.</dd>
+ <dt><code>vertical-lr</code></dt>
+ <dd>Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.</dd>
+ <dt><code>lr</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code>.</dd>
+ <dt><code>lr-tb</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code>.</dd>
+ <dt><code>rl</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code>.</dd>
+ <dt><code>tb</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>vertical-rl</code>.</dd>
+ <dt><code>tb-rl</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>vertical-rl</code>.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">.exampleText {
+  writing-mode: vertical-rl;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 100, 160)}}</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop(41)}}<sup>[1]</sup></td>
+   <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
+   <td>8.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>SVG 1.1 values <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>SVG 1.1 values <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] An experimental implementation was available since Gecko 36. It is governed by the preference <code>layout.css.vertical-text.enabled</code>, defaulting to <code>false</code> until Firefox 38. From Firefox 39 and Firefox 40, the preference was <code>true</code> for Nightly and DevTools editions only. Note that not all CSS widgets (e.g. tables) obey to it, yet.</p>
+
+<p>[2] The implementation in Internet Explorer differs from the specification. See the <a href="https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx">related article in the Internet Explorer Dev Center</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>SVG <code><a href="/en-US/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> attribute</li>
+ <li>{{Cssxref("direction")}}</li>
+ <li>{{Cssxref("unicode-bidi")}}</li>
+</ul>
diff --git a/files/ru/web/css/z-index/index.html b/files/ru/web/css/z-index/index.html
new file mode 100644
index 0000000000..8a40d759fa
--- /dev/null
+++ b/files/ru/web/css/z-index/index.html
@@ -0,0 +1,192 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+tags:
+  - CSS
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Введение">Введение</h2>
+
+<p>Свойство <strong>z-index</strong> определяет положение элемента и нижестоящих элементов по оси z. В случае перекрытия элементов, это значение определяет порядок наложения. В общем случае, элементы с большим z-index перекрывают элементы с меньшим.</p>
+
+<p>Для позиционируемого контейнера свойство <code>z-index</code> определяет:</p>
+
+<ol>
+ <li>порядок наложения в текущем <a href="/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">контексте наложения</a>;</li>
+ <li>создаёт ли контейнер локальный контекст наложения.</li>
+</ol>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css notranslate">/* Значение - ключевое слово */
+z-index: auto;
+
+/* &lt;целочисленные&gt; значения */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Отрицательные значения понижают приоритет */
+
+/* Глобальные значения */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Контейнер не будет создавать локального контекста наложения. Уровень контейнера в текущем контексте наложения такой же, как и у родительского.</dd>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Целое число определяет уровень контейнера в текущем контексте наложения. Контейнер также будет создавать локальный контекст наложения, в котором его собственный уровень будет равен <code>0</code>. Это значит, что значения z-index нижестоящих элементов не будут сравниваться с z-индексами элементов вне этого контейнера.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="dashed-box"&gt;Dashed box
+  &lt;span class="gold-box"&gt;Gold box&lt;/span&gt;
+  &lt;span class="green-box"&gt;Green box&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3,11,19] notranslate">.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+</pre>
+
+<h3 id="Результат"><strong>Результат</strong></h3>
+
+<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p>
+
+<h2 id="Спецфикации">Спецфикации</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('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет свойство <code>z-index</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2)</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойство CSS {{Cssxref("position")}}</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index" title="CSS/Understanding_z-index">Понимание z-индексов CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/действительное_значение/index.html b/files/ru/web/css/действительное_значение/index.html
new file mode 100644
index 0000000000..da6231da1f
--- /dev/null
+++ b/files/ru/web/css/действительное_значение/index.html
@@ -0,0 +1,40 @@
+---
+title: Действительное значение
+slug: Web/CSS/Действительное_значение
+tags:
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/actual_value
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><strong>Действительное значение</strong> CSS свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет прининудительно округлять ширину.</p>
+
+<h2 id="Спецификации">Спецификации</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('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Руководство по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/замещаемый_элемент/index.html b/files/ru/web/css/замещаемый_элемент/index.html
new file mode 100644
index 0000000000..a252cbad33
--- /dev/null
+++ b/files/ru/web/css/замещаемый_элемент/index.html
@@ -0,0 +1,49 @@
+---
+title: Замещаемый элемент
+slug: Web/CSS/Замещаемый_элемент
+tags:
+  - CSS
+  - Reference
+  - замещаемый элемент
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef}}</div>
+
+<p>В <a href="/ru/docs/Web/CSS">CSS</a>, <strong>замещаемый элемент</strong> — это элемент, чьё представление выходит за рамки CSS. Другими словами, это внешний объект, чьё представление независимо от модели форматирования CSS.</p>
+
+<h2 id="Замещаемые_элементы">Замещаемые элементы</h2>
+
+<p>Типичные замещаемые элементы:</p>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+</ul>
+
+<p>Некоторые элементы рассматриваются как замещаемые только в некоторых случаях:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("canvas")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("applet")}}</li>
+</ul>
+
+<p>Спецификация HTML также указывает, что элемент {{HTMLElement("input")}} может быть замещаемым, поскольку элемент {{HTMLElement("input")}} с типом image является замещаемым элементом наподобие {{HTMLElement("img")}}. Однако другие элементы форм, включая другие типы элементов {{HTMLElement("input")}}, явно отнесены к незамещаемым элементам (для описания их отображения по умолчанию, которое может быть разным на разных платформах, спецификация использует термин «Виджеты»).</p>
+
+<p>Объекты, добавляемые с помощью CSS-свойства {{cssxref("content")}} являются <em>анонимными замещаемыми элементами</em>. Они «анонимные», так как они не существуют в HTML-разметке.</p>
+
+<h2 id="Использование_CSS_с_замещаемыми_элементами">Использование CSS с замещаемыми элементами</h2>
+
+<p>CSS обрабатывает замещаемые элементы особым образом в некоторых случаях, например при расчёте внешних отступов и некоторых значений <code>auto</code>.</p>
+
+<p>Заметим, что у некоторых замещаемых элементов, но не у всех, есть внутренние размеры или определённая базовая линия, которая используется CSS свойствами вроде {{cssxref("vertical-align")}}.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Спецификация HTML https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements</li>
+ <li>{{CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/ru/web/css/псевдо-классы/index.html b/files/ru/web/css/псевдо-классы/index.html
new file mode 100644
index 0000000000..2c280be32b
--- /dev/null
+++ b/files/ru/web/css/псевдо-классы/index.html
@@ -0,0 +1,146 @@
+---
+title: Псевдоклассы
+slug: Web/CSS/Псевдо-классы
+tags:
+  - CSS
+  - Reference
+  - Псевдоклассы
+  - Селекторы
+translation_of: Web/CSS/Pseudo-classes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Псевдокласс</strong> в CSS — <dfn>это ключевое слово, добавленное к селектору,</dfn> которое определяет его особое состояние. Например, {{ Cssxref(":hover") }} может быть использован для изменения цвета кнопки при наведении курсора на неё.</p>
+
+<pre class="brush: css no-line-numbers">div:hover {
+  background-color: #F89B4D;
+}</pre>
+
+<p>Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, {{ cssxref(":visited") }}), состояние содержимого (вроде {{ cssxref(":checked") }} у некоторых элементов формы) или позиции курсора мыши (например, {{ cssxref(":hover") }} определяет, находится ли курсор мыши над элементом).</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> В отличие от псевдоклассов, <a href="/ru/docs/Web/CSS/pseudo-elements">псевдоэлементы</a> могут быть использованы для стилизации <em>определённой части</em> элемента.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">selector:pseudo-class {
+  property: value;
+}
+</pre>
+
+<p>Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.</p>
+
+<h2 id="Список_стандартных_псевдоклассов">Список стандартных псевдоклассов</h2>
+
+<div class="index">
+<ul>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ cssxref(':any')}}</li>
+ <li>{{ cssxref(':any-link')}}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":defined") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<h2 id="Спецификации">Спецификации</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('Fullscreen') }}</td>
+   <td>{{ Spec2('Fullscreen') }}</td>
+   <td>Определён <code>:fullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Нет изменений от {{ SpecName('HTML5 W3C') }}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Определены <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code> и <code>:matches()</code>.<br>
+    Нет существенных изменений для псевдоклассов, определённых в {{SpecName('CSS3 Selectors')}} и {{SpecName('HTML5 W3C')}} (не рассматрия семантическое значение).</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определено семантическое значение в HTML контексте для  <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> и <code>:indeterminate</code>.<br>
+    Определены <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code> и <code>:dir()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определены <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> и <code>:read-write</code>, но без связанного семантического значения.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Определены <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> и <code>:not()</code>.<br>
+    Определён синтаксис для <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> и <code>:indeterminate</code>, но без связанного семантического значения.<br>
+    Нет значительных изменений для псевдоклассов, определённых в {{SpecName('CSS2.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Определены <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> и <code>:focus</code>.<br>
+    Нет значительных изменений для псевдоклассов, определённых в {{SpecName('CSS1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Определены <code>:link</code>, <code>:visited</code> и <code>:active</code>, но без связанного семантического значения.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлементы</a></li>
+</ul>
diff --git a/files/ru/web/css/размер/index.html b/files/ru/web/css/размер/index.html
new file mode 100644
index 0000000000..4fd88f8cc2
--- /dev/null
+++ b/files/ru/web/css/размер/index.html
@@ -0,0 +1,153 @@
+---
+title: <length>
+slug: Web/CSS/размер
+tags:
+  - CSS
+  - CSS Тип Данных
+  - Величина
+  - Разметка
+  - длина
+translation_of: Web/CSS/length
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <code>&lt;length&gt;</code> представляет единицу длины. Длина может быть использована в таких свойствах CSS как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, и {{Cssxref("text-shadow")}}.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Хоть значения {{cssxref("&lt;percentage&gt;")}} также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <code>&lt;length&gt;</code>, они не являются <code>&lt;length&gt; </code>значениями.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;length&gt;</code> состоит из {{cssxref("&lt;number&gt;")}}, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа <code>0</code> единица измерения необязательна.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Некоторые свойства допускают использование отрицательных значений <code>&lt;length&gt;</code>, а некоторые нет.</p>
+</div>
+
+<h3 id="Единицы_измерения">Единицы измерения</h3>
+
+<h4 id="Относительные_единицы_измерения">Относительные единицы измерения</h4>
+
+<p>Относительные единицы измерения представляют расстояние, определённое какой-либо другой величиной. В зависимости от единицы, это может быть размер определённого символа, <a href="/ru/docs/Web/CSS/line-height">высота строки</a> или размер {{glossary("viewport")}}.</p>
+
+<h5 id="Единицы_зависящие_от_шрифта">Единицы, зависящие от шрифта</h5>
+
+<p>Единицы, зависящие от шрифта, определяют значение <code>&lt;length&gt;</code>, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Эти единицы, особенно <code>em</code> и <code>rem</code>, часто используются для создания адаптивных разметок, которые сохраняют <a href="https://24ways.org/2006/compose-to-a-vertical-rhythm">вертикальную структуру страницы</a> даже если пользователь изменяет размер шрифта.</p>
+</div>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cap</span></font> {{experimental_inline}}</dt>
+ <dd>Представляет высоту заглавных букв в <a href="/ru/docs/Web/CSS/font">шрифте</a>, применённом к элементу.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ch</span></font></dt>
+ <dd>Представляет ширину символа "<code>0</code>" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">em</span></font></dt>
+ <dd>Представляет подсчитанный размер шрифта элемента. Если используется в свойстве {{Cssxref("font-size")}}, представляет <em>унаследованный</em> размер шрифта.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ex</span></font></dt>
+ <dd>Представляет <a href="https://en.wikipedia.org/wiki/X-height">x-height</a> (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах <code>1ex ≈ 0.5em</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ic</span></font> {{experimental_inline}}</dt>
+ <dd>Равна используемой в шрифте ширине символа "<code>水</code>" (ККЯ, символ "вода", U+6C34).</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">lh</span></font> {{experimental_inline}}</dt>
+ <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}}, переведённому в абсолютные единицы измерения.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rem</span></font></dt>
+ <dd>Представляет размер шрифта корневого элемента (обычно {{HTMLElement("html")}}). Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию (в большинстве браузеров <code>16px</code>, но настройки пользователя могут переопределить это значение).</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rlh</span></font> {{experimental_inline}}</dt>
+ <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}} корневого эдемента (обычно {{HTMLElement("html")}}), переведённому в абсолютные единицы измерения. Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию.</dd>
+</dl>
+
+<h5 id="Единицы_зависящие_от_размеров_экрана">Единицы, зависящие от размеров экрана</h5>
+
+<p>Эти единицы определяют значение <code>&lt;length&gt;</code> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках {{cssxref("@page")}}.</p>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vh</span></font></dt>
+ <dd>Равна 1% высоты блока содержимого.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vw</span></font></dt>
+ <dd>Равна 1% ширины блока содержимого.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vi</span></font> {{experimental_inline}}</dt>
+ <dd>Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vb</span></font> {{experimental_inline}}</dt>
+ <dd>Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmin</span></font></dt>
+ <dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них меньше.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmax</span></font></dt>
+ <dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них больше.</dd>
+</dl>
+
+<h4 id="Абсолютные_единицы_измерения">Абсолютные единицы измерения</h4>
+
+<p>Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойтсва устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.</p>
+
+<p>Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения <code>px</code> представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, <code>1in</code> определяется как <code>96px</code>, что равно <code>72pt</code>. Последствием такого способа определения является то, что длины, описанные в дюймах (<code>in</code>), сантиметрах (<code>cm</code>) или миллиметрах (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font>) необязательно равны одноимённым физическим единицам.</p>
+
+<p>Для устройств с высоким dpi дюймы (<code>in</code>),сантиметры (<code>cm</code>) и миллиметры (<code>mm</code>) такие же, как и соответствующие физические единицы. Таким образов, единица <code>px</code> определяется относительно их (1/96 одного дюйма).</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как <code>em</code> или <code>rem</code>) в свойстве <code>font-size</code>.</p>
+</div>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">px</span></font></dt>
+ <dd>Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на <em>принтерах</em> и <em>экранах с высоким разрешением</em> один пиксель CSS равен нескольким пикселям дисплея. <code>1px</code> = 1/96  от <code>1in</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cm</span></font></dt>
+ <dd>Один сантиметр. <code>1cm</code> = <code>96px/2.54</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font></dt>
+ <dd>Один миллиметр. <code>1mm</code> = 1/10 от <code>1cm</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Q</span></font> {{experimental_inline}}</dt>
+ <dd>Четверть миллиметра. <code>1Q</code> = 1/40 от <code>1cm</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">in</span></font></dt>
+ <dd>Один дюйм. <code>1in</code> = <code>2.54cm</code> = <code>96px</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pc</span></font></dt>
+ <dd>Одна <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D0%B9%D0%BA%D0%B0_(%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)">пайка</a>. <code>1pc</code> = <code>12pt</code> = 1/6 от <code>1in</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pt</span></font></dt>
+ <dd>Одна точка. <code>1pt</code> = 1/72 от<code>1in</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mozmm</span></font> {{non-standard_inline}}, удалена в Firefox 59</dt>
+ <dd>Экспериметальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.</dd>
+</dl>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>При анимации значения <code>&lt;length&gt;</code> интерполируются как реальные <a href="https://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D1%81_%D0%BF%D0%BB%D0%B0%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%B7%D0%B0%D0%BF%D1%8F%D1%82%D0%BE%D0%B9">числа с плавающей запятой</a>. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется <a href="/ru/docs/Web/CSS/single-transition-timing-function">временной функцией</a> анимации.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Добавлены единицы <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, и <code>rlh</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Добавлены единицы <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, и <code>Q</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Явно определены единицы <code>em</code>, <code>pt</code>, <code>pc</code>, и <code>px</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первое определение. Неявно определены единицы <code>em</code>, <code>pt</code>, <code>pc</code>, и <code>px</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.length")}}</p>
diff --git a/files/ru/web/css/синтаксис/index.html b/files/ru/web/css/синтаксис/index.html
new file mode 100644
index 0000000000..1adfb2fb04
--- /dev/null
+++ b/files/ru/web/css/синтаксис/index.html
@@ -0,0 +1,76 @@
+---
+title: Синтаксис
+slug: Web/CSS/Синтаксис
+translation_of: Web/CSS/Syntax
+---
+<div>{{cssref}}</div>
+
+<div>Основная задача Каскадных Стилей — это рассказать движку браузера, как отрисовать элементы страницы — каким цветом, как позиционировать их на странице, как украшать, и так далее. Синтаксис CSS построен следуя этой идее, и состоит из следующих основных блоков:</div>
+
+<div></div>
+
+<ul>
+ <li><strong>Свойство</strong> (<em>property</em>) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).</li>
+ <li><strong>Значение</strong> (<em>value</em>) — описывает, как именно <em>свойство</em> будет обработано браузером. <span id="result_box" lang="ru"><span class="hps">Каждое свойство имеет</span> <span class="hps">набор допустимых значений</span><span>, определенных</span> <span class="hps">формальными правилами</span><span>, а также</span> <span class="hps">семантический</span> <span class="hps">смысл,</span> <span class="hps">реализованный</span> движком <span class="hps">браузера.</span></span></li>
+</ul>
+
+<h2 id="Объявления_CSS">Объявления CSS</h2>
+
+<p>Задание CSS свойствам определенных значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответсвий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p>
+
+<p>И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, '<code>:</code>' (<code>U+003A COLON</code>), а пробелы до, между и после свойства или значения игнорируются.</p>
+
+<p><img alt="css syntax - declaration.png" class="default internal" src="https://mdn.mozillademos.org/files/7771/css%20syntax%20-%20declaration(1).png" style="border: 1px solid black; height: 189px; padding: 1em; width: 465px;"></p>
+
+<p>В CSS существует более <a href="/ru/docs/CSS/Reference">ста различных свойств</a>, и бесконечное число допустимых значений. <span id="result_box" lang="ru"><span class="hps">Не все</span> <span class="hps">пары</span> <span class="hps">свойств и значений</span> <span class="hps">допускаются</span>, <span class="hps">и каждое свойство</span> <span class="hps">определяет</span><span>, каковы</span> <span class="hps">допустимые значения</span><span>.</span> <span class="hps">Когда значение</span> <span class="hps">не подходит для</span> <span class="hps">данного свойства</span><span>,</span> <span class="hps">объявление считается</span> <span class="hps">недействительной и</span> <span class="hps">целиком</span> <span class="hps">игнорируются</span> <span class="hps">CSS</span>-движком<span class="hps">.</span></span></p>
+
+<h2 id="Блоки_объявлений_CSS">Блоки объявлений CSS</h2>
+
+<p>Объявления группируются в <strong>блоки</strong>, структура которых состоит из открывающейся , '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), и закрывающейся, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>) фигурных скобок.</p>
+
+<p><a href="/@api/deki/files/6165/=css_syntax_-_block.png"><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></a></p>
+
+<p>Такие блоки называются <strong>блоками объявлений</strong>, и объявления в них разделяются точкой с запятой, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить ее для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.</p>
+
+<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<div class="note">Содержимое блока объявлений CSS, т. е. объявления, разделенные точкой с запятой. Блок объявлений может быть помещен внутри атрибута style HTML-документа без фигурных скобок.</div>
+
+<h2 id="CSS_rulesets">CSS rulesets</h2>
+
+<p>If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.</p>
+
+<p>CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a <em>selector</em> which is a condition selecting some elements of the page. The pair selector-declarations block is called a <strong>ruleset</strong>, or often simply a <strong>rule</strong>.</p>
+
+<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>As an element of the page may be matched by several selectors, and therefore by several rules eventually containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the <a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="Cascading and inheritance">cascade</a> algorithm.</p>
+
+<div class="note">It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.<br>
+<br>
+This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole <em>selector</em> is invalid and therefor the entire rule is ignored (as invalid too).</div>
+
+<h2 id="CSS_statements">CSS statements</h2>
+
+<p>Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.</p>
+
+<p>A <strong>statement</strong> is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).</p>
+
+<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
+
+<p>There are different kinds of statements:</p>
+
+<ul>
+ <li><strong>Rulesets</strong> (or <em>rules</em>) that, as seen, associate a collection of CSS declarations to a condition described by a selector.</li>
+ <li><strong>At-rules</strong> that start with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of <a href="/en/CSS/At-rule" title="At-rule">at-rules</a>, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@charset") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}).</li>
+</ul>
+
+<p>Any statement which isn't a rule or an at-rule is invalid and ignored.</p>
+
+<p><a name="nested_statements">There is another group of statements, the <strong>nested statements</strong>, these are statements that can be used in a specific subset of at-rules, the <em>conditional group rules</em>. These statements only apply if a specific condition is matched: the <code>@media</code> at-rule content is applied only if the device on which runs the browser matches the expressed condition; the <code>@document</code> at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only <em>rulesets</em> could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in </a><a href="/en/CSS/CSS3#Conditionals" title="en/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Now, though it still is experimental and not supported by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/ru/web/css/способ_расположения/index.html b/files/ru/web/css/способ_расположения/index.html
new file mode 100644
index 0000000000..dcf1440cb5
--- /dev/null
+++ b/files/ru/web/css/способ_расположения/index.html
@@ -0,0 +1,28 @@
+---
+title: Способ разметки
+slug: Web/CSS/Способ_расположения
+tags:
+  - CSS
+translation_of: Web/CSS/Layout_mode
+---
+<p><a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a> <strong>способ разметки </strong>(или <em>раскладки,</em> или англ. <em>layout</em>) — это алгоритм определения позиции и размеров блоков, основанный на способе, которым они взаимодействуют с родственными блоками. Существует несколько типов разметки:</p>
+
+<ul>
+ <li><em>Обычная</em> <em>(Normal Flow)</em> — все элементы являются частью обычного потока до тех пор, пока вы не переопределите это каким-либо образом. Обычный <em>layout </em>включает в себя <em>блочную раскладку</em>, созданную для расположения отдельных блоков, таких как параграфы, и <em>линейную,</em>—<em> </em>для строчных элементов;</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Table">Табличная</a></em>, спроектированная для расположения таблиц;</li>
+ <li><em>Float layout </em>— для возможности обозначить элементы <em><a href="/ru/docs/CSS/float" title="/ru/docs/CSS/float">плавающими</a>. </em>Такой<em> </em>элемент начинает позиционироваться слева или справа отностительно содержимого обычного потока, элементы которого начинают обтекать него;</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Positioning">Позиционированная</a> </em>— для позиционирования элементов без особого взаимодействия с другими элементами;</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Columns">Множественные столбцы</a></em> — для расположения контента колонками, как в газетах;</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Флексбокс</a> </em><em>(CSS Flexible Box Layout)</em> — для расположения сложных страниц, которые плавно могут изменять свой размер; {{ experimental_inline() }}</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">Сеточная</a></em> — для расположения элементов относительно фиксированной сетки. {{ experimental_inline() }}</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание:</strong> не все <a href="/ru/docs/Web/CSS/Reference" title="/ru/docs/Web/CSS/Reference">CSS свойства</a> применимы ко всем способам разметки. Большинство из них применяются к одному или двум из них и не действуют, если применяются на элементе, участвующем в другом режиме разметки.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/ru/web/css/тихий/index.html b/files/ru/web/css/тихий/index.html
new file mode 100644
index 0000000000..1db7dd50b5
--- /dev/null
+++ b/files/ru/web/css/тихий/index.html
@@ -0,0 +1,50 @@
+---
+title: Комментарии
+slug: Web/CSS/Тихий
+tags:
+  - Beginner
+  - CSS
+  - CSS Reference
+  - Комментарии
+  - Новичку
+  - Руководство
+translation_of: Web/CSS/Comments
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Комментарии используются для добавления поясняющих заметок или для того, чтобы предотвратить интеграцию части кода в браузер.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">/* Комментарий */</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css">/* Однострочный комментарий */
+
+/*
+Комментарий
+который содержит
+несколько
+строк
+*/
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Данный <code>/* */</code> синтаксис комментария используется для обоих вариантов, и однострочного и многострочного комментария. Нет других способов добавить комментарий во внешнюю таблицу стилей. Также, когда используется элемент &lt;style&gt;, вы можете использовать &lt;!-- --&gt;, чтобы спрятать CSS от старых браузеров, но это не рекомендуется. Как и в большинстве языков программирования, которые используют синтаксис комментариев /* */ , комментарии нельзя вкладывать друг в друга. Другими словами, данная часть синтаксиса */, которая следует за /* закрывает комментарий.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/CSS21/syndata.html#comments">CSS 2.1 Синтаксис и базовые типы данных #комментарии</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Руководство по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/указанное_значение/index.html b/files/ru/web/css/указанное_значение/index.html
new file mode 100644
index 0000000000..4f143afb74
--- /dev/null
+++ b/files/ru/web/css/указанное_значение/index.html
@@ -0,0 +1,43 @@
+---
+title: Указанное значение
+slug: Web/CSS/Указанное_значение
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/specified_value
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>Указанное значение</strong> CSS свойства может устанавливаться одним из 3 следующих способов.</p>
+
+<ol>
+ <li>Если в таблице стилей документа указано значение свойства, которое будет использоваться. Например, если свойство {{cssxref("color")}} устанавливается в <code>green</code>, то цвет текста соответствующего элемента становится зелёным.</li>
+ <li>Если в таблице стилей документа указано значение, которое может наследоваться от родительского элемента (если возможно). Например, у нас есть параграф ({{HTMLElement("p")}}) внутри {{HTMLElement("div")}}, а к {{HTMLElement("div")}} применено CSS свойство <code>font</code> со значением "Arial", а у {{HTMLElement("p")}} не установлено свойство <code>font</code>, то он унаследует значение шрифта "Arial".</li>
+ <li>Если не выполняется не то, не другое, начальное значение элемента применяется из CSS спецификации.</li>
+</ol>
+
+<h2 id="Спецификации">Спецификации</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("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Руководство по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>