Va changer - Astuces CSS | CSS Almanach 2025

La will-changepropriété en CSS optimise les animations en indiquant au navigateur quelles propriétés et quels éléments sont sur le point d'être manipulés, augmentant potentiellement les performances de cette opération particulière.

Cette propriété a quatre valeurs:

auto: les optimisations standard du navigateur seront appliquées.
scroll-position: indique que la position de défilement de l'élément sera animée dans un futur proche afin que le navigateur se prépare pour le contenu qui n'est pas visible dans la fenêtre de défilement d'un élément.
contents: le contenu d'un élément est censé changer, donc le navigateur ne mettra pas en cache le contenu de cet élément.
: toute propriété définie par l'utilisateur telle que transformou à opacitylaquelle nous voulons will-changeêtre appliqués.

Nous pouvons informer le navigateur qu'un changement est sur le point d'avoir lieu dans la transformpropriété comme suit:

.element ( will-change: transform; )

Ou si nous voulons déclarer plusieurs valeurs, nous pouvons utiliser une liste séparée par des virgules telle que:

.element ( will-change: transform, opacity; )

will-changeCependant, il est important de ne pas abuser de la propriété car cela pourrait, en fait, rendre la page moins performante (notez qu'il n'y a pas de allvaleur pour cette propriété pour une bonne raison). Par conséquent, MDN recommande que la propriété soit utilisée en dernier recours pour les problèmes de performances existants plutôt que ceux que vous prévoyez de rencontrer. Et, lors de son utilisation, il est recommandé de basculer will-changejuste avant qu'un élément ou une propriété ne change, puis de le désactiver à nouveau peu de temps après la fin du processus.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.