新しい CSS ビューポート ユニット、Federated Credential Management API、可変 COLRv1 フォントなど。
特に記載のない限り、下記の変更は Android、ChromeOS、Linux、macOS、Windows 向けの最新の Chrome Beta チャンネル リリースに適用されます。機能の詳細については、上記のリンクまたは ChromeStatus.com のリストをご覧ください。2022 年 10 月 27 日時点で Chrome 108 はベータ版です。最新版は Google.com（パソコン版）または Google Play ストア（Android 版）からダウンロードできます。
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 を持つ要素で発生するイベント。
これを使用すると、ユーザー エージェントがコンテンツの表示設定サブツリーのレンダリングを停止または開始した際に、それに応じてレンダリングを停止または開始するタイミングをデベロッパーがより細かく制御できます。たとえば、デベロッパーは、ユーザー エージェントによってレンダリングされないサブツリーで React の更新を停止したい場合があります。同様に、ユーザー エージェントが要素をレンダリングしていないときに、デベロッパーが他のスクリプトの更新（キャンバスの更新など）を停止したい場合もあります。
ウェブ API
Federated Credentials Management（以前は WebID）
Federated Credential Management API を使用すると、ユーザーはフェデレーション ID を使用して、ブラウザのプライバシー保護を強化できる方法でウェブサイトにログインできます。
ワーカーのメディアソース拡張機能
DedicatedWorker コンテキストからの Media Source Extensions（MSE）API の使用を有効にして、メインのウィンドウ コンテキストで HTMLMediaElement による再生用メディアのバッファリングのパフォーマンスを向上させます。DedicatedWorker のコンテキストで MediaSource オブジェクトを作成することで、アプリケーションはそのオブジェクトから MediaSourceHandle を取得し、そのハンドルをメインスレッドに転送して HTMLMediaElement へのアタッチに使用できます。MediaSource オブジェクトを作成したコンテキストは、それを使用してメディアをバッファリングできます。
Sec-CH-Prefers-Reduced-Motion ユーザー設定のメディア機能の Client Hints ヘッダー
User Preference Media Features Client Hints ヘッダーは、Media Queries レベル 5 で定義されているユーザー設定のメディア機能に関する一連の HTTP Client Hints ヘッダーを定義します。重要な 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/ など）でのみ機能を有効にすることができます。このメカニズムは、一部の 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 の AccessHandle 用の Sync メソッド
File System Access API の FileSystemSyncAccessHandle の非同期メソッド flush()、getSize()、truncate() を同期メソッドに更新します。
現在、FileSystemSyncAccessHandle には sync メソッドと async メソッドが混在しているため、特に 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 @support の font-tech() および font-format() 条件拡張
font-tech() と font-format() を CSS の @support と組み合わせて使用すると、フォントの技術と形式のサポートを検出し、コンテンツを段階的に拡張できます。次の例では、COLRv1 フォントのサポートをテストします。
@supports font-tech(color-COLRv1) {
}
@font-face src: 記述子での tech() 関数のサポート
CSS フォント レベル 4 では、フォント リソースを選択またはフィルタする追加の手段を利用できます。tech() 関数が導入され、それぞれのフォント blob が機能するために必要なフォント テクノロジーのリストを渡すことができます。それに基づいて、ユーザー エージェントは最初の適切なリソースを選択します。
Chrome（Android）
Android OSK がデフォルトでビジュアル ビューポートのサイズを変更する
Android 画面キーボードは、最初に含まれるブロックではなく、デフォルトでビジュアル ビューポートのサイズを変更します。作成者は、新しい interactive-widget メタビューポート キーを使用して、これをオプトアウトできます。
オリジン トライアル
Chrome のこのリリースには、2 つの新しいオリジン トライアルがあります。
canmakepayment イベントの販売者 ID
Service Worker イベント canmakepayment は、インストールされた支払いアプリにユーザーのカードが登録されているかどうかを販売者に知らせます。販売者のオリジンと任意のデータを、決済アプリのオリジンから Service Worker に暗黙的に受け渡します。このクロスオリジン通信は JavaScript の PaymentRequest 作成時に行われ、ユーザー操作は必要なく、ユーザー インターフェースは表示されません。「canmakepayment」から ID フィールドを削除するためのデベロッパー向けトライアルイベントは chrome://flags/#clear-identity-in-can-make-payment で有効にできます。このフラグを有効にすると、「canmakepayment」内の ID フィールドが空になります。（および Android IS_READY_TO_PAY インテント）。
詳しくは、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 であり、すべてのブラウザで実装されるわけではありません。また、ブラウザの動作には影響しません。これにより、それらがクリーンアップされ、潜在的なフィンガープリント シグナルが削除されます。
元々は「ステータスバー」を変更/制御するために使用されていたテキストが表示されます。ただし、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() に置き換えられます。Intercept() の動作は、Transitional() とほぼ同じですが、必須の Promise パラメータではなく、Promise を返すオプションのハンドラ関数を受け取ります。これにより、ブラウザはハンドラの実行タイミングを制御できます。これは後で、transitionWhile() の場合よりも直感的です。
WebRTC mediaConstraint の googIPv6 を削除
次の例のように、"googIPv6: false" を使用すると、WebRTC で IPv6 サポートを無効にできます。
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6 は長年にわたってデフォルトで有効になっており、無効にすることはできません。これは仕様に存在しないレガシー API です。