2023年8月のWebプラットフォームの新機能

このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。

以下の内容は、2023年8月31日に公開された記事「New to the web platform in August」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。

2023年8月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。

安定版ブラウザのリリース

2023年8月にはFirefox 116、Firefox 117、Safari 16.6とChrome 116が安定版となりました。これがWebプラットフォームにとって何を意味するか、見ていきましょう。

Firefox 116 は、Android を除くすべてのプラットフォームにおいて、Audio Output Devices APIをサポートしました。このAPIにより、Webアプリケーションは、ブラウザやOSのデフォルトで指定されたものを使用する代わりに、許可されたBluetoothヘッドセットやスピーカーフォン、またはその他のデバイスに音声出力をリダイレクトすることができます。

Chrome 116ではCSS Motion Pathがサポートされ、グラフィカルオブジェクトを開発者が指定したパスに沿ってアニメーションさせることができます。これにより、translate()関数で用いられる標準的な直交座標ではない、極座標を使用した位置決め（ray()関数を使用）や、定義されたパスに沿った要素のアニメーション化など、多くの強力で新しい座標変換が可能になります。これにより、複雑で美しい2次元の空間遷移を簡単に定義できるようになります。パスはcircle()、ellipse()、rect()、inset()、xywh()、polygon()、ray()、url()で指定できます。

またChrome 116では、Document Picture-in-Picture APIが追加されました。このAPIは、任意のHTMLElementsを含む、常に前面に表示されるウィンドウを可能にします。これは、HTMLVideoElementをピクチャー・イン・ピクチャー（PiP：Picture-in-Picture）のウィンドウに含めることしかできない、既存のHTMLVideoElement APIを拡張したものです。

Firefox 117はCSSネスティングとネスティングセレクタの&をサポートしています。これにより、あるスタイルルールを別のスタイルルールの入れ子にすることができます。これにより、CSSネスティングは相互運用可能になりましたが、SafariとChromeは古い仕様を実装しており、タイプセレクタの入れ子を許可していません。Firefoxは、ネスティングセレクタの&を必要としない、新しい仕様を実装しています。両仕様に基づく例を、Using CSS Nestingで見ることができます。

ベータ版ブラウザのリリース

ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 118とChrome 117です。Safari 17のベータ版は更新が続いています。これらのリリースは、プラットフォームに多くの素晴らしい機能をもたらします。詳細はリリースノートをご覧ください。ここでは、ハイライトをいくつかご紹介します。

Firefoxの次期リリースについては、まだ多くの情報が公開されていません。しかし、Chrome 117はいくつかの素晴らしい機能の実装を約束しています。例えば、アニメーションの開始や終了にまつわる新しいCSS機能が挙げられます。

Chrome 117ではgrid-template-columnsとgrid-template-rowsの値でsubgridがサポートされ、この念願の機能が相互運用可能になりました。

またChrome 117では、Object.groupByとMap.groupByの静的メソッドによるJavaScript配列のグループ化が可能になりました。

Safari 17のベータ版ではPopover APIがサポートされ、popover属性が含まれました。