2023 年 8 月に Stable 版と Beta 版のウェブブラウザにリリースされた興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2023 年 8 月に、Firefox 116、Firefox 117、Safari 16.6、Chrome 116 が安定版になりました。この投稿では、それがウェブ プラットフォームにとって何を意味するのかを見ていきます。
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）ウィンドウに配置できるようにするものです。
Firefox 117 は、CSS のネストと & のネスト セレクタをサポートしています。これにより、スタイルルールを別のスタイルルール内にネストできます。このため、CSS のネストの相互運用が可能ですが、Safari と Chrome は古いバージョンの仕様を実装しており、タイプセレクタのネストを許可していませんでした。Firefox は、& ネスト セレクタを必要としない新しいバージョンの仕様を実装しています。両方のバージョンの例については、CSS のネストの使用をご覧ください。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。新しいベータ版は Firefox 118 と Chrome 117 です。Safari 17 ベータ版は現在も進行中です。これらのリリースは、プラットフォームに多くの優れた機能をもたらします。主な内容については、リリースノートをご覧ください。
次の Firefox リリースに関する情報は、まだ多くありません。ただし、Chrome 117 ではいくつかの優れた機能が実装される予定です。たとえば、開始と終了のアニメーションを有効にする CSS の新機能があります。
grid-template-columns と grid-template-rows の subgrid 値は Chrome 117 で追加され、機能の相互運用が可能となりました。
また、Chrome 117 では、JavaScript 配列のグループ化と Object.groupBy 静的メソッドと Map.groupBy 静的メソッドが実装されています。
Safari 17 ベータ版には、Popover API のサポートを追加する popover 属性が含まれています。