Will-change - Propriété CSS

will-change

Résumé des caractéristiques de la propriété will-change

Description rapide
Indique les propriétés qui risquent d'être modifiées ou animées, afin que le navigateur puisse optimiser son traitement.
Statut
Standard
S'applique à
Tous les éléments.
Utilisable sur
HTML
Valeurs prédéfinies
auto | contents | scroll-position
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété will-change ne peut pas être animée.
Module W3C
Module CSS - Will change - Niveau 1
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de will-change.

will-change - Syntax DiagramSyntax diagram of the will-change CSS property. See stylescss.free.fr for details. auto auto scroll-position scroll-position contents contents property property , ,will-change:;will-change:;
Schéma syntaxique de la propriété will-change
Les liens du schéma donnent accès à plus de détails

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.

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

Valeurs communes à toutes les propriétés :

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.

Animation de la propriété 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.

will-change :

Prise en charge par les navigateurs (compatibilité).

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.
95%

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

Historique de la propriété will-change.

  • Module CSS - Will change - Niveau 1

    Présentation de la propriété unique du module will-change.
    WD
    29 Avril 2014
    Document de travail.
    CR
    03 Décembre 2015
    Candidat à la recommandation.
    PR
    REC

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 CSS Will Change Module Level 1 et c'est d'ailleurs la seule propriété décrite dans le module.