2022 年 10 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
10 月に Firefox 106、Chrome 107、Safari 16.1 が安定版になりました。これがウェブ プラットフォームにとってどのような意味を持つのかを見ていきましょう。
グリッド トラックのアニメーション
Microsoft のコントリビューターの貢献のおかげで、Chrome で grid-template-columns と grid-template-rows の値を補間できるようになりました。つまり、グリッド レイアウトは、アニメーションや遷移の途中でスナップするのではなく、状態間をスムーズに遷移できます。
対応ブラウザ
- 107
- 107
- 66
- 16
getDisplayMedia() への追加
また、Chrome には、画面共有中に誤って必要以上の範囲に共有されるのを防ぐための機能が getDisplayMedia() に追加されています。
displaySurfaceオプションを使用すると、ウェブアプリで特定のディスプレイ サーフェス タイプ（タブ、ウィンドウ、スクリーン）を提供するよう指定できます。surfaceSwitchingオプションは、ユーザーが共有タブを動的に切り替えることを許可するかどうかを示します。selfBrowserSurfaceオプションを使用すると、ユーザーが現在のタブを共有しないようにできます。これにより、「鏡のホール」効果を回避できます。systemAudioオプションを使用すると、Chrome は関連性の高い音声キャプチャのみをユーザーに提示できます。
また、Safari 16.1 では getDisplayMedia がサポートされており、特定の Safari ウィンドウのキャプチャもサポートされています。
CSS のフォント技術と機能のサポートをテストする
Firefox には、@supports でクエリを行うために、font-tech() 関数と font-format() 関数が追加されています。次の例では、COLRv1 フォントのサポートをテストしています。
@supports font-tech(color-COLRv1) {
}
その他の例については、MDN をご覧ください。
テキスト フラグメントまでスクロール
Safari 16.1 では、テキスト フラグメントへのスクロールがサポートされており、特定のテキスト フラグメントが指定されている URL に移動できるようになりました。
AVIF サポート
Safari 16 は静止画 AVIF 画像をサポートしており、Safari 16.1 は macOS Ventura、iOS 16、および iPadOS 16 でのアニメーション AVIF 画像をサポートしています。
Safari のウェブプッシュ
Safari 16.1 では、macOS Ventura 上の Safari で Web Push がサポートされます。Push API と Notifications API を使用します。詳細については、Meet のウェブプッシュをご覧ください。Safari でウェブプッシュを利用できるようになったということは、3 つの主要なエンジンすべてで利用できるということです。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。今月新たにベータ版としてリリースされるのは、Chrome 108、Firefox 107、Safari 16.2 です。
Chrome 108 では、印刷時の CSS 断片化プロパティ break-before、break-after、break-inside の avoid 値がサポートされるようになりました。この値により、ブラウザは適用先の要素の前、後、または内部で互換性が損なわれないようにすることができます。たとえば、次の CSS では、改ページによって図が壊れないようにしています。
figure {
break-inside: avoid;
}
Chrome 108 では、置換された要素に対するオーバーフローの動作変更のロールアウトが開始されます。これにより、状況によっては視覚的な変化が生じることがあります。詳細と対処方法については、CSS 内の置換された要素のオーバーフローに関する変更の記事をご覧ください。
Android 版 Chrome で画面キーボードが表示されたときのレイアウト ビューポートの動作が変更されています。Android 版 Chrome で予定されているビューポートのサイズ変更動作の変更に備えるで詳細を確認し、来月の安定版リリースに備える方法をご確認ください。
また、Chrome には新しい CSS ビューポート ユニットもあります。これには、小（svw、svh、svi、svb、svmin、svmax）、大（lvw、lvh、lvi、lvb、lvmin、lvmax）、動的（dvw、dvh、dvi、dvb、dvmin、dvmax）、論理（vi、vb）単位が含まれます。これらのユニットは、Firefox と Safari にすでに実装されています。
Firefox 107 では、COLRv1 フォントのサポートが有効になり、Chrome とともにこのフォント技術がサポートされるようになりました。また、フォントについては、@supports を使用してクエリを機能させる font-tech() 関数と font-format() 関数のサポートが追加されています。
また、Firefox には contain-intrinsic-size のサポートも追加され、Chrome に組み込まれた 2 つのブラウザでこの機能がサポートされます。
Safari 16.2 Beta には、サイズ調整やスクロール スナップなど、CSS に関する多数の修正が含まれています。