I found CSS will-change
W3.org docs, MDN docs property (which already works in Chrome and is partiali supported by Firefox and Opera) but I'm not really sure how it works.
Does anybody know something more about this mysterious thing?
I have just read that it allows browser to prepare for calculation over the element in the future. I don't want to misunderstand it. So I have a few questions.
Should I add this property to the element class or its hover state?
.my-class{ will-change: 'opacity, transform' } .my-class:hover{ opacity: 0.5 } .my-class:active{ transform: rotate(5deg); }
OR
.my-class{ ... } .my-class:hover{ will-change: 'opacity' opacity: 0.5 } .my-class:active{ will-change: 'transform' transform: rotate(5deg); }
How can it increase a browser performance? Theoretically, when CSS is loaded, the browser already "knows" what will happen with each element, doesn't it?
If you can add any good example illustrating how to use it efficiently, I will be grateful :)
I won't copy paste the entire article here but here's a tl;dr version:
How to use it:
How not to use it:
Specifying
will-change
on hover has no effect: