will-change

Overview

The will-change property is used to inform the browser in advance about the properties and attributes of an element that are expected to change in the future. By doing this, the browser can set up necessary optimizations ahead of time, potentially enhancing the responsiveness and rendering performance of the page.

However, using will-change unwisely may lead to significant consumption of resources, causing decreased performance. Therefore, it should be used sparingly and only as a final resort, after all other optimization techniques have been implemented and tested.

Examples and Usage

The will-change property is generally used in situations involving animations or transformations. Providing a simple example to showcase its use can be challenging due to the complexity of its effects. Below, you'll find a demonstration of how will-change might be used and how it can impact the rendering of elements in a browser.

Consider two overlapping boxes sharing the same x and y position.

<div class="box upperBox"></div> 

<div class="box lowerBox"></div>

Their styling is as follows:

.box {
  height:100px;
  width:100px;
}
.upperBox {
  background:red;
  will-change:transform;
}
.lowerBox {
  background:blue;
  margin-top:-100px;
}

In terms of rendering, browsers that support will-change will display the red box (.upperBox) on top, while those that don’t will display the blue box (.lowerBox) on top. Specifically, this behavior is related to the "stacking context" in CSS.

The will-change property can also influence other aspects, such as the containing blocks, depending on the property you're anticipating to change.

Moreover, you can let the browser know about forthcoming changes to specific properties like so:

.exampleElement {
  /* This informs the browser that a change is about to take place to the transform property */
  will-change: transform;
}

Or if multiple properties are anticipated to change, use a comma-separated list:

.exampleElement {
  /* This informs the browser that changes are about to take place to both the transform and opacity properties */
  will-change: transform, opacity;
}

Although you can declare will-change in your CSS, in most cases it's better to use JavaScript to add and remove will-change dynamically, especially when the changes are finished. This helps to avoid keeping unnecessary optimizations active and consuming resources.

Values

The will-change property accepts the following values:

Associated Properties

• transform
• translate
• opacity
• rotate
• scale

Tips and Tricks

• Avoid overusing the will-change property. It should be applied sparingly, as a performance fix only when necessary.

• Apply will-change in advance of the change. Applying it too close to the change, such as in a hover selector, may not give the browser enough time for optimizations.

• Restrict the use of will-change to a limited number of elements. Overuse can lead to resource depletion, causing performance decline rather than improvement.

• Always remove the will-change property once the changes are done. This allows the browser to recover the resources taken up by the optimizations. It's recommended to set and unset will-change using JavaScript, allowing you to remove the property right after the changes are done.

Browser Compatibility

The will-change property is supported in most modern browsers. For older versions of Firefox it's not supported by default, but it can be turned on using the layout.css.will-change.enabled flag.

Caution: Early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: will-change

W3C: CSS Will Change Module Level 1