From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/will-change/index.html | 178 +++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 files/pt-br/web/css/will-change/index.html (limited to 'files/pt-br/web/css/will-change') diff --git a/files/pt-br/web/css/will-change/index.html b/files/pt-br/web/css/will-change/index.html new file mode 100644 index 0000000000..aec9664b59 --- /dev/null +++ b/files/pt-br/web/css/will-change/index.html @@ -0,0 +1,178 @@ +--- +title: will-change +slug: Web/CSS/will-change +tags: + - CSS + - CSS Will-change + - CSS3 + - Propriedade CSS + - Referência(2) + - Transições + - otimização de css +translation_of: Web/CSS/will-change +--- +
{{CSSRef}}
+ +

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:

+ + + +

{{cssinfo}}

+ +

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.
+
+ +

O <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.
+
{{cssxref("custom-ident", "<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 {{Glossary("stacking context")}}.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplos

+ +
.sidebar {
+  will-change: transform;
+}
+
+ +

O exemplo acima adiciona a propriedade will-change diretamente no estilo, o que irá fazer com que o navegador mantenha 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çãoEstadoComentário
{{SpecName('CSS Will Change', '#will-change', 'will-change')}}{{Spec2('CSS Will Change')}}Initial definition
+ +

Compatibilidade de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte Básico{{CompatChrome(36)}}{{CompatGeckoDesktop(36)}} [1]{{CompatNo}}{{CompatOpera(24)}}{{CompatSafari(9.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte Básico37{{CompatGeckoMobile(36)}} [1]{{CompatNo}}{{CompatNo}}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")}}.

-- cgit v1.2.3-54-g00ecf