Propriété CSS will-change

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>

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.

Support de Navigateurs

36.0+ 36.0+ 9.1+ 24.0+


Trouvez-vous cela utile?

Articles Associées