2022 年 10 月に安定版とベータ版のウェブブラウザに導入された興味深い機能をご紹介します。
ブラウザの安定版リリース
10 月には、Firefox 106、Chrome 107、Safari 16.1 が安定版になりました。ウェブ プラットフォームにとっての意味を見てみましょう。
グリッド トラックのアニメーション
Microsoft のコントリビューターの協力により、Chrome で grid-template-columns
値と grid-template-rows
値を補間できるようになりました。つまり、グリッド レイアウトは、アニメーションや遷移の途中でスナップするのではなく、状態間をスムーズに遷移できます。
対応ブラウザ
getDisplayMedia()
の追加
また、Chrome では getDisplayMedia()
にいくつかの追加が加えられ、スクリーン共有時の誤った共有の拡大を防ぐことが目的です。
displaySurface
オプションは、ウェブアプリが特定のディスプレイ サーフェス タイプ(タブ、ウィンドウ、画面)を優先することを示します。surfaceSwitching
オプションは、ユーザーが共有タブを動的に切り替えることを Chrome で許可するかどうかを示します。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 でウェブプッシュがサポートされるようになりました。これには 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 で、画面キーボードが表示されたときの Layout Viewport の動作が変更されました。詳しくは、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 に続いてこのフォント技術がサポートされるようになりました。また、フォントにおいて、Chrome 108 では、@supports
を使用した特徴クエリに font-tech()
関数と font-format()
関数のサポートが追加されました。
Firefox にも contain-intrinsic-size
のサポートが追加され、Chrome と合わせて、この機能をサポートするブラウザが 2 つになりました。
Safari 16.2 ベータ版には、サイズ設定やスクロール スナップなど、CSS の修正が多数含まれています。
ウェブ初心者向けシリーズの一部