CSS will-change Optimizing Web Performance

will-change

The will-change CSS property helps improve the performance of animations and transitions by telling the browser about upcoming changes to an element. This allows the browser to apply optimizations in advance, resulting in smoother and more responsive animations.

However, use will-change as a last resort to fix existing performance issues rather than as a preventive measure. Overusing it can lead to excessive resource consumption and may degrade performance.

Syntax and Values

The will-change property can be used with various values to indicate the type of changes expected. Here’s the syntax:

/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animatable-feature> */

/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;

Values

• auto: No particular optimization; the browser uses its standard heuristics.
• scroll-position: Indicates that the element’s scroll position will change.
• contents: Indicates that the element’s contents will change.
• <custom-ident>: Indicates a specific property, like transform or opacity, will change. It cannot be unset, initial, inherit, will-change, auto, scroll-position, or contents.

Using will-change in Scripts

Applying will-change through JavaScript is often the most effective way to use it. This method allows you to dynamically toggle optimizations on and off, ensuring that the browser performs optimizations only when necessary.

Here’s an example:

const el = document.getElementById("element");

// Set will-change when the element is hovered
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}

In this example, will-change is applied when the element is hovered over and removed once the animation ends. This ensures that the browser only performs optimizations during the animation, minimizing resource consumption.

Examples

Using will-change correctly can significantly enhance the performance of your web applications. Below are examples demonstrating how to apply will-change both in stylesheets and through scripts.

Via Stylesheet

In some cases, it may be appropriate to include will-change in your stylesheet, especially for applications like slide deck presentations where the pages are large and complex.

.slide {
  will-change: transform;
}

Via Script

Applying will-change through JavaScript is often the best practice, as it allows you to toggle optimizations dynamically. This ensures that the browser only performs optimizations when needed, conserving resources.

const el = document.getElementById("element");

// Set will-change when the element is hovered
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}

Specifications

The will-change property is defined in the CSS Will Change Module Level 1 specification. This module provides a way for authors to inform the browser about expected changes to an element, allowing the browser to apply optimizations in advance.

Browser Compatibility

The will-change CSS property is widely supported across modern browsers, making it a reliable tool for web developers.

• Google Chrome: Supported since version 36.
• Microsoft Edge: Supported since version 79.
• Mozilla Firefox: Supported since version 36.
• Safari: Supported since version 24.
• Opera: Supported since version 9.1.

See Also

For further exploration of related CSS properties and concepts, you may find the following resources helpful:

• [transform]WebsiteUrl: Learn about the CSS property used to apply 2D or 3D transformations to elements.
• Individual transform properties:
  • [translate]WebsiteUrl: Understand how to move elements around using CSS.
  • [scale]WebsiteUrl: Explore how to resize elements using CSS.
  • [rotate]WebsiteUrl: Learn about rotating elements in web design.
  • Note: There is no individual skew property; instead, use the transform property to apply skewing effects.

These resources provide additional insights into how you can enhance the visual appeal and performance of your web designs using CSS.