will-change

例

will-change を使用した最適化

近い将来に変更が予想される要素を最適化するには、will-change-scroll、will-change-contents、および will-change-transform ユーティリティを使用して、ブラウザに必要なアニメーションを実際に開始する前に準備するように指示します。

<div class="overflow-auto will-change-scroll">
  <!-- ... -->
</div>

これらのユーティリティは、要素が変更される直前に適用し、will-change-auto を使用して使用が終了したらすぐに削除することをお勧めします。

will-change プロパティは、**既知のパフォーマンスの問題**に対処する際の最終手段として使用することを目的としています。これらのユーティリティを過度に使用したり、単にパフォーマンスの問題を予想して使用したりすることは避けてください。ページが実際にはパフォーマンスが低下する可能性があります。

カスタム値の使用

以下を使用してください will-change-[<value>] 構文 will-change プロパティを設定するには完全にカスタムの値に基づいて

<div class="will-change-[top,left] ...">
  <!-- ... -->
</div>

CSS 変数の場合は、以下も使用できます will-change-(<custom-property>) 構文

<div class="will-change-(--my-properties) ...">
  <!-- ... -->
</div>

これは単なるショートハンドです will-change-[var(<custom-property>)] var() 関数を自動的に追加するものです。