Everything You Need To Know About will-change Property
Tags: css, transform
Published: 2018-05-03 09:12:48

---
title: Everything You Need To Know About will-change Property
published: true
description: Have you heard about will-change property? If you didn't or if you just to refresh your memory, here's an article that explains everything you need to know about this specific CSS property.
tags: CSS, transform.
---
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]( http://kolosek.com/css-transition/) in the [transition-transform](http://kolosek.com/css-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.

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

This article is originally published on [Kolosek Blog](https://kolosek.com/css-will-change/?utm_source=dvt).