Will-change - Propriété CSS

Schéma de la syntaxe de will-change.

Description des termes utilisés sur le schéma :

• property est le nom d'une propriété, spécifié sans apostrophes ni guillemets.
• La syntaxe peut être répétée plusieurs fois en séparant chaque occurrence par une virgule.

Description de la propriété will-change.

will-change prévient le navigateur que l'élément risque d'être modifié, soit son contenu, soit sa position, soit n'importe laquelle de ses propriétés. L'idée est que le navigateur puisse optimiser son traitement en fonction de cette modification prévue.

L'utilisation de cette propriété est délicate. Le mieux est de ne s'en servir que sur les pages qui présentent des lenteurs, et de tester si elle améliore effectivement les choses. En effet un usage trop intensif, ou inapproprié de will-change peut avoir l'effet inverse de celui recherché, c'est à dire une dégradation des performances.

De plus, la propriété peut avoir des effets de bord indésirables. En particulier elle peut changer l'ordre d'empilement des éléments, ce qui fait que des éléments qui étaient en dessous peuvent se retrouver au dessus.

Valeurs pour will-change.

• will-change: auto;

  Valeur par défaut. Aucune évolution n'est prévue pour cet élément : le navigateur applique son traitement habituel.

• will-change: scroll-position;

  La position de l'élément est susceptible d'être modifiée ou animée.

• will-change: contents;

  Le contenu de l'élément est susceptible de changer.

• will-change: margin-left, width;

  Les propriétés énumérées sont susceptibles d'être modifiées ou animées.

• will-change: initial; (auto) will-change: inherit; will-change: revert; will-change: revertLayer; will-change: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de will-change.

La propriété will-change ne peut pas faire l'objet d'une animation.

Exemple interactif avec la propriété will-change.

Ce simulateur met en évidence un des effets secondaires de will-change : l'élément vert est normalement au dessus de l'élément bleu (il vient après dans le code HTML). will-change appliqué à l'élément bleu met ce dernier au premier plan, en vue d'une transformation future.

Compatibilité des navigateurs avec will-change.

Bien que très technique, cette propriété est bien gérée par les navigateurs actuels, comme le montre le tableau des compatibilités ci-dessous.

1

Propriété
will-change

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Chrome

Edge

Internet Explorer

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété will-change.

• Module CSS - Will change - Niveau 1

  Concernant will-change. Présentation de la propriété unique du module will-change.
  

  29 Avril 2014

  Document de travail.

  

  03 Décembre 2015

  Candidat à la recommandation.

  

  

Voir aussi.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété will-change fait partie du module Module CSS - Will change - Niveau 1 et c'est d'ailleurs la seule propriété décrite dans le module.

Propriétés :