Google Developers Japan

See More

特に記載のない限り、下記の変更は Android、ChromeOS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能の詳細については、リンクまたは ChromeStatus.com の一覧でご確認ください。2022 å¹´ 10 月 27 日の時点で Chrome 108 はベータ版です。PC 向けの最新版は Google.com ã§、Android では Google Play ストアでダウンロードできます。

# CSS

Chrome 108 には、たくさんの新しい CSS 機能が含まれています。

# ç½®æ›è¦ç´ ã® CSS overflow

Chrome で、content-box の外側に描画する置換要素に対して、既存の overflow ãƒ—ロパティを使えるようにする変更のロールアウトが始まります。これを object-view-box ã¨çµ„み合わせると、CSS シャドウのように、正しい ink-overflow 動作に対応したカスタムのグローやシャドウを適用したイメージを作成できます。

これは互換性を破る変更になる可能性があります。詳細は、置換要素の overflow の変更をご覧ください。

# å°、大、動的、論理ビューポート単位

小（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 ã§、avoid 値がサポートされます。この値を使うと、適用対象の要素の前、後、内部で改ページを防ぐことをブラウザに指示できます。たとえば、次の CSS を使うと、図が複数ページにまたがるのを防ぐことができます。

figure {
    break-inside: avoid;
}

この機能は、Chrome 108 で LayoutNG の印刷がサポートされたため、追加されました。

# æœ€å¾Œã®ãƒ™ãƒ¼ã‚¹ãƒ©ã‚¤ãƒ³é …目への位置合わせ

この機能は、flex または grid レイアウト内の項目の位置を、最初ではなく、最後のベースラインに合わせます。これは、以下のプロパティを使って行います。

• 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 連携を使ってウェブサイトにログインできるようになります。

# ãƒ¯ãƒ¼ã‚«ãƒ¼ã® Media Source Extensions

Media Source Extensions（MSE）API を DedicatedWorker コンテキストから利用できるようにします。これにより、メイン Window コンテキストで HTMLMediaElement が再生用にメディアをバッファリングする操作のパフォーマンスが向上します。DedicatedWorker コンテキストで MediaSource オブジェクトを作成すると、アプリケーションはそこから MediaSourceHandle を取得してそのハンドルをメインスレッドに送り、HTMLMediaElement に接続して利用できます。そうすると、MediaSource オブジェクトを作成したコンテキストからメディアをバッファリングできます。

# Sec-CH-Prefers-Reduced-Motion ãƒ¦ãƒ¼ã‚¶ãƒ¼ プリファレンス メディア機能 Client Hints ヘッダー

ユーザー プリファレンス メディア機能 Client Hints ヘッダーは、Media Queries Level 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 を選択して有効化や無効化を行えるようにする仕組みを定義します。この仕組みによって、明示的に列挙したオリジン（https://foo.com/ ãªã©）でのみ機能を有効化できるようになります。数百個あるサブドメインのいずれか 1 つにホストされているオリジン経由でコンテンツを提供するような CDN の設計の場合、この仕組みは十分に柔軟なものではありません。

そのため、この機能により、権限ポリシーでワイルドカードがサポートされます。たとえば、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 Conditional UI

WebAuthn の Conditional UI ã¯、Windows 11 22H2 以降、macOS、Android P 以降でサポートされます。デスクトップ プラットフォームの WebAuthn UI も更新されています。

# å¯å¤‰ COLRv1 フォントとフォント特徴検出

# COLRv1 可変フォントのサポート

COLRv1 カラーベクトル フォントは Chrome 98 以降でサポートされていますが、この初期リリースでは、COLRv1 テーブルの静的機能のみがサポートされていました。COLRv1 仕様は、可変軸パラメータを変化してフォントのグラデーションや変換に関するプロパティを変更できる OpenType バリエーションとの統合を定義します。今回の第 2 ステップでは、COLRv1 のこのようなバリエーションをサポートします。

# font-tech() ã¨ font-format() æ¡ä»¶ã«ã‚ˆã‚‹ CSS @supports の拡張

font-tech() ã¨ font-format() ã‚’ CSS の @supports と組み合わせて使うことで、サポートされているフォント テクノロジーやフォーマットの検出と、コンテンツのプログレッシブ エンハンスメントが可能になります。次の例では、COLRv1 フォントがサポートされているかどうかを確認しています。

@supports font-tech(color-COLRv1) {

}

# @font-face src: è¨˜è¿°å­ã§ã® tech() é–¢æ•°ã®ã‚µãƒãƒ¼ãƒˆ

CSS Fonts Level 4 は、フォント リソースの選択やフィルタリングの追加手段を提供します。tech() é–¢æ•°ã¯ã™ã§ã«å°Žå…¥ã•ã‚Œã¦ãŠã‚Š、これを使うと、それぞれのフォントの blob の動作に必要なフォント テクノロジーのリストを渡すことができます。ユーザー エージェントは、これに基づいて最初の適切なリソースを選択します。

# Android 版 Chrome

# Android OSK がデフォルトで表示されるビューポートをリサイズ

デフォルトで、Android 画面キーボード（OSK）は、最初の包含ブロックではなく、表示されるビューポートをリサイズします。この動作は、新しい interactive-widget meta-viewport キーを使ってオプトアウトできます。

# ã‚ªãƒªã‚¸ãƒ³ トライアル

今回の 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 ã®ã‚µãƒãƒ¼ãƒˆçµ‚了と削除

この 2 つは非標準 API で、すべてのブラウザで実装されているわけではありません。また、ブラウザの動作には影響しません。これらを削除することで、潜在的なフィンガープリンティングのシグナルを取り除きます。

これらは当初、ブラウザ ウィンドウの下に表示されていた「ステータスバー」のテキストの変更や制御に使われていました。しかし実際には、Chrome のステータスバーに対しては何の効果もなく、標準化された属性でもありません。バージョン 23 以降の Gecko はこの属性をサポートしていません。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() は transitionWhile() とほぼ同じように動作しますが、必須の Promise パラメータではなく、Promise を返すハンドラ関数（省略可能）を受け取ります。これにより、ブラウザがハンドラを実行するタイミングを制御できるようになります。こちらの方が transitionWhile() ã‚ˆã‚Šã‚¿ã‚¤ãƒŸãƒ³ã‚°ãŒé…く、直感的です。

# WebRTC mediaConstraint の googIPv6 ã®å‰Šé™¤

"googIPv6: false" ã‚’使うと、次の例のようにして WebRTC の IPv6 サポートを無効化できます。

new RTCPeerConnection({}, {mandatory:{googIPv6:false}});

IPv6 は何年にもわたってデフォルトで有効化されており、無効化は望ましくありません。これは、仕様には存在しない以前の API です。

Posted by Eiji Kitamura - Developer Relations Team