will-change Propiedad css para anticipar y preparar los cambios 3.5.14

will-change Propiedad css para anticipar y preparar los cambios

La propiedad de Css will-change es definida en el documento del consorcio que la desarrolla (CSS Will Change Module Level 1) como:

La propiedad will-change de Css le permite al autor informar al agente de usuario por adelantado de qué tipo de cambios se harán en un elemento. Esto permite al UA optimizar la forma en que manejará al elemento preveyendo la realización de esos cambios y preparándose por anticipado para ellos.

La propiedad will-change no es una propiedad "estética" sino funcional. Esto es, lo que hace es facilitar el rendimiento del navegador (UA) a la hora de manejar las páginas y su renderizado, pues de antemano sabe qué elementos van a sufrir qué cambios y de esta manera estar preparado para cuando sucedan. Así puede minimizar el impacto de los reflows y realizar el renderizado de las páginas de una forma más rápida y eficiente.

Valores propuestos para will-change

Los valores posibles que recoge el documento del W3c para la propiedad css will-change son:

• auto
• scroll-position
• contents
• Nombre de propiedad

auto

No especifica ningún cambio en particular. Deja en manos del navegador aplicar las optimizaciones

scroll-position

Indica que el autor espera animar o cambiar la posición del elemento (desplazamiento).

contents

Indica que el autor espera animar o cambiar algo en el contenido del elemento.

Nombre de propiedad

Indica que el autor espera animar o cambiar el valor de la propiedad especificada.

La propiedad will-change admite múltiples valores, en cuyo caso se deben separar por comas: .miele {will-change: transform, opacity, contents;}

Cómo funciona la propiedad will-change

No todos los cambios en una propiedad llevan aparejados un "trabajo extra" para el navegador. Sin embargo hay otras que el navegador tiene que crear una capa donde ejecutarla. No confundas capa con el mal uso que se hace de ella en css cuando se asimila a caja o elemento.

Entiende capa como una abstración o contexto. Un "espacio" independiente del resto donde manejar al elemento para aplicar la propiedad. Dos casos típicos de estas "capas" son las creadas por el navegador para manejar el apilamiento en vertical (eje z) cuando se declara la propiedad z-index (conocida como stacking context) o en el caso de las animaciones y transformaciones css.

El coste y retraso en la generación y manejo de estas "capas" por el navegador una vez construido el documento es a lo que ayuda el declarar la propiedad css will-change.

Soporte a la propiedad css will-change

Pese a que la primera aparición de esta propiedad fue un borrador de Tab Atkins Jr a inicios de Febrero de este año, los desarrolladores de los navegadores deben haber visto algo bueno en la propuesta.

Firefox 29 ya incluye soporte a will-change después de arreglar un bug, eso sí, desactivada por defecto. Debes ir a su configuración y activarla en layout.css.will-change.enabled. En Firefox OS ya está activada.

Chrome, o mejor dicho Blink, ya tiene activada will-change en las 5 plataformas (Windows, Mac, Linux, Chrome OS and Android).

Microsoft lo está considerando.

Una pequeña opinión

Vale. Está muy bien. Pero creo que este tema debería ser completamente ajeno a Css y por lo tanto al escribano de Css. Es una cuestión de "rendimiento y trabajo" del navegador y compete en exclusiva a sus desarrolladores hacer que sus productos sean lo mejor.

¿Qué razón hay para que si el navegador al leer la hoja de estilos se encuentra con una declaración que involucra una propiedad suceptible de ser declarada en la propiedad will-change necesite del aviso del posible cambio para preparar el terreno y no lo prepara ya sin más advertecias?

¿Cuántos escribanos de Css van a ayudar al navegador usando la propiedad will-change?

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso