CSS will-change Property

The CSS 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.

Syntax

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;

Acceptable Values

auto

This value is used to indicate that the user agent should apply whatever heuristics and optimizations it normally does.

scroll-position

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.

contents

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>

A <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.

The <custom-ident> value cannot be one of the following keywords: will-change, none, all, auto, scroll-position, and contents, in addition to the keywords normally excluded from <custom-ident>.

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.

  • Don’t apply will-change to 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-change directly 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-change on and off on using script code before and after the change occurs.

  • Don’t apply will-change to elements to perform premature optimization.

    If your page is performing well, don’t add the will-change property 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-change will 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-change may 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.

Browser Support

The CSS 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.

Further Reading

  1. Read more about the CSS <will-change> property on MDN.
  2. You can also read the CSS <will-change> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

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.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top