このページは Cloud Translation API によって翻訳されました。

10 月に初めてウェブプラットフォームを導入

2022 年 10 月に安定版とベータ版のウェブブラウザに導入された興味深い機能をご紹介します。

Rachel Andrew

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

10 月には、Firefox 106、Chrome 107、Safari 16.1 が安定版になりました。ウェブプラットフォームにどのような影響があるか見てみましょう。

グリッドトラックのアニメーション

Microsoft のコントリビューターの協力により、Chrome で grid-template-columns 値と grid-template-rows 値を補間できるようになりました。つまり、グリッドレイアウトは、アニメーションや遷移の途中でスナップするのではなく、状態間をスムーズに遷移できます。

アバターにカーソルを合わせると、アニメーションが表示されます。この例は、CSS のアニメーショングリッドレイアウトの記事からのものです。詳しくは、こちらをご覧ください。

対応ブラウザ

`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 が使用されます。詳しくは、ウェブプッシュについてをご覧ください。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 とともにこのフォント技術がサポートされます。また、フォントについては、Chrome 108 で @supports を使用した機能クエリで font-tech() 関数と font-format() 関数がサポートされるようになりました。

Firefox にも contain-intrinsic-size のサポートが追加され、Chrome と合わせて、この機能をサポートするブラウザが 2 つになりました。

Safari 16.2 ベータ版には、サイズ設定やスクロールスナップなど、CSS の修正が多数含まれています。

ウェブ初心者向けシリーズの一部

10 月に初めてウェブ プラットフォームを導入