Zal veranderen - CSS-trucs | CSS Almanac 2025

De will-changeeigenschap in CSS optimaliseert animaties door de browser te laten weten welke eigenschappen en elementen op het punt staan te worden gemanipuleerd, waardoor de prestaties van die specifieke bewerking mogelijk toenemen.

Deze eigenschap heeft vier waarden:

auto: standaard browseroptimalisaties worden toegepast.
scroll-position: geeft aan dat de schuifpositie van het element ergens in de nabije toekomst zal worden geanimeerd, zodat de browser zich voorbereidt op inhoud die niet zichtbaar is in het schuifvenster van een element.
contents: de inhoud van een element zal naar verwachting veranderen, dus de browser zal de inhoud van dit element niet cachen.
: elke door de gebruiker gedefinieerde eigenschap zoals transformof opacitywaarop we willen will-changeworden toegepast.

We kunnen de browser informeren dat er een wijziging op het punt staat plaats te vinden in de transformaccommodatie, zoals:

.element ( will-change: transform; )

Of als we meerdere waarden willen declareren, kunnen we een door komma's gescheiden lijst gebruiken, zoals:

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

Het is echter belangrijk om de will-changeeigenschap niet te veel te gebruiken, aangezien het er in feite toe kan leiden dat de pagina minder goed presteert (merk op dat er allom een goede reden geen waarde voor deze eigenschap is). Daarom raadt MDN aan om het onroerend goed te gebruiken als laatste redmiddel voor bestaande prestatieproblemen in plaats van problemen die u verwacht. En als je het gebruikt, is het aan te raden om te schakelen will-changenet voordat een element of eigenschap verandert en het vervolgens weer uit te schakelen kort nadat het proces is voltooid.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.