Vil-endre - CSS-triks | CSS-almanakk 2025

Den will-changeeiendom i CSS optimaliserer animasjoner ved å la leseren vet hvilke egenskaper og elementer er bare om å bli manipulert, og potensielt øke ytelsen til den aktuelle operasjonen.

Denne egenskapen har fire verdier:

auto: standard nettleseroptimaliseringer blir brukt.
scroll-position: indikerer at elementets rulleposisjon vil bli animert en gang i nær fremtid, slik at nettleseren vil forberede seg på innhold som ikke er synlig i rullevinduet til et element.
contents: det forventes at innholdet i et element endres, slik at nettleseren ikke cache dette elementets innhold.
: hvilken som helst brukerdefinert egenskap som transformeller opacitysom vi ønsker will-changeå bli brukt på.

Vi kan informere nettleseren om at en endring er i ferd med å finne sted på transformeiendommen slik:

.element ( will-change: transform; )

Eller hvis vi vil erklære flere verdier, kan vi bruke en kommaadskilt liste som:

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

Det er viktig å ikke overbruke will-changeeiendommen, siden det faktisk kan føre til at siden blir mindre effektiv (merk at det ikke er en allverdi for denne eiendommen av en god grunn). Som et resultat anbefaler MDN at eiendommen brukes som en siste utvei for eksisterende ytelsesproblemer i stedet for de du forventer kan skje. Og når du bruker den, anbefales det å bytte will-changerett før et element eller en eiendom endres, og deretter slå den av igjen kort tid etter at prosessen er ferdig.