Sumário

A propriedade will-change do CSS fornece um modo dos autores dizerem aos navegadores sobre que tipo de mudanças devem ser esperadas no elemento, então o navegador pode fazer as otimizações apropriadas  com antecedência, antes do elemento ser efetivamente modificado. Esses tipos de otimizações podem aumentar a capacidade de resposta de uma página, fazendo o trabalho potencialmente caro antes do tempo antes que eles são realmente necessários.

O uso adequado dessa propriedade pode ser um pouco complicado:

  • Não aplique will-change em muitos elementos. O navegador já tenta ao máximo otimizar tudo. Algumas das otimizações mais fortes que podem utilizar o will-change acabam usando muitos recursos da máquina, e quando utilizados em demasia como neste caso, pode fazer a página para retardar o carregamento ou consumir uma grande quantidade de recursos.

  • Use com moderação. O comportamento normal do navegador para otimizações é fazê-las e depois voltar ao normal. Mas adicionando will-change diretamente no estilo, implica que o elemento alvo está sempre alguns momentos antes da mudança, e o navegador irá manter as otimizações por muito mais tempo do que teria de outra forma. Então é uma boa prática colocar e retirar o  will-change usando script antes e depois da mudança ocorrer.

  • Não aplicar will-change em elementos para realizar a otimização prematura. Se sua página está performando bem, não adicione a propriedade will-change nos elementos apenas para trazer mais velocidade. will-change é entendido como algo para ser usado como último recurso, com o intuito de tentar solucionar problemas de performance . Ele não deve ser usado para antecipar esses possíveis problemas. O uso excessivo do will-change poderá resultar em excessivo uso de memória e causar uma renderização mais complexa enquanto o browser tenta se preparar para uma possível mudança. Isso levará a um pior desempenho.

  • Dê tempo suficiente para trabalhar. Essa propriedade destina-se como um método para os autores dizerem ao agente do browser sobre como mudarão as properiedades antes disso acontecer. Então o navegador pode escolher como aplicar qualquer otimização requisitada na propriedade antes do tempo da ação acontecer. Isso é importante para dar ao navegador algum tempo para fazer as otimizações. Identifique um jeito de prever as mudanças, e use a proiedade will-change pra isso.

Initial valueauto
Aplica-se aall elements
Inheritednão
Midiaall
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

/* Valores chave */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* Exemplo de <custom-ident> */
will-change: opacity;          /* Exemplo de <custom-ident> */
will-change: left, top;        /* Exemplo de dois <animateable-feature> */

/* Valores globais */
will-change: inherit;
will-change: initial;
will-change: unset;

Valores

auto
Essa palavra chave não expressa nenhuma intenção em particular; o user agent deve aplicar qualquer otimização como normalmente ocorre.

<animateable-feature> pode ser um dos seguintes valores:

scroll-position
Indica que o autor espera que haja uma animação ou mudança na posição do scroll do elemento no futuro.
contents
Indica que o autor espera que haja uma animação ou mudança no conteúdo do elemento no futuro.
<custom-ident>
Indica que o autor espera que haja uma animação ou mudança na propriedade com o nome dado no elemento no futuro. Isso não pode ser um dos seguintes valores: unset, initial, inherit, will-change, auto, scroll-position, or contents. A especificação não define o comportamento de um valor em particular, mas é comum pro transform ser uma camada de composição. O Chrome atualmente toma duas ações, dadas as propriedades particulares do CSS: estabelece uma nova camada de composição ou um novo stacking context.

Sintaxe formal

auto | <animateable-feature>#

where
<animateable-feature> = scroll-position | contents | <custom-ident>

Exemplos

.sidebar {
  will-change: transform;
}

O exemplo acima adiciona a propriedade will-change diretamente no estilo, o que irá fazer cin que o navegadormantenha a otimização em memória por muito mais tempo que o necessário e nós já vimos que isso deve ser evitado. Abaixo outro examplo mostrando como aplicar o will-change através de script, o que provavelmente é o que você deve fazer na maioria dos casos.

var el = document.getElementById('element');

// Set will-change quando ocorre hover no elemento
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // As propriedades otimizáveis que vão mudar no bloco de animações
  this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}

Entretanto pode ser apropriado incluir will-change no seu estilo css para uma aplicação que faz page flips quando uma tecla é pressionada como um álbum ou uma apresentação de slides, onde a página é grande e complexa. Isso irá dizer ao navegador para preparar a transição ã frente do tempo e aceitar transições entre as páginas assim que a tecla for pressionada.

.slide {
  will-change: transform;
}

Especificações

Especificação Estado Comentário
CSS Will Change Module Level 1
The definition of 'will-change' in that specification.
Candidata a Recomendação Initial definition

Compatibilidade de Navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte Básico 36 36 (36) [1] Não suportado 24 9.1
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte Básico 37 36.0 (36) [1] Não suportado Não suportado 9.3

[1] From Firefox 31 to 35, will-change was available, but only if the user flipped the layout.css.will-change.enabled flag to true. The preference has been removed in Firefox 43.

Firefox aceita setar will-change: will-change acima da versão 42.0, que é inválido na espeficação. Isso foi arrumado no Firefox 43.0. See bug 1195884.

Etiquetas do documento e colaboradores

Colaboradores desta página: jlozovei, raphaguasta, Jerffersonferreira
Última atualização por: jlozovei,