CSS will-change-Eigenschaft

Die will-change-Eigenschaft gibt dem Browser einen Hinweis darauf, wie sich ein Element in naher Zukunft voraussichtlich ändern wird. Optimierungen sollten vor dem Eintreten der Änderung eingerichtet werden.

Die will-change-Eigenschaft wurde ursprünglich als will-animate vorgeschlagen, bevor sie umbenannt wurde.

Die will-change-Eigenschaft ermöglicht es Browsern, das Layout, das Rendering (Paint) oder mehrere CSS-Eigenschaften eines Elements zu optimieren. Die Angabe vieler Eigenschaften verbessert jedoch nicht die Leistung.

Die Werte müssen durch Kommas getrennt sein. Die will-change-Eigenschaft kann folgende Werte annehmen: auto, <custom-ident>, initial, inherit oder unset.

Warnung
Diese Eigenschaft sollte mit Vorsicht verwendet werden. Verschiedene Browser gehen unterschiedlich mit dieser Eigenschaft um, und eine übermäßige Nutzung kann dazu führen, dass der Browser sie ignoriert. Eine zu starke Nutzung kann zudem unnötige Compositing-Ebenen erzwingen, was den Speicherverbrauch erhöht und die Leistung verschlechtert.

Richtige Verwendung der will-change-Eigenschaft:

Die will-change-Eigenschaft sollte nicht auf zu viele Elemente angewendet werden. Eine übermäßige Nutzung kann die Seitenladezeit verlangsamen und übermäßige Ressourcen verbrauchen.
Bei der Verwendung der will-change-Eigenschaft ist es besser, sie über ein Skript vor und nach der Änderung hinzuzufügen und zu entfernen.
Die will-change-Eigenschaft sollte nicht für vorzeitige Optimierungen verwendet werden. Es ist nicht notwendig, will-change zu Elementen hinzuzufügen, wenn eine Seite gut performt. Diese Eigenschaft sollte als letzter Ausweg zur Behebung bestehender Leistungsprobleme dienen.
Der Browser benötigt Zeit, um Optimierungen anzuwenden. Die will-change-Eigenschaft dient dazu, den Browser im Voraus über Eigenschaften zu informieren, die sich voraussichtlich ändern werden.
Die will-change-Eigenschaft kann die visuelle Darstellung eines Elements beeinflussen, wenn sie mit Werten verwendet wird, die einen Stapelkontext (Stacking Context) erzeugen.

Anfangswert	auto
Gilt für	Alle Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS Transitions Module Level 1
DOM-Syntax	`object.style.willChange = "transform";`

Hinweis: In JavaScript verwendet der Eigenschaftsname camelCase (willChange), während die CSS-Eigenschaft Bindestriche verwendet (will-change).

Syntax

CSS will-change-Werte

css

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

Beispiel für die will-change-Eigenschaft:

CSS will-change-Codebeispiel

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 »

Werte

Wert	Beschreibung
auto	Standard-Browseroptimierungen sollten angewendet werden.
`<custom-ident>`	Gibt die CSS-Eigenschaft an, die sich in naher Zukunft voraussichtlich auf dem Element ändert oder animiert wird. Wenn es sich um eine Shorthand-Eigenschaft handelt, werden die Änderungen auf alle Longhand-Eigenschaften erweitert.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.
unset	Setzt die Eigenschaft auf ihren vererbten Wert oder ihren Anfangswert zurück, je nach Eigenschaft.

CSS will-change-Eigenschaft ​

Richtige Verwendung der will-change-Eigenschaft: ​

Syntax ​

Beispiel für die will-change-Eigenschaft: ​

Werte ​

Praxis ​

CSS will-change-Eigenschaft

Richtige Verwendung der will-change-Eigenschaft:

Syntax

Beispiel für die will-change-Eigenschaft:

Werte

Praxis