Se va schimba - CSS-Tricks

Anonim

will-changeProprietatea în CSS optimizează animații, permițându - know browser - ul care proprietățile și elemente sunt doar pe cale de a fi manipulate, putând crește performanța acestei operațiuni special.

Această proprietate are patru valori:

  • auto: se vor aplica optimizări standard ale browserului.
  • scroll-position: indică faptul că poziția de derulare a elementului va fi animată cândva în viitorul apropiat, astfel încât browserul să se pregătească pentru conținut care nu este vizibil în fereastra de derulare a unui element.
  • contents: conținutul unui element este de așteptat să se schimbe, astfel încât browserul nu va memora în cache conținutul acestui element.
  • : orice proprietate definită de utilizator, cum ar fi transformsau opacitycăreia dorim will-changesă i se aplice.

Putem informa browserul că o schimbare este pe cale să aibă loc la transformproprietate astfel:

.element ( will-change: transform; )

Sau dacă dorim să declarăm mai multe valori, putem folosi o listă separată prin virgule, cum ar fi:

.element ( will-change: transform, opacity; )

Cu toate acestea, este important să nu folosiți în exces will-changeproprietatea, deoarece, de fapt, ar putea determina ca pagina să fie mai puțin performantă (rețineți că nu există o allvaloare pentru această proprietate dintr-un motiv întemeiat). Ca urmare, MDN recomandă ca proprietatea să fie folosită ca ultimă soluție pentru problemele de performanță existente, mai degrabă decât pentru cele pe care le anticipați că ar putea apărea. Și, atunci când îl utilizați, este recomandat să comutați will-changechiar înainte ca un element sau o proprietate să se schimbe și apoi să îl comutați din nou la scurt timp după terminarea procesului.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
36 36 Nu 79 9.1

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 81 9.3