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

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

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

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

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

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

CSSのdisplayプロパティの2値構文

Chrome 115では、CSSのdisplayプロパティで2値構文がサポートされました。つまり、display: flexはdisplay: block flexに、display: blockはdisplay: block flowになります。単一の値はレガシーキーワードとして維持されますが、2値構文は現在3つの主要なエンジンで利用可能です。

Scroll-driven animations

またChrome 115では、Web Animations仕様に対してScrollTimelineとViewTimelineが追加されました。これらは、CSSとJavaScriptによるスクロール駆動アニメーションを可能にします。

Privacy Sandbox APIs

Chrome 115にはPrivacy Sandbox relevance and measurement APIsが含まれました。これにはTopics、Protected Audience、Attribution Reporting、Private Aggregation、Shared Storage、Fenced Framesの各APIが含まれます。

これらのAPIについてより理解するには、Privacy Sandboxのデモをご覧ください。

animation-compositionプロパティ

Firefox 115がCSSのanimation-compositionプロパティをサポートしました。これに伴い、3つの主要エンジンすべてでanimation-compositionがサポートされました。詳しくは、Specify how multiple animation effects should composite with animation-compositionをご覧ください。

Arrayメソッド

Firefox 115によって相互運用性が達成されたものとして、ArrayとTypedArrayのメソッドもあります。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のデフォルトに設定されたデバイスの代わりに、Webアプリケーションは許可された 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を拡張したものです。