Ће се променити - ЦСС-трикови

Anonim

will-changeИмовина у ЦСС оптимизира анимације тако што је бровсер знао којем својства и елементи су само хтео да се манипулише, потенцијално повећање перформанси тој операцији.

Ово својство има четири вредности:

  • auto: примениће се стандардне оптимизације прегледача.
  • scroll-position: означава да ће позиција помицања елемента бити анимирана негдје у блиској будућности, тако да ће се прегледач припремити за садржај који није видљив у прозору за помицање елемента.
  • contents: очекује се промена садржаја елемента, тако да прегледач неће кеширати садржај овог елемента.
  • : било које кориснички дефинисано својство као што је transformили на opacityкоје желимо will-changeда се применимо.

Можемо обавестити прегледач да ће се промена transformсвојства догодити на следећи начин:

.element ( will-change: transform; )

Или ако желимо да декларишемо више вредности, можемо да користимо листу одвојену зарезима као што су:

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

Важно је да се не прекомерно користи will-changeсвојство, јер би то у ствари могло довести до тога да страница буде мање ефикасна (имајте на уму да allза ово својство не постоји вредност из доброг разлога). Као резултат тога, МДН препоручује да се својство користи као крајње средство за постојеће проблеме са перформансама, а не за оне за које претпостављате да би се могли догодити. И, када га користите, препоручује се пребацивање will-changeнепосредно пре промене елемента или својства, а затим га поновно искључите убрзо након завршетка процеса.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
36 36 Не 79 9.1

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 81 9.3