Zmena vôle - Triky CSS | Almanach CSS 2025

will-changeNehnuteľnosť v CSS optimalizuje animácie tým, že nechá know prehliadače, ktoré vlastnosti a prvky sú práve chystá byť manipulované, prípadne zvýšením výkonu danej činnosti.

Táto vlastnosť má štyri hodnoty:

auto: budú použité štandardné optimalizácie prehľadávača.
scroll-position: označuje, že pozícia na posúvanie prvku bude animovaná niekedy v blízkej budúcnosti, takže sa prehliadač pripraví na obsah, ktorý nie je viditeľný v posúvacom okne prvku.
contents: očakáva sa, že sa obsah prvku zmení, takže prehliadač nebude ukladať obsah tohto prvku do medzipamäte.
: akákoľvek používateľom definovaná vlastnosť, ako napríklad transformalebo na opacityktorú chceme will-changebyť aplikovaní.

Prehliadač môžeme informovať, že v zariadení sa chystá zmena, transformnapríklad takto:

.element ( will-change: transform; )

Alebo ak chceme deklarovať viac hodnôt, môžeme použiť zoznam oddelený čiarkami, ako napríklad:

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

Je dôležité, aby ste vlastnosť nadmerne nepoužívali, will-changepretože by to mohlo v skutočnosti spôsobiť, že stránka bude menej výkonná (všimnite si, že allpre toto vlastníctvo neexistuje hodnota z dobrého dôvodu). Výsledkom je, že spoločnosť MDN odporúča, aby bola nehnuteľnosť použitá ako posledná možnosť pre existujúce problémy s výkonom, a nie pre tie, ktoré predpokladáte. A pri jeho použití sa odporúča prepnúť will-changetesne pred zmenou prvku alebo vlastnosti a potom ho znova krátko po dokončení procesu znova vypnúť.

Podpora prehliadača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.