initial commit

1 files changed, 281 insertions, 0 deletions

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>