The will-change CSS property is a powerful tool that allows developers to hint to the browser about the elements on a page that are likely to change soon. This gives the browser a chance to optimize its rendering of those elements ahead of time, potentially resulting in better performance. However, will-change should be used with caution, as overuse can actually harm performance rather than improve it.
This article will discuss how to use the will-change property and when to avoid using it. We’ll also share information about its browser support.
Jump ahead:
- What is
will-change? - Why use
will-change? - Breaking down the
will-changesyntax - Adding
will-changeto an element - When to use
will-change - When to avoid using
will-change - Browser support for CSS
will-change
What is will-change?
will-change is a CSS property that tells the browser which properties of an element (e.g., content, scroll position, opacity, etc.) are likely to change in the future. This allows the browser to optimize the element’s rendering ahead of time, potentially resulting in better performance.
For example, let’s say you have a page with many elements of the same size and color. If you know that one of those elements will change size or color soon, you can use will-change to inform the browser about this change before it happens.
This “heads up” will allow the browser to optimize its rendering of the element, potentially resulting in better performance when the change occurs.
Why use will-change?
There are a few reasons why you might want to use will-change. Let’s take a look.
Optimizing performance
As mentioned earlier, the primary reason for using will-change is to improve performance. By letting the browser know which elements are likely to change soon, it can optimize its rendering of those elements ahead of time, potentially resulting in better performance when the change actually happens.
Improving animations
will-change can improve the performance of animations. It allows the browser to optimize element rendering, potentially producing smoother and more fluid animations. If you know an element will be animated, you can use will-change to inform the browser about this.
Preventing repaints and reflows
Repaints and reflows are expensive operations that can significantly impact the performance of a page. Repaint occurs when there are changes to an element that do not affect the DOM layout (e.g., a change in an element’s background). Reflows occur when changes to an element do affect the DOM layout (e.g., a change in an element’s width or height).
By using will-change, you can help prevent unnecessary repaints and reflows, further improving the performance of your page.
Breaking down the will-change syntax
The will-change syntax looks like this:
will-change: <animateable-feature> = auto | scroll-position | contents | <custom-ident>
The will-change property can have one or more values:
auto: Tells the browser that it should apply the standard optimization; this is the default valuescroll-position: Tells the browser that an element’s scroll position will be animated later and should prepare for its content which is not visible in the scroll window of that elementcontents: Tells the browser that the contents of an element will change, so the browser should not cache this element’s content<custom-indent>: This can be any user-defined property, such as transform or background. It tells the browser that the value of the property will soon change; it can also be one or more properties separated by a comma
N.B., if you specify a shorthand property as a custom-indent value (e.g., background), you are telling the browser that the background-color, background-image, background-position, and other background-related properties are likely to change
Adding will-change to an element
It’s relatively simple to use the will-change property. Just add will-change to the element you want to optimize, and specify the properties that are likely to change, like so:
element {
will-change: height, width, color;
}
In the example above, we’re telling the browser that the element’s height, width, and color properties are likely to change soon. This allows the browser to optimize the element’s rendering, potentially resulting in better performance when the property changes occur.
Do not use the will-change property at the point of an animation or transition; instead, use it before the transition or animation. will-change is supposed to tell the browser about an upcoming change so that the browser can prepare for it.
The browser can’t prepare for a change that is currently happening or has already occurred.
For example, instead of adding it directly to an element at the point of transition, like this:
my-element:hover {
will-change: color;
color: red;
}
You’ll add it to the element at its initial state when no change has occurred yet:
.element {
will-change: color;
transition: color 300ms ease-in-out;
}
.my-element:hover {
color: red;
}
Also, it’s best practice to turn will-change on and off before and after the desired change occurs, especially if such changes will be infrequent. It can be hard to do this from your CSS stylesheet, but with JavaScript, you can easily add (and remove) it to your elements:
const el = document.querySelector('.parent-element')
el.addEventListener('mouseenter', addWillChange)
el.addEventListener(mouseleave, removeWillChange)
const addWillChange = () => {
this.style.willChange = 'color'
}
const removeWillChange = () => {
this.style.willChange = 'auto'
}
Now that we understand how to use will-change, take a look at when to use it.
When to use CSS will-change
There are different instances in which you might want to use the CSS will-change property to improve the performance of your page. For example, if parts of your animation are not running smoothly, you can use will-change to make it more fluid and crisp, thereby improving animation performance:
//CSS file
#animated-element {
will-change: transform, opacity;
}
#animated-element.animated {
transition: transform 0.5s, opacity 0.5s;
transform: scale(2);
opacity: 0;
}
//JS file
const element = document.querySelector('#animated-element');
element.addEventListener('click', () => {
element.classList.toggle('animated');
});
In the above example, we use will-change to let the browser know that the transform and opacity properties of the #animated-element are likely to change when the element is clicked. This enables the browser to optimize its element rendering, potentially producing smoother and more fluid animations.
Another use case for the CSS will-change property is when you know that the size or position of an element is going to change soon. Using will-change to inform the browser about this change ahead of time, enabling the browser to optimize its rendering of the element, potentially resulting in better performance when the change occurs:
//CSS file
#changing-element {
will-change: width, height, transform;
}
#changing-element.changed {
width: 200px;
height: 200px;
transform: translateX(100px);
}
//JS file
const element = document.querySelector('#changing-element');
element.addEventListener('click', () => {
element.classList.toggle('changed');
});
Here, we use will-change to let the browser know that the width, height, and transform properties of the #changing-element are likely to change when clicked.
Other examples where will-change can be helpful are when the style of an element, like the color, font size, or text decoration, is going to change soon.
When to avoid using will-change
The CSS will-change property is not appropriate for every use case.
Don’t apply will-change to an element when an animation or transition is already taking place. Only use will-change when a change is imminent or likely to happen in the near future to give the browser sufficient time to optimize its rendering. Using will-change when a change has already occurred or is no longer imminent can strain the browser and harm performance.
Also, avoid applying will-change to several elements on a page. This can cause the browser to hog machine resources, thereby slowing down the page load time.
Browser support for CSS will-change
The will-change property is supported in most modern browsers, including Microsoft Edge 79+, Google Chrome 36.0+, Mozilla Firefox 36.0+, Apple Safari 9.1+, and Opera 24+. You can learn more about its browser support here.
Conclusion
The will-change CSS property is a valuable tool for optimizing the performance of elements on a page that are likely to change very soon. By letting the browser know about these changes ahead of time, the browser can optimize its rendering of those elements, potentially resulting in better performance.
However, will-change should be used with caution, as overuse can actually harm performance rather than improve it. You should limit the use of this property to cases when there is a specific need, such as when animating an element or when you know that an element’s properties will change. Then, remove it as soon as it is no longer needed.
It’s also important to realize that the browser may ignore the will-change hint if it’s unnecessary. will-change is supported in most modern browsers.
By understanding when and how to use CSS will-change property, developers can leverage this powerful tool to improve the performance of their websites and applications.
The post When and how to use CSS <code>will-change</code> appeared first on LogRocket Blog.
from LogRocket Blog https://ift.tt/zCODhn2
Gain $200 in a week
via Read more
