CSS will-change

The coolest name, isn't it?

Well, CSS is changing, and it will change, hopefully by adding more cool-name options.

There's a word that will-change is here to change transition in the transition-transform relationship. Can I just ask: will-it-change? (OK, I'm done!)

It's totally fine if you didn't hear about will-change until now, you will understand everything there is in a text that follows.

About will-change

The real purpose of will-change property is to warn browser that selected element will change in future processes, so the browser can set up appropriate optimizations ahead.

Possible values:

• auto - standard browser optimizations will be applied;
• scroll-position - the element’s scroll position will be animated sometime in the near future;
• contents - the contents of an element is expected to change so the browser will not cache this element’s content;
• [custom-ident] - specifying the name or names of one or more properties that you expect to change (e.g. transform, opacity, top, left,);

It is possible to declare multiple values with a comma-separated list.

 .sidebar{
     will-change:transform, opacity;
 }

Some properties will have no effect when specified in will-change, because the browser doesn’t perform any special optimizations for changes in most properties. It is still safe to specify them, though; it’ll simply have no effect.

This property is not supported in IE, Edge and Opera Mini, keep that in mind.

Do's

Use sparingly 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.

Give it time It is important to give 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.

Remove all will-change after the changes are done The usual browser behavior for optimizations that it makes is to remove these optimizations and revert back to normal behavior as soon as it can.

Be aware that will-change may actually influence the visual appearance of elements, when used with property values, that creates a stacking context (e.g. will-change: opacity), as the stacking context is created up front.

Don'ts

Don't apply will-change to too many elements The browser already tries as hard as it can to optimize everything.

Don't apply will-change to elements to perform premature optimization. will-change is intended to be used as something of a last resort, in order to try to deal with existing 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. This will lead to worse performance.

The End

Read About, read Do's, read Don'ts and that's everything. I don't even have the last word to add.

For the weekly update, subscribe to our newsletter.