Skip to main content
2 de 2
removeu 3 caracteres do conteúdo
Woss
  • 77,2mil
  • 15
  • 123
  • 221

Propriedade will-change do CSS: quando utilizar?

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 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?
Woss
  • 77,2mil
  • 15
  • 123
  • 221