initial commit

1 files changed, 166 insertions, 0 deletions

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>