2022 年 9 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
9 月に Firefox 105、Chrome 106、Safari 16 が安定版になりました。9 月の投稿には、ウェブ プラットフォームに関する興味深い情報が多数盛り込まれています。
コンテナクエリ
Safari 16 では、コンテナクエリのサポートが追加されています。この機能は、現在 2 つのエンジンで利用できます。Safari では、新しいコンテナクエリ単位のサポートも追加されています。
グリッド レイアウト
Safari で、grid-template-columns と grid-template-rows の subgrid 値がサポートされるようになりました。グリッド アイテムでもあるグリッドでこの値を使用すると、新しいトラックを定義する代わりに、グリッドは親の分岐点を使用することになります。
また、Safari のグリッド レイアウトには、グリッド トラックをアニメーション化する機能があります。
対応ブラウザ
- 107
- 107
- 66
- 16
Safari では、offset-path、overscroll-behavior、text-align-last、resolution メディアクエリのサポートも追加されました。
エンコード API
Firefox 105 は、Encoding API の TextDecoderStream インターフェースと TextEncoderStream インターフェースをサポートしています。
新しい Intl API
Intl API はローカライズされた形式でコンテンツを表示するのに役立ちます。Chrome 106 では新しい数値形式の機能が数多く追加されています。
他の国際 API と同様に、この場合もシステムに負担が移るため、複雑なローカライズ コードをすべてのユーザーに配布したり、維持したりする必要がなくなります。この API は、通貨記号の位置、日付と時刻の書式設定、リストのコンパイル方法を認識します。
showPicker() メソッド
Safari 16 には showPicker() メソッドが含まれており、日付、時刻、色、ファイルのブラウザ選択ツールを表示する正規の方法が含まれています。詳しくは、日付、時刻、色、ファイルのブラウザ選択ツールを表示するをご覧ください。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。今月新たにベータ版としてリリースされたのは、Chrome 107、Safari 16.1、Firefox 106 です。
Chrome 107 には、グリッド トラックをアニメーション化する機能が搭載されています。今月 Safari にもリリースされました。Chrome でリリースされると、3 つの主要なエンジンすべてでサポートされるようになります。
また、Chrome には、画面共有中に誤って必要以上の範囲に共有されるのを防ぐための機能が getDisplayMedia() に追加されています。
displaySurfaceオプションを使用すると、ウェブアプリで特定のディスプレイ サーフェス タイプ（タブ、ウィンドウ、スクリーン）を提供するよう指定できます。surfaceSwitchingオプションは、ユーザーが共有タブを動的に切り替えることを許可するかどうかを示します。selfBrowserSurfaceオプションを使用すると、ユーザーが現在のタブを共有しないようにできます。これにより、「鏡のホール」効果を回避できます。systemAudioオプションを使用すると、Chrome は関連性の高い音声キャプチャのみをユーザーに提示できます。
Safari 16.1 では、display: contents のアクセシビリティに対する追加修正、動的なビューポートの高さ（dvh）の単位に対する修正が行われ、テキスト フラグメントへのスクロールがサポートされるようになりました。