From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/will-change/index.html | 166 ++++++++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/ru/web/css/will-change/index.html (limited to 'files/ru/web/css/will-change') 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 +--- +

{{ CSSRef() }}{{SeeCompatTable}}

+ +

CSS свойство will-change предоставляет автору возможность уведомить браузер об ожидаемом изменении элемента, таким образом браузер может настроить соответсвующую оптимизацию до того как элемент действительно изменится. Такой тип оптимизации может повысить отзывчивость страницы, совершая, возможно дорогие операции до того как они действительно понадобятся. 

+ +
/* Keyword values */
+will-change: auto;
+will-change: scroll-position;
+will-change: contents;
+will-change: transform;        /* Example of <custom-ident> */
+will-change: opacity;          /* Example of <custom-ident> */
+will-change: left, top;        /* Example of two <animateable-feature> */
+
+/* Global values */
+will-change: inherit;
+will-change: initial;
+will-change: unset;
+ + + +

Правильно использование этого свойства может быть немного сложнее:

+ + + +

{{cssinfo}}

+ +

Синтаксис

+ +

Значения

+ +
+
auto
+
Это ключевое слово не выражает конкретной цели; пользовательский агент должен применяться независимо эвристики и оптимизации как он это обычно делает.
+
+ +

<Animateable-feature> может иметь одно из следующих значений:

+ +
+
scroll-position
+
Указывает, что автор ожидает анимацию или изменение положения скролла элемента в ближайшем будущем.
+
contents
+
Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
Указывает, что автор ожидает анимацию или измение свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись,  тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: unset, initial, inherit, will-change, auto, scroll-position, или contents. 
+
+ +

Примеры

+ +
.sidebar {
+  will-change: transform;
+}
+
+ +

В примере выше прямо в таблицу стилей добавляется свойство will-change, которое заставит браузер держать оптимизацию в памяти намного дольше, чем нужно, а мы уже видели почему следует этого избегать. Ниже приведён ещё один пример, показывающий, как применить свойство will-change с помощью скриптов, что вероятно, вам следует делать в большинстве случаев.

+ +
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';
+}
+ +

Однако может быть целесообразно включить will-change в вашу таблицу стилей для приложения, в котором страница переворачивается при нажатии клавиши, например альбом или перезентация, где страницы большие и сложные. Это позволит браузеру заранее подготовить переход и позволит быстро переключаться между страницами, как только будет нажата клавиша.

+ +
.slide {
+  will-change: transform;
+}
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Will Change', '#will-change', 'will-change') }}{{ Spec2('CSS Will Change') }}Initial definition
+ +

Браузерная совместимость

+ +

{{Compat("css.properties.will-change")}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(36)}}{{CompatGeckoDesktop(36)}} [1]{{CompatNo}}{{CompatOpera(24)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile(36)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] В Firefox с 31 до 35 версии свойство will-change было доступно, но только, если пользователь установил значение флага layout.css.will-change.enabled в true. Выбор был удалён в Firefox 43.

+ +

Firefox позволяет установить will-change: will-change до версии 42.0, что не соответствует спецификации. Это было исправлено в Firefox 43.0. Смотрите {{bug("1195884")}}.

-- cgit v1.2.3-54-g00ecf