Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS will-change

DZone's Guide to

CSS will-change

This article will change the way you think about CSS. Okay, maybe not really, but the will-change property is definitely an interesting piece of the development puzzle.

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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 the transition in the transition-transform relationship. Can I just ask: how will-it-change how I work with CSS? (OK, I'm done!)

It's totally fine if you didn't hear about will-change until now, we'll go over everything you need to know!

About will-change

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

Posible 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 are 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; so keep that in mind.

Do's

Use sparingly. Adding willl-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 a 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 instances of  will-change after the changes are made. 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. 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.

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:
web dev ,css ,will-change ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}