8/25に登場するchrome85でリリースされる「CSS content-visibility property」がとても気になる

 8/25にChrome85のstableが登場するわけですが、ここでリリースされるCSS content-visibility property。web.dev側でも記事が登場しましたが、コンテンツ版のlazy loadのような動きをするようで、とても気になっています。web.devの記事に違いが載っています。

• display: none: hides the element and destroys its rendering state. This means unhiding the element is as expensive as rendering a new element with the same contents.
• visibility: hidden: hides the element and keeps its rendering state. This doesn't truly remove the element from the document, as it (and it's subtree) still takes up geometric space on the page and can still be clicked on. It also updates the rendering state any time it is needed even when hidden.

要するにdisplay : noneだとレンダリングプロセス自体が行われないし、visibility : hiddenの場合はhiddenの状態でレンダリング処理が走ってしまう。ということでon screenまでレンダリング処理が行われないcontent visibilityというものが登場したという理解。

Chrome85に関する記事の中では

非表示の場合、その要素の中身（サブツリーまたは置換された要素の中身）は描画やヒットテストが行われないまま、CSS の包含関係が適用されます。そのため、レンダリングが最適化されます。

ということで、イマイチ伝わってきませんがweb vitalsを意識すると、そのうち強く推奨されるようになるかもしれません。モバイル版Android Chrome85でもページの速度を表示するように出来るようですし。

あとprefers-reduced-dataとtrust token apiについても、かなり気にはなっている。。。特にtrust token apiは今後話題になるかポシャるのか。。。ただ話題にのぼるのはまだ先だろうなと思っています。