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

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

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

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

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

対応ブラウザ

  • Chrome: 107。
  • Edge: 107.
  • Firefox: 66。
  • Safari: 16。

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 108Firefox 107Safari 16.2 です。

Chrome 108 では、印刷時に CSS 断片化プロパティ break-beforebreak-afterbreak-insideavoid 値がサポートされています。この値は、適用先の要素の前、後、または内部で改行しないようにブラウザに指示します。たとえば、次の CSS を使用すると、図が改ページで分割されなくなります。

figure {
    break-inside: avoid;
}

Chrome 108 より、置換された要素でのオーバーフローの動作が変更されます。これにより、状況によっては視覚的な変化が生じる可能性があります。詳細と、発生した問題に対処する方法については、CSS で置換された要素のオーバーフローの変更をご覧ください。

Android 版 Chrome で画面キーボードが表示されている場合のレイアウト ビューポートの動作が変更されました。詳しくは、Android 版 Chrome のビューポートのサイズ変更動作の変更に備えるをご覧ください。また、来月予定の安定版へのリリースに向けて準備する方法もご確認ください。

Chrome には、新しい CSS ビューポート単位も導入されています。小さい(svwsvhsvisvbsvminsvmax)、大きい(lvwlvhlvilvblvminlvmax)、動的(dvwdvhdvidvbdvmindvmax)、論理(vivb)の各単位があります。これらのユニットは、Firefox と Safari にはすでに実装されています。

Firefox 107 で COLRv1 フォントのサポートが有効になり、Chrome とともにこのフォント技術がサポートされます。また、フォントについては、Chrome 108 で @supports を使用した機能クエリで font-tech() 関数と font-format() 関数がサポートされるようになりました。

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

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

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