2023 年 7 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2023 年 7 月に、Firefox 115 と Chrome 115 が安定版になりました。この投稿では、それがウェブ プラットフォームにとって何を意味するのかを見ていきます。
CSS の display プロパティに複数の値が指定されている
Chrome 115 では、CSS display プロパティに複数の値が設定されています。つまり、display: flex は display: block flex に、display: block は display: block flow になります。1 つの値は従来のキーワードとして維持されていますが、現在は 3 つの主要エンジンでも使用できるようになっています。
対応ブラウザ
- 115
- 115
- 70
- 15
スクロールドリブン アニメーション
また、Chrome 115 では、Web Animations の仕様に ScrollTimeline と ViewTimeline の拡張機能が追加されています。これにより、CSS や JavaScript によるスクロールドリブン アニメーションが可能になります。
プライバシー サンドボックス API
Chrome 115 でリリースされたプライバシー サンドボックスの関連性と測定に関する API。これには、Topics API、Protected Audience API、Attribution Reporting、Private Aggregation API、Shared Storage API、Fenced Frames API が含まれます。
これらの API の詳細については、プライバシー サンドボックスのデモをご覧ください。
animation-composition プロパティ
Firefox 115 は CSS の animation-composition プロパティをサポートしています。animation-composition が 3 つの主要エンジンすべてでサポートされるようになりました。詳しくは、アニメーション合成で複数のアニメーション効果を合成する方法を指定するをご覧ください。
配列メソッド
また、Array と TypedArray のメソッドのセットが Firefox 115 との相互運用性を実現しました。Array.toReversed()、Array.toSorted()、Array.toSpliced()、Array.with()、TypedArrays.toReversed()、TypedArrays.toSorted()、TypedArrays.with() は、シャローコピーされた要素を含む新しい配列を返します。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。新しいベータ版は Firefox 116 と Chrome 116 です。Safari 17 と Safari 16.6 ベータ版は現在も進行中です。これらのリリースは、プラットフォームに多くの優れた機能をもたらします。主な内容については、リリースノートをご覧ください。
Firefox 116 は、Android を除くすべてのプラットフォームで Audio Output Devices API をサポートしています。この API を使用すると、ウェブ アプリケーションは、ブラウザや基盤となる OS のデフォルトを使用しなくても、許可された Bluetooth ヘッドセット、スピーカーフォン、またはその他のデバイスにオーディオ出力をリダイレクトできます。
Chrome 116 には CSS Motion Path が含まれ、デベロッパーが指定したパスに沿ってグラフィカル オブジェクトをアニメーション化できます。これにより、translate() 関数で使用される標準の直交座標ではなく、（ray() 関数で）極座標を使用して配置したり、定義されたパスに沿って要素をアニメーション化したりするなど、多くの強力な新しい変換が可能になります。これにより、複雑で美しい 2D 空間遷移を簡単に定義できるようになります。パスは circle()、ellipse()、rect()、inset()、xywh()、polygon()、ray()、url() として指定できます。
同じく Chrome 116 には Document Picture-in-Picture API が搭載されています。これにより、任意の HTML 要素を挿入できる常時オンウィンドウが有効になります。これは、既存の HTMLVideoElement API を拡張したもので、HTMLVideoElement をピクチャー イン ピクチャー（PIP）ウィンドウに配置できるようにするものです。