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 が使用されます。詳しくは、Meet のウェブプッシュをご覧ください。Safari にウェブプッシュのランディング ページが追加されたことで、この機能は 3 つの主要なエンジンすべてで利用可能になりました。

ベータ版ブラウザのリリース

ブラウザのベータ版では、ブラウザの次期安定版に搭載される機能のプレビューを確認できます。リリース前に、サイトに影響する可能性がある新機能や削除内容をテストできます。今月の新規ベータ版は、Chrome 108Firefox 107Safari 16.2 です。

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

figure {
    break-inside: avoid;
}

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

Android 版 Chrome で、画面キーボードが表示されたときの Layout Viewport の動作が変更されました。詳しくは、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 の修正が多数含まれています。

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