Promijenit će se - CSS-trikovi

Anonim

will-changeNekretnina u CSS optimizira animacije, dopuštajući preglednik znati koje su osobine i elementi samo o biti manipulirani, potencijalno povećavajući performanse tog rada.

Ovo svojstvo ima četiri vrijednosti:

  • auto: primijenit će se standardne optimizacije preglednika.
  • scroll-position: označava da će se pozicija pomicanja elementa animirati negdje u bliskoj budućnosti, tako da će se preglednik pripremiti za sadržaj koji nije vidljiv u prozoru za pomicanje elementa.
  • contents: očekuje se promjena sadržaja elementa, tako da preglednik neće predmemorirati sadržaj ovog elementa.
  • : bilo koje korisnički definirano svojstvo poput transformili na opacitykoje se želimo will-changeprimijeniti.

Preglednik možemo obavijestiti da će se na transformimovini dogoditi promjena na sljedeći način:

.element ( will-change: transform; )

Ili ako želimo deklarirati više vrijednosti, možemo koristiti popis odvojen zarezima kao što je:

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

Važno je will-changemeđutim ne pretjerano koristiti svojstvo, jer bi to u stvari moglo dovesti do slabijeg rada stranice (imajte na umu da allovo svojstvo ne postoji iz opravdanog razloga). Kao rezultat toga, MDN preporučuje da se svojstvo koristi kao krajnje sredstvo za postojeće probleme s izvedbom, a ne za one za koje pretpostavljate da bi se mogli dogoditi. I kada se koristi, preporučuje se prebacivanje will-changeneposredno prije promjene elementa ili svojstva, a zatim ga ponovno isključivanje nedugo nakon završetka postupka.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
36 36 Ne 79 9.1

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 9.3