CSS - Propriété will-change
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.
- will-change:
initial;La valeur initiale est
auto. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
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é).
Afficher le tableau de compatibilité (informations fournies par canIuse.com).