Propriété CSS will-change

❮ Précédent Suivant ❯

La propriété will-change donne une indication au navigateur sur la propension d'un élément à changer à l'avenir proche. Les optimisations doivent être mises en place avant qu'un élément est changé.

La propriété will-change était au début nommé will-animate.

La propriété will-change permet aux navigateurs de changer la position de défilement d'un élément, des contenus ou plus qu'une valeur des propriétés CSS. Cependant, beaucoup des propriétés n'auront aucun effet.

Les valeurs doivent être séparées par virgules. Mais n'appliquez pas la propriété will-change aux plusieurs éléments. Cela ne peut pas être l'une des valeurs suivantes: unset, initial, inherit, will-change, auto, scroll-position, ou contents.

La propriété will-change ne doit pas être utilisée à moins qu'un élément soit connu ou expecté à changer à l'avenir proche.

Will-change également influence sur l'apparence visuel des éléments.

Cette propriété doit être utilisée avec prudence. Les différents navigateurs utilisent cette propriété différement et la surutilisation peut ignorer cette propriété.

Valeur initiale	auto
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.willChange = "scroll-position";

Syntaxe

will-change: auto | scroll-position | contents | <custom-ident> | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété will-change</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>
      var circles= document.getElementsByClassName("circle blue");
      function update(t) {
        for (var i = 0; i < circles.length; i++) {
          var xpos = Math.sin(t/1000 + 1000*i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	L'optimisation standarde de navigateur doit être appliquée.
scroll-position	Spécifie que la position de défilement de l'élément sera animée à l'avenir.
contents	Spécifie que le contenu de l'élément sera animé à l'avenir.
<custom-ident>	Expecté à changer ou animer la propriété avec le nom donné à l'élément à l'avenir proche. Si la propriété est un raccourci, on s'attendra à ce que toutes les propriétés détaillées correspondantes soient animées ou changées.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.