De acordo com a especificação W3C, a propriedade will-change
tem como objetivo informar ao navegador quais são as propriedades do CSS que serão modificadas para que o mesmo possa fazer otimizações sobre os elementos em questão. Por exemplo, se eu desejar alterar a opacidade de um link, posso fazer o seguinte:
.element { transition: opacity .2s; opacity: 1; }
.element:hover { will-change: opacity; }
.element:active { opacity: .3; }
<a href="#" class="element">Stack Overflow em Português</a>
<br>
<sub>Pressione o link acima para ver o efeito em ação</sub>
Ou seja, quando o mouse estiver sobre o elemento, eu adiciono a propriedade will-change
definindo a propriedade opacity
, informando ao navegador que tal propriedade poderá sofrer alterações em breve e então ele pode efetuar otimizações sobre o elemento modificado.
A questão é que a própria especificação descreve o uso desta propriedade como delicada e eu particularmente nunca vi um algum lugar utilizando-a, então pergunto:
- Como funciona a propriedade
will-change
? - Que tipo de otimização o navegador consegue fazer quando a propriedade é utilizada?
- Quando o uso desta propriedade é necessário?