Propriété CSS will-change

La propriété will-change donne au navigateur un indice sur la manière dont un élément est censé changer dans un avenir proche. Les optimisations doivent être mises en place avant que le changement ne se produise.

La propriété will-change a été initialement proposée sous le nom de will-animate avant d'être renommée.

La propriété will-change permet aux navigateurs d'optimiser la mise en page, le rendu ou plusieurs propriétés CSS d'un élément. Cependant, spécifier de nombreuses propriétés n'améliorera pas les performances.

Les valeurs doivent être séparées par des virgules. La propriété will-change peut prendre les valeurs suivantes : auto, <custom-ident>, initial, inherit ou unset.

WARNING

Cette propriété doit être utilisée avec prudence. Les différents navigateurs gèrent cette propriété différemment, et son utilisation excessive peut amener le navigateur à l'ignorer. Une surutilisation peut également forcer la création de calques de composition inutiles, augmentant l'utilisation de la mémoire et dégradant les performances.

Utilisation appropriée de la propriété will-change :

La propriété will-change ne doit pas être appliquée à trop d'éléments. Une surutilisation peut ralentir la vitesse de chargement de la page et consommer des ressources excessives.
Lors de l'utilisation de la propriété will-change, il est préférable de l'ajouter et de la supprimer via un script avant et après la modification.
La propriété will-change ne doit pas être utilisée pour une optimisation prématurée. Il n'est pas nécessaire d'ajouter will-change aux éléments si une page fonctionne bien. Cette propriété doit être utilisée en dernier recours pour résoudre des problèmes de performances existants.
Le navigateur a besoin de temps pour appliquer les optimisations. La propriété will-change est destinée à informer le navigateur à l'avance des propriétés susceptibles de changer.
La propriété will-change peut affecter l'affichage visuel d'un élément lorsqu'elle est utilisée avec des valeurs qui créent un contexte d'empilement.

Valeur initiale	auto
S'applique à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS Transitions Module Level 1
Syntaxe DOM	`object.style.willChange = "transform";`

Remarque : En JavaScript, le nom de la propriété utilise la notation camelCase (willChange), tandis que la propriété CSS utilise des tirets (will-change).

Syntaxe

Valeurs CSS will-change

css

will-change: auto | <custom-ident> | initial | inherit | unset;

Exemple de la propriété will-change :

Exemple de code CSS will-change

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .circle {
        width: 50px;
        height: 50px;
        transform: translate(50px, 0px);
        border-radius: 30px;
      }
      .circle.blue {
        background: #1c87c9;
        will-change: transform;
      }
      .circle.green {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Will-change property example</h2>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <script>
      const circles = document.getElementsByClassName("circle blue");
      function update(t) {
        for (let i = 0; i < circles.length; i++) {
          const xpos = Math.sin(t / 1000 + 1000 * i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
auto	Une optimisation standard du navigateur doit être appliquée.
`<custom-ident>`	Spécifie la propriété CSS censée changer ou s'animer sur l'élément dans un avenir proche. Si la propriété est un raccourci, les modifications s'étendront à toutes ses propriétés détaillées.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.
unset	Réinitialise la propriété à sa valeur héritée ou à sa valeur initiale, selon la propriété.

Propriété CSS will-change ​

Utilisation appropriée de la propriété will-change : ​

Syntaxe ​

Exemple de la propriété will-change : ​

Valeurs ​

Pratique ​

Propriété CSS will-change

Utilisation appropriée de la propriété will-change :

Syntaxe

Exemple de la propriété will-change :

Valeurs

Pratique