will-change - Propriété CSS
Résumé des caractéristiques de la propriété will-change
auto
| contents
| scroll-position
auto
will-change
ne peut pas être animée.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
.
p
est le nom d'une propriété.
La syntaxe peut être répétée plusieurs fois en séparant les occurrences par une virgule.
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
; will-change:inherit
; will-change:revert
; will-change:revert-layer
; will-change:unset
;La valeur initiale est :
.auto
Animation de la propriété will-change
.
La propriété will-change
ne peut pas faire l'objet d'une animation.
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.
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.
will-change