Skip to main content
Aviso removido Chamar atenção por Wallace Vizerra
Fim da Recompensa com Pedro Souza's answer escolhido por Wallace Vizerra
Aviso adicionado Chamar atenção por Wallace Vizerra
Recompensa Oferecida vale 50 pontos de reputação por Wallace Vizerra
removeu 3 caracteres do conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

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?

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?

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?
Tweeted twitter.com/StackOverflowPT/status/874655410887815168
Fonte Link
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 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?