will-change property is used to provide a way for authors to hint browsers about the kind of changes to be expected on an element. This way, the browser can set up appropriate optimizations ahead of time before the element is actually changed. These kind of optimizations can increase the responsiveness of a page by doing potentially expensive work ahead of time before they are actually required.
The initial value of
will-change property is
auto. You can apply it to all elements. This property is not inheritable. The final computed value of the
will-change property is the exact same value that you initially supplied. This property is not animatable.
This is the formal syntax for using will-change property.
will-change: auto | <animateable-feature># where <animateable-feature> = scroll-position | contents | <custom-ident>
You can specify multiple animatable features but they should be comma-separated.
Here are some examples of using this property.
/* Keyword values */ will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* Example of <custom-ident> */ will-change: opacity; will-change: left, top; /* Global values */ will-change: inherit; will-change: initial; will-change: unset;
This value is used to indicate that the user agent should apply whatever heuristics and optimizations it normally does.
This value is used to indicate that the author expects to animate or change the scroll position of the element in the near future. The browser will make the appropriate optimizations for this change ahead of time.
This value is used to indicate that the author expects to animate or change something about the element’s contents in the near future. The browser will then make the appropriate optimizations for this change ahead of time.
<custom-ident> value is used to indicate that the author expects to animate or change the property with the given name on the element in the near future.
<custom-ident> value cannot be one of the following keywords:
contents, in addition to the keywords normally excluded from
Things to Keep in Mind
Proper usage of this property can be a bit tricky. These tips should help you use the
will-change property more effectively.
will-changeto too many elements.
The browser already tries as hard as it can to optimize everything. Some of the stronger optimizations that are likely to be tied to will-change end up using a lot of a machine’s resources, and when overused like this can cause the page to slow down or consume a lot of resources.
Use the property sparingly.
The normal behavior for optimizations that the browser make is to remove the optimizations as soon as it can and revert back to normal. However, adding
will-changedirectly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have otherwise. So it is a good practice to switch
will-changeon and off on using script code before and after the change occurs.
will-changeto elements to perform premature optimization.
If your page is performing well, don’t add the
will-changeproperty to elements just to wring out a little more speed. This property is meant to be used as something of a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems. Excessive use of
will-changewill result in excessive memory use and will cause more complex rendering to occur as the browser attempts to prepare for the possible change. Ironically, this will lead to worse performance.
Give it sufficient time to work.
This property is intended as a method for authors to let the user-agent know about properties that are likely to change ahead of time. Then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens. So it is important to give the the browser some time to actually do the optimizations. Find some way to predict at least slightly ahead of time that something will change, and set will-change then.
Be aware, that
will-changemay actually influence the visual appearance of elements.
This is particularly important for property values that create a stacking context (e.g.
will-change: opacity), as the stacking context is created up front.
will-change property is fully supported in 74.41% browsers and partially supported in 0% browsers. Therefore, its overall browser support is 74.41%. This property is fully supported in Firefox 36+, Chrome 36+, Safari 10+, Opera 24+, iOS Safari 9.3+, Android 53+ and Chrome for Android 56+.
Browser support data has been taken from caniuse.com.
- Read more about the CSS
<will-change>property on MDN.
- You can also read the CSS
<will-change>property on CSSWG.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.