Propriété CSS will-change
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété CSS will-change permet d'optimiser les animations en fournissant un indice au navigateur sur la manière dont un élément est censé changer.
Syntaxe
/* Valeurs avec un mot-clé */
will-change: auto;
will-change: scroll-position;
will-change: contents;
/* Valeurs de type <custom-ident> */
will-change: transform;
will-change: opacity;
/* Plusieurs valeurs */
will-change: left, top;
/* Valeurs globales */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;
Valeurs
La valeur est soit auto, soit une ou plusieurs valeurs <animatable-feature> séparées par des virgules :
auto-
Indique que le navigateur applique les heuristiques et les optimisations qu'il utilise habituellement. Il s'agit de la valeur par défaut.
<animatable-feature>-
Représente l'une des valeurs suivantes :
scroll-position-
Définit que la position de défilement de l'élément est susceptible de changer prochainement, ce qui indique que le navigateur peut optimiser le rendu du contenu débordant.
contents-
Définit que le contenu de l'élément, y compris tous les éléments de son sous-arbre, est susceptible de changer prochainement, ce qui indique que le navigateur peut mettre l'élément en cache de façon moins agressive.
<custom-ident>-
Définit le nom d'une propriété CSS, comme
<ident>, dont la valeur est animée ou est autrement susceptible de changer prochainement. Si l'identifiant (<ident>) défini représente une propriété raccourcie, tous ses composants détaillés sont appliqués. La valeur ne peut pas êtrewill-change,none,all,auto,scroll-positionoucontents.
Description
La propriété will-change fournit au navigateur une indication de rendu qui précise quelles propriétés sont susceptibles d'être animées ou autrement modifiées. Cela permet aux navigateurs de créer les optimisations de rendu nécessaires pour obtenir des changements plus fluides et éviter la saccade.
La propriété will-change vise à améliorer les performances du rendu. Cette propriété peut améliorer les performances des éléments qui font fréquemment l'objet de repeints et de redistributions, ou de ceux qui utilisent des propriétés telles que box-shadow et clip-path pour créer des effets visuels complexes.
Appliquer la propriété à un élément applique la valeur à l'ensemble du sous-arbre de l'élément, ce qui indique que n'importe lequel de ses descendants peut changer. Pour cette raison, appliquer une valeur autre que auto à une grande section, telle que <body>, peut en réalité nuire aux performances d'une page. Limitez plutôt l'utilisation de cette propriété aux éléments profondément imbriqués, qui contiennent une aussi petite partie du document que possible.
Attention :
will-change est conçu pour être utilisé en dernier recours afin d'aider à la résolution de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.
Il est parfois difficile de bien utiliser cette propriété :
- Il ne faut pas appliquer
will-changeà de trop nombreux éléments. Le navigateur essaie déjà d'optimiser de nombreuses choses. Certaines de ces optimisations sont fortement couplées avecwill-changepour utiliser les ressources de l'ordinateur. Aussi, siwill-changeest « trop » utilisé, cela peut ralentir la page et consommer intensivement les ressources. - à utiliser avec parcimonie. Normalement, le navigateur essaie d'appliquer les optimisations dès que possible afin de revenir au plus vite dans un état normal. En revanche, en utilisant
will-changedans la feuille de style, on indique que les éléments ciblés vont bientôt changer et le navigateur conserve les optimisations en cours beaucoup plus longtemps si la propriété est maintenue. Il est donc conseillé d'activer et de désactiverwill-changede façon pertinente grâce à du script avant et après le changement concerné. - Ne pas « sur-optimiser » avec
will-change. Si votre page fonctionne correctement, n'ajoutez pas la propriétéwill-changesur certains éléments uniquement pour gagner un peu de vitesse.will-changeest conçu pour être utilisé en dernier ressort afin de régler les problèmes de performances existants. En utilisantwill-changetrop souvent, cela consomme plus de mémoire, complexifie le rendu de la page pour le navigateur (qui se prépare au changement). En bref, cela réduit les performances de la page. - Laisser le temps Ã
will-changepour qu'il fonctionne. Cette propriété est conçue pour permettre aux auteur·ice·s d'indiquer à l'agent utilisateur les propriétés qui vont probablement changer afin que le navigateur puisse optimiser en avance de phase. Il est donc important de laisser le temps au navigateur d'appliquer ces opérations pour que l'effet obtenu soit bénéfique. Pour cela, mieux vaut donc prévoir légèrement avant le changement que celui-ci a lieu et alors modifierwill-changeen prévision. - Sachez que
will-changepeut modifier l'apparence des éléments lorsqu'il est utilisé avec des propriétés qui créent des contextes d'empilement (par exemplewill-change: opacity), car le contexte d'empilement est créé au préalable.
Animations
Si vous appliquez will-change pour améliorer les animations, ajoutez la propriété avant le début de l'animation, et non dans les définitions d'animation @keyframes. Les propriétés animées sont déjà incluses dans will-change, il n'est donc pas nécessaire de les y ajouter.
Par une feuille de style
Il peut être approprié d'inclure will-change dans votre feuille de style pour une application qui effectue des changements de pages lors de la pression de touches, comme un album ou une présentation de diapositives où les pages sont grandes et complexes. Cela permet au navigateur de préparer la transition à l'avance et de permettre des transitions rapides entre les pages dès que la touche est pressée. Mais utilisez cette propriété avec prudence directement dans les feuilles de style. Elle peut amener le navigateur à conserver l'optimisation en mémoire beaucoup plus longtemps que nécessaire.
.slide {
will-change: transform;
}
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
will-change =
auto |
<animateable-feature>#
<animateable-feature> =
scroll-position |
contents |
<custom-ident>
Exemples
Exemple simple
Cet exemple démontre l'application de base de la propriété CSS will-change.
CSS
Nous utilisons CSS pour appliquer la propriété will-change à #element, fournissant un indice au navigateur que les valeurs des propriétés transform et opacity sont animées ou autrement modifiées dans un avenir proche.
#element {
will-change: transform, opacity;
}
Par un script
Cet exemple montre comment appliquer la propriété will-change lorsque cela est nécessaire et supprimer les optimisations une fois terminé en utilisant JavaScript, ce qui est généralement la manière dont will-change doit être appliquée.
JavaScript
Nous utilisons JavaScript pour ajouter la propriété will-change à #element lorsque l'élément est survolé en utilisant l'évènement mouseenter. Définir will-change sur transform, opacity indique au navigateur d'optimiser les changements des propriétés transform et opacity. Lorsque l'évènement animationend se produit, notre script définit la valeur sur auto.
const el = document.getElementById("element");
// On applique will-change quand la souris/curseur
// pointeur/stylet passe au-dessus de l'élément
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);
function hintBrowser() {
// On liste les propriétés sujettes au changement
// lors de l'animation
this.style.willChange = "transform, opacity";
}
function removeHint() {
this.style.willChange = "auto";
}
Spécifications
| Spécification |
|---|
| CSS Will Change Module Level 1 # will-change |