新しい CSS ビューポート ユニット、Federated Credential Management API、可変 COLRv1 フォントなど。
特に記載のない限り、以下の変更は Android、ChromeOS、Linux、macOS、Windows 向けの最新の Chrome Beta チャンネル リリースに適用されます。こちらに記載されている機能について詳しくは、リンク先または ChromeStatus.com のリストをご覧ください。2022 年 10 月 27 日、Chrome 108 はベータ版です。最新バージョンはパソコン版の Google.com または Android 版の Google Play ストアでダウンロードできます。
CSS
Chrome 108 には、いくつかの新しい CSS 機能があります。
置換された要素の CSS オーバーフロー
Chrome では、デベロッパーが既存の overflow プロパティを使用して、コンテンツ ボックスの外を描画する要素を置き換えて使用できるようにする変更のリリースを開始します。object-view-box と組み合わせることで、カスタムのグローまたはシャドウが適用された画像を作成できます。CSS シャドウと同様の適切なインク オーバーフロー動作が可能です。
これは互換性を破る可能性がある変更です。詳しくは、置換された要素をオーバーフローする変更をご覧ください。
小、大、動的、論理的なビューポート ユニット
これにより、小（svw、svh、svi、svb、svmin、svmax）、大（lvw、lvh、lvi、lvb、lvmin、lvmax）、動的（dvw、dvh、dvi、dvb、dvmin、dvmax）、論理（vi、vb）単位のサポートが追加されました。
CSS break-after、break-before、break-inside のサポート
印刷時の CSS 断片化プロパティ break-before、break-after、break-inside の回避値のサポート。この値は、適用される要素の前後または内側で破損しないようにブラウザに指示します。たとえば、次の CSS では、改ページによって図が壊れないようにしています。
figure {
break-inside: avoid;
}
この機能は、Chrome 108 で LayoutNG 印刷がサポートされるようになったために追加されました。
前回のベースライン アイテムの配置
この機能を使用すると、デベロッパーは、Flex レイアウトまたはグリッド レイアウト内で、アイテムを最初ではなく最後のベースラインで配置できます。これを行うには、次のプロパティを使用します。
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
ContentVisibilityAutoStateChanged 件のイベント
content-visibility: auto が指定された要素で、要素とユーザーに関連するいずれかの属性が原因で要素のレンダリング状態が変わったときに発生するイベント。
これのユースケースでは、ユーザー エージェントによる「content-visibility」サブツリーのレンダリングの停止または開始に応じて、レンダリングを停止または開始するタイミングをより細かく制御できます。たとえば、ユーザー エージェントでレンダリングされないサブツリーで React の更新を停止したい場合があります。同様に、ユーザー エージェントが要素をレンダリングしていないときは、他のスクリプトの更新（キャンバスの更新など）を停止したい場合があります。
ウェブ API
Federated Credentials Management（以前は WebID）
Federated Credential Management API を使用すると、ユーザーはブラウザのプライバシー強化に対応した方法で、フェデレーション ID を使用してウェブサイトにログインできます。
ワーカーのメディアソース拡張機能
DedicatedWorker コンテキストからの Media Source Extensions（MSE）API の使用を有効にして、メインの Window コンテキストの HTMLMediaElement による再生用にメディアをバッファリングするパフォーマンスを向上させることができます。DedicatedWorker のコンテキストに MediaSource オブジェクトを作成することで、アプリはそこから MediaSourceHandle を取得し、HTMLMediaElement へのアタッチに使用できるようにそのハンドルをメインスレッドに転送できます。MediaSource オブジェクトを作成したコンテキストは、それを使用してメディアをバッファできます。
Sec-CH-Prefers-Reduced-Motion ユーザー設定メディア機能 Client Hints ヘッダー
ユーザー設定メディア機能 Client Hints ヘッダーは、メディアクエリ レベル 5 で定義されているユーザー設定のメディア機能に関する HTTP Client Hints ヘッダーのセットを定義しています。これらのヘッダーを Critical Client Hints として使用すると、サーバーは CSS のインライン化などに関するスマートな選択を行えるようになります。Sec-CH-Prefers-Reduced-Motion はユーザーの prefers-reduced-motion 設定を反映します。
WebTransport BYOB リーダー
WebTransport の BYOB（Bring-your-own-buffer）リーダーをサポートして、デベロッパー提供のバッファへの読み取りを可能にします。BYOB リーダーは、バッファのコピーを最小限に抑え、メモリ割り当てを減らすことができます。
権限ポリシーのオリジンでのワイルドカード
権限ポリシー仕様では、デベロッパーがさまざまなブラウザ機能や API の使用を選択的に有効または無効にできるメカニズムを定義しています。このメカニズムの 1 つの機能により、明示的に列挙されたオリジン（https://foo.com/ など）でのみ機能を有効にすることができます。このメカニズムの 1 つは、一部の CDN の設計には十分な柔軟性がありません。このような CDN では、想定される数百のサブドメインのうちの 1 つでホストされているオリジンを介してコンテンツを配信します。
そのため、この機能では、SCHEME://*.HOST:PORT のように構造化された権限ポリシーでワイルドカードのサポートが追加されています（例: https://*.foo.com/）。有効なオリジンを SCHEME://HOST:PORT から構成できます（例: https://foo.com/）。そのためには、HOST が登録可能なドメインである必要があります。つまり、https://*.bar.foo.com/ は動作しますが、https://*.com/ は動作しません（すべてのドメインにこの機能の使用を許可する場合は、* に委任してください）。
File System Access API での AccessHandles の同期メソッド
File System Access API の FileSystemSyncAccessHandle の非同期メソッド flush()、getSize()、truncate() を同期メソッドに更新します。現在、FileSystemSyncAccessHandle は同期メソッドと非同期メソッドが混在しているため、特に C/C++ を Wasm に移植するアプリケーションでは、パフォーマンスとユーザビリティを低下させます。このアップデートにより、API の使用方法に一貫性がもたらされ、Wasm ベースのライブラリのパフォーマンスが改善されます。
これは互換性を破る変更である可能性があります。詳しくは、互換性を破る変更: AccessHandles の同期メソッドをご覧ください。
WebAuthn 条件付き UI
WebAuthn の条件付き UI は、Windows 22H2 以降、macOS、Android P 以降でサポートされています。デスクトップ プラットフォームの WebAuthn UI も更新されました。
可変 COLRv1 フォントとフォント機能の検出
COLRv1 可変フォントのサポート
COLRv1 カラーベクター フォントは Chrome 98 以降でサポートされていますが、この初期リリースでは COLRv1 テーブルの静的機能のみがサポートされていました。COLRv1 仕様では、可変軸パラメータを変更することによってグラデーションや変換のフォント プロパティを変更できる、OpenType バリエーションとの統合を定義しています。第 2 のステップでは、このようなバリエーションが COLRv1 でサポートされるようになります。
CSS @supports への font-tech() および font-format() 条件拡張
font-tech() と font-format() を CSS @supports と一緒に使用すると、フォント テクノロジーとフォーマットのサポートを検出し、コンテンツを段階的に拡張できるようになります。次の例では、COLRv1 フォントのサポートをテストします。
@supports font-tech(color-COLRv1) {
}
@font-face src: 記述子での tech() 関数のサポート
CSS Fonts Level 4 では、フォント リソースを選択またはフィルタするための追加の手段が提供されます。tech() 関数が導入され、各フォント blob が機能するために必要なフォント テクノロジーのリストを渡せるようになりました。これに基づいて、ユーザー エージェントは最初の適切なリソースを選択します。
Chrome（Android）
Android OSK でビジュアル ビューポートがデフォルトでサイズ変更されるようになりました
Android 画面キーボードは、最初に含まれるブロックではなく、デフォルトでビジュアル ビューポートのサイズを変更します。作成者は新しい interactive-widget メタビューポート キーを使用してオプトアウトできます。
オリジン トライアル
Chrome の今回のリリースには、2 つの新しいオリジン トライアルがあります。
canmakepayment イベントの販売者 ID
canmakepayment Service Worker イベントは、ユーザーがインストール済みの決済アプリにカードを登録しているかどうかを販売者に知らせるものです。このイベントは、販売者の作成元と任意のデータを通知せずに、決済アプリの取得元から Service Worker に渡します。このクロスオリジン通信は、JavaScript での PaymentRequest 構築時に行われます。ユーザー操作は必要とされず、ユーザー インターフェースも表示されません。「canmakepayment」イベントから ID フィールドを削除するデベロッパー トライアルは、chrome://flags/#clear-identity-in-can-make-payment で有効にできます。このフラグを有効にすると、「canmakepayment」イベント（および Android IS_READY_TO_PAY インテント）の ID フィールドは空になります。
詳しくは、Payment Handler API の CanMakePayment イベントの動作を更新するをご覧ください。
バックフォワード キャッシュの NotRestoredReason API
NotRestoredReason API は PerformanceNavigationTiming API を介して、ページが BFcache からフレームツリー構造で配信されていない理由のリストを報告します。
ページが BFcache からブロックされる原因には、仕様で要求される理由やブラウザの実装に固有の理由などがあります。デベロッパーは、pageshow ハンドラの永続化パラメータと PerformanceNavigationTiming.type(back-forward) を使用して、サイトでの BFCache のヒット率を収集できます。この API を使用すると、履歴ナビゲーションで BFCache が使用されていない理由に関する情報を収集できます。これにより、サイトはそれぞれの理由に対処し、ページの BFCache との互換性を保つことができます。
サポートの終了と削除
このバージョンの Chrome では、下記のサポート終了と削除を行います。サポート終了の予定、現在のサポート終了、これまでの削除情報のリストについては、ChromeStatus.com をご覧ください。
サポートの終了
Chrome の今回のリリースでは、1 つの機能が非推奨になりました。
window.defaultStatus と window.defaultstatus のサポート終了と削除
これらの API は非標準の API で、すべてのブラウザに実装されているわけではなく、ブラウザの動作には影響しません。これにより、フィンガープリントが消去され、フィンガープリントの潜在的なシグナルが削除されます。
元々は、ブラウザ ウィンドウの一番下に表示される「ステータスバー」のテキストを変更、制御するために使用されていました。ただし、実際に Chrome のステータスバーに影響を与えることはなく、標準化された属性でもありません。Gecko はバージョン 23 以降でこれらの属性をサポートしていませんが、WebKit は引き続きこれらの属性をサポートしています。関連する window.status 属性は標準化されていますが、ウィンドウ ステータスバーに影響しないようにする必要があります。
削除
Chrome の今回のリリースでは、4 つの機能が削除されました。
ImageDecoderInit.premultiplyAlpha を削除します
主なユースケースで目に見える効果はありませんが、実装が最適とならない場合があります。詳細については、この問題をご覧ください。WebCodecs 仕様エディタのコンセンサスと使用率の欠如（M106 の使用カウンタあたりページ読み込みの 0.000000339%～ 0.00000687%）。
navigateEvent.restoreScroll() を削除します
restoreScroll() を navigateEvent.scroll() に置き換えています。scroll() の動作は同じですが、デベロッパーが非トラバース ナビゲーションのスクロールのタイミングを制御できる点が異なります（scroll() はスクロールが復元でない場合に動作するため、動作の変更に伴って名前が変更されます）。
navigateEvent.transitionWhile() を削除します
デベロッパーから報告された設計上の欠陥により、transitionWhile() が navigateEvent.intercept() に置き換えられました。インターセプト() の動作は migrationwhile() とほぼ同じですが、必須の Promise パラメータを受け取る代わりに、Promise を返すオプションのハンドラ関数を受け取ります。これにより、ブラウザでハンドラの実行タイミングを制御できます。これは、transitionWhile() よりも後で、より直感的です。
WebRTC mediaConstraint の googIPv6 を削除
"googIPv6: false" を使用すると、WebRTC で IPv6 サポートを無効にできます。次に例を示します。
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6 は何年も前からデフォルトで有効になっており、無効にすることはできません。これは、この仕様には存在しないレガシー API です。