本文へスキップ
MameTechNews
フロントエンド

Firefox 159、スクロール連動のアニメーションとスコープ付き要素に対応

## POINTS

  • animation-timeline などで、スクロール位置や要素の見え方に合わせてアニメーションを進められる。
  • CustomElementRegistry() で別レジストリを作り、同じタグ名のカスタム要素を1ページに共存できる。
  • Sanitizer APIはパース中に不要な要素を除き、取り除く要素のコンストラクタは実行されない。

Firefox 159.0は10月27日にリリースチャネルへ出た。Webプラットフォーム側の変更で実務に効くのは、スクロールに連動するアニメーションと、スコープ付きのカスタム要素レジストリである。

スクロール連動アニメーションでは、CSSアニメーションとWeb Animations APIのアニメーションが、時間ではなくスクロールに沿って進む。コンテナのスクロール位置に合わせる方法と、要素が視野に入る度合いに合わせる方法がある。追加されるのは animation-timeline、scroll-timeline、view-timeline、animation-range の各プロパティと、ScrollTimeline、ViewTimeline のインターフェースである。スクロール量に応じた表示を、scrollイベントの手書きではなく宣言的に書けるようになる。

スコープ付きカスタム要素レジストリは、CustomElementRegistry() で作ったレジストリを、グローバルな window.customElements とは別に持てる。同じタグ名のカスタム要素を、1つのページの中で共存させられる。Web Componentsを複数の供給元から読み込むとき、名前の衝突をレジストリの分離で避けられる。

HTML Sanitizer APIは、マークアップをすべてパースしてから木を掃除するのではなく、パースしながら不要な要素と属性を除く。結果はほぼ同じだが、隣り合うテキストは複数のテキストノードに分かれず、1つにまとまる。取り除かれる要素のカスタム要素コンストラクタは走らない。setHTML() のようにサニタイズするAPIを使っているコードは、このノードのまとまり方の違いを見ておく。

対応するGPUでは、WebGLの EXT_clip_control と EXT_texture_mirror_clamp_to_edge、WebGL 2の EXT_texture_norm16 も使える。