CSS3

プロパティ

will-change

→●、mdn

未来のふるまいについてヒントを与える。

will-change プロパティは、ユーザー エージェントに描画ヒントを供する ― それは、作者が要素上で遂行するものと予期する変化の種類を言明する。これにより、ユーザー エージェントは、［その変化の滑らかな描画に必要とされる最適化］を早めに遂行しておけるようになり、作者が実際に、その特能を、変化させ／アニメートさせ、始めたときの“カクつき”を避けれるようになる。

will-change からの情報を利用する仕方は、ブラウザーごとに異なる。同じブラウザーであっても、時機によって利用する仕方が異なることすらある。例えば、ブラウザーは、要素に will-change: transform; が指定されたときには、要素を専用の“GPU 層”に昇格させるが、それが宣言された要素が多過ぎるときは、GPU メモリーが枯渇しないよう、それを避けることもある。

auto

特に意図は無いことを表出する ― ユーザー エージェントは、通常どおり行う経験則／最適化があれば、それを適用するべきである。

<animateable-feature>#

＝scroll-position | contents | <custom-ident>

scroll-position

［作者は、近い未来に、要素のスクロール位置を［アニメートさせる／変化させる］ものと予期している］ことを指示する。

注意： 例えば、ブラウザは、スクロール可能な要素上の［“スクロールウィンドウ”内にある内容と、そのウィンドウをはみ出る一部の内容］のみを描画することが多い ― 描画の省力化によるメモリー／時間の節約と、スクロール時の見栄えとを、天秤にかけながら。この値は、［スクロールがより、長く／速く、行われても滑らかになるよう、描画する内容の範囲をスクロール ウィンドウの周囲から延長すべきである］ことをブラウザに通達する。

contents

［作者は、近い未来に 要素の何らかの内容を［アニメートさせる／変化させる］ものと予期している］ことを指示する。

注意： 例えば、ブラウザは、要素の描画状態を時間越しに“キャッシュする”ことが多い ― 大抵の場合、要素はさほど頻繁には変化しないか、変化するとしても位置に限られるので。しかしながら、要素の内容が、断続的に変化する、場合、このキャッシュを生産して保守することは、時間の浪費になる。この値は、［要素描画のキャッシュ処理を抑制するか、全くキャッシュせず毎回 要素を一から描画し直す］べきであることをブラウザーに通達する。

この値は主に、［［要素内容のある面が秒間に何度も変化する］ような、JS に基づく内容のアニメーション］に対する、ブラウザーによる最適化を助けるためにある。ブラウザーによるこの種の最適化は、宣言的アニメーションに対しては、すでに可能な限り自動的に行われている。【そのように規定されてもいる。】

注記： この値は、およそ それが宣言された要素を根とする下位ツリー全体に適用されることに注意 ― それは、ブラウザーに、［どの子孫であれ、何らかの仕方で変化するもの］を織り込むべきであることを指示するので。これを利用すると、文書における要素の“地位が高められる”結果、ページの処理能を引っ張る要因になり得る。よって、可能な限り文書の少ない部分を包含するような、文書ツリーの“末端”に近い要素のみに利用することを勧める。

<custom-ident> ○

所与の <custom-ident> が、ある組み込みの CSS プロパティ ― 以下、プロパティ、と記す ― の名前に ASCII 大小無視で合致する場合、［作者は、近い未来に 要素上の プロパティ を［アニメートさせる／変化させる］ことを予期している］ことを指示する。プロパティ が略式プロパティである場合、対応するすべての下位プロパティに対する予期を指示する。

注意： 例えば、will-change: background; を設定することは、background の各種 下位プロパティすべてに渡り、will-change: background-image, background-position, ...; を設定するのと同じことになる。

ここでの <custom-ident> 生成規則からは、<custom-ident> から通常どおり除外されるキーワードに加えて、次のキーワードも除外される： will-change、none、all、auto、scroll-position、contents

注記： ほとんどのプロパティは、指定されたとしても効果はない ― ユーザー エージェントは、ほとんどのプロパティに対しては、その変化に際し、特別な最適化は遂行しないので。指定しても、依然として安全であるが ― それは、単純に効果がないことになる。

プロパティ としてカスタム プロパティが指定されても、効果を及ぼしてはならない ― すなわち、カスタム プロパティを通して生じる効果は、［下に与える、［プロパティ が、何かを生じさせるような非初期値をとり得ること］を条件とする規則］には、織り込まれない。

注記： プロパティとして認識されない値を指定しても申し分ない ― それは、単純に効果がないことになる。これにより、一部のユーザー エージェントにしか存在しない新たなプロパティを、安全に ― そのプロパティを知らない他のユーザー エージェントには影響することなく ― 指定できるようになる。

注意： 例えば、非初期値に設定された transform を伴う要素に対する、ブラウザーによる取り扱いは、通常の要素と大きく異なることが多い ― たぶん、transform が生産し得るような変形の類を、専用の“GPU 層”などの仕組みを利用して、より容易に／より素早く、描画するために。値 transform は、［古い／新たな層の再描画に伴う遅延を避けるため、要素の変形が開始されるに先行して即時に、要素を、その専用の層に昇格させるべきである］ことをブラウザーに通達する。

プロパティ がとり得る非初期値として：

• 要素に積層文脈を作成させる値がある場合、要素に積層文脈を作成させるものとする。
• 絶対的に位置された要素（固定的に位置されたものも含む）用に包含ブロックを生成させる値がある場合、そのような要素があるときには、それ用の包含ブロックを生成させるものとする。
• 要素の描画を違えさせる値がある場合（例： テキスト描画に異なる【より高品質な】アンチエイリアシング方式を利用させるなど）、ユーザー エージェントは、後でプロパティが変化したときに描画が急に違えられるのを避けるため、それで代替する描画を利用するべきである。【そのような値が複数あって（例： image-rendering ）、どれが“最高”か自明でない場合、どの値用の描画を利用することになる？】

注意： 例えば、要素上の opacity に 1 未満の値が設定された場合、要素は積層文脈を作成する。したがって、要素上に will-change: opacity を設定したときも、積層文脈が作成されることになる ― opacity の値が 現在は 1 に等しいとしても。

要素上に will-change プロパティが指定されても、上で指定された 積層文脈／包含ブロック、の作成を超えるような、直接的な効果はない。それはもっぱら、ユーザー エージェント向けの描画ヒントである ― 一定の型の変化に対し、その変化が実際に生じ始める前に、高価になり得る最適化を設定しておけるようにするための。

テスト