will-changeВластивість в CSS оптимізує анімацію, дозволяючи браузер знати , які властивості і елементи тільки збираємося маніпулювати, потенційно збільшуючи продуктивність цієї конкретної операції.
Ця властивість має чотири значення:
auto: буде застосовано стандартну оптимізацію браузера.scroll-position: вказує, що позиція прокрутки елемента буде анімована найближчим часом, тому браузер підготується до вмісту, який не відображається у вікні прокрутки елемента.contents: очікується, що вміст елемента зміниться, тому браузер не буде кешувати вміст цього елемента.: будь-яка визначена користувачем властивість, така якtransformабо доopacityякої ми хочемоwill-changeзастосувати.
Ми можемо повідомити браузер про те, що у transformвласність скоро відбудеться така зміна :
.element ( will-change: transform; )Або якщо ми хочемо оголосити кілька значень, ми можемо використовувати список, відокремлений комами, такий як:
.element ( will-change: transform, opacity; )Важливо не зловживати will-changeвластивістю, однак, насправді це може призвести до того, що сторінка буде менш ефективною (зауважте, що allдля цієї властивості немає поважної причини). Як результат, MDN рекомендує використовувати властивість як крайній засіб для існуючих проблем із продуктивністю, а не тих, які, як ви передбачаєте, можуть статися. І, використовуючи його, рекомендується перемикати will-changeбезпосередньо перед зміною елемента або властивості, а потім знову вимкнути його незабаром після завершення процесу.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 36 | 36 | Ні | 79 | 9.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.3 |