特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能の詳細については、リンクまたは ChromeStatus.com の一覧でご確認ください。2022 年 8 月 5 日時点で Chrome 105 はベータ版です。PC 向けの最新版は Google.com で、Android では Google Play ストアでダウンロードできます。
Custom Highlight API
Custom Highlight API は、疑似要素のハイライトという概念を拡張します。具体的には、ユーザー エージェントで定義される ::selection、::inactive-selection、::spelling-error、::grammar-error に限定されることなく、任意の範囲のテキストのスタイルを設定できるようにします。この仕組みは、独自の選択を実装する編集フレームワーク、仮想ドキュメントのページ内検索、オンライン コラボレーションを表す複数選択、スペルチェック フレームワークなど、さまざまな状況に活用できます。
この機能がない場合、ウェブ デベロッパーやフレームワーク作成者は、ベースとなる DOM ツリー構造を変更しないと希望のレンダリング効果を実現できません。希望するハイライト効果が複数のサブツリーにまたがる場合、このような操作は複雑になり、ハイライトの変化に合わせて DOM を更新しなければならなくなります。Custom Highlight API を使うと、プログラムからハイライトを追加したり削除したりできるようになります。ベースとなる DOM 構造に影響を与えることはなく、範囲オブジェクトに基づいてテキストにスタイルを適用します。
105 では、color と background-color 疑似要素のみがサポートされます。他の項目のサポートは、今後のバージョンで追加される予定です。
コンテナクエリ
コンテナクエリを使うと、コンテナ要素のサイズに応じて要素のスタイルを設定できます。これは、コンポーネントが独自のレスポンシブなスタイル設定ロジックを持てることを意味します。つまり、コンポーネントがページのどこに表示されてもスタイル設定ロジックが付属することになるので、コンポーネントの柔軟性が大きく向上します。
コンテナクエリはメディアクエリに似ていますが、ビューポートのサイズではなく、コンテナのサイズに対して評価されます。既知の問題として、複数列レイアウトでテーブル レイアウトと組み合わせると、コンテナクエリが動作しなくなることが挙げられます。この点は 106 で修正する予定です。詳細については、@container と :has(): 2 つの新レスポンシブ API をご覧ください。今回のリリースのその他の CSS 機能については、以下をご覧ください。
:has() 疑似クラス
:has() 疑似クラスは、引数で渡された相対セレクタに少なくとも 1 つの要素が一致する要素を指定します。他のセレクタとは異なり、:has() 疑似クラスは、特定の要素に先行する要素（兄弟、先祖、先行する兄弟や先祖）にスタイルルールを適用します。たとえば、次のルールは子にイメージタグがあるアンカータグにのみ一致します。
a:has(> img)
詳細については、@container と :has(): 2 つの新レスポンシブ API をご覧ください。今回のリリースのその他の CSS 機能については、以下をご覧ください。
フェッチ アップロード ストリーミング
フェッチ アップロード ストリーミングを使うと、ウェブ デベロッパーは ReadableStream ボディによるフェッチを行えます。これまでは、ボディ全体の準備ができてからでないとリクエストを開始できませんでした。しかし今後は、コンテンツの生成中でもデータの送信を開始できるので、パフォーマンスとメモリ使用量が改善します。
たとえばオンライン フォームでは、ユーザーがテキスト入力フィールドにフォーカスを当てると同時にフェッチを開始できます。ユーザーが Enter をクリックする頃には、fetch() ヘッダーが送られているはずです。この機能を使うと、クライアントでオーディオや動画などのコンテンツを生成すると同時に送信することもできます。詳細については、フェッチ API によるストリーミング リクエストをご覧ください。
インストールした PC ウェブアプリ向けのウィンドウ コントロール オーバーレイ
ウィンドウ コントロール オーバーレイは、ウィンドウ全体を覆うようにアプリのクライアント領域を拡張します。この領域には、タイトルバー、ウィンドウのコントロール ボタン（閉じる、最大化 / 復元、最小化）も含まれます。ウェブアプリのデベロッパーは、ウィンドウ コントロール オーバーレイを除くウィンドウ全体の描画と入力ハンドリングをする必要があります。この機能を使うと、デベロッパーはインストールされた PC ウェブアプリをオペレーティング システムのアプリのように見せることができます。詳しくは、PWA のタイトルバーのウィンドウ コントロール オーバーレイをカスタマイズするをご覧ください。
オリジン トライアル
このバージョンの Chrome で開始されるオリジン トライアルはありません。ただし、たくさんのオリジン トライアルが継続されており、その内容は Chrome オリジン トライアル ダッシュボードから確認できます。オリジン トライアルとして新機能を試して、ユーザビリティ、実用性、有効性についてのフィードバックをウェブ標準コミュニティに提供することができます。Chrome のオリジン トライアルの詳細については、ウェブ デベロッパーのためのオリジン トライアル ガイドをご覧ください。Microsoft Edge は、Chrome とは別に独自のオリジン トライアルを行っています。詳細については、Microsoft Edge オリジン トライアル デベロッパー コンソールをご覧ください。
完了したオリジン トライアル
Chrome で以前にオリジン トライアルが行われていた以下の機能は、現在デフォルトで有効化されています。
ワーカーの Media Source Extensions
Media Source Extensions（MSE）API は、DedicatedWorker コンテキストから利用できるようになっています。これにより、メイン Window コンテキストで HTMLMediaElement が再生用にメディアをバッファリングする操作のパフォーマンスが向上しています。アプリケーションが DedicatedWorker で MediaSource オブジェクトを作成すると、そこから MediaSourceHandle を取得し、postMessage() を呼び出してメインスレッドに転送し、HTMLMediaElement にアタッチできます。すると、MediaSource オブジェクトを作成したコンテキストからメディアをバッファリングできます。
Viewport-Height クライアント ヒント
Chrome が新しい Sec-CH-Viewport-Height クライアント ヒントをサポートします。これは、以前に Chrome に導入された Sec-CH-Viewport-Width と対になる機能です。これらを合わせると、ビューポートのサイズ情報をオリジンに伝えることができます。このヒントを使うには、Accept-CH ヘッダーに Sec-CH-Viewport-Height または Sec-CH-Viewport-Width を渡します。
今回のリリースに追加されたその他の機能
マルチスクリーン ウィンドウ配置用の正確な画面ラベル
今回のリリースでは、Multi-Screen Window Placement API が提供する画面ラベル文字列が拡張されています。具体的には、ScreenDetailed.label プロパティが改善され、以前のプレースホルダがデバイスの Extended Display Identification Data（EDID）または高水準のオペレーティング システム API からの情報に置き換えられています。たとえば、ラベル プロパティで "External Display 1" ではなく、"HP z27n" や "Built-in Retina Display" などが返されるようになります。こういった正確なラベルは、オペレーティング システムのディスプレイ設定ダイアログ ボックスに表示される内容と一致します。このラベルは、ユーザーが "window-placement" パーミッションを与えたサイトのみに公開されます。
CSS: 固定要素のオーバースクロール効果の防止
要素の position CSS プロパティを fixed に設定すると（その要素を包含するブロックがルートである場合を除きます）、overscroll-behavior で指定された効果が無効になります。特に、fixed-position 要素がオーバースクロール効果によって移動することはなくなります。
DisplayMediaStreamConstraints.systemAudio
MediaDevices.getDisplayMedia() に、ユーザーにシステム オーディオを提供するかどうかを示す新しい制約が追加されます。ユーザー エージェントが、動画と合わせてオーディオのキャプチャを提供する場合もあります。しかし、すべてのオーディオが同じように作成されるわけではありません。ビデオ会議アプリケーションについて考えてみてください。タブのオーディオは便利な機能であり、リモート参加者と共有することがよくあります。しかし、システム オーディオには参加者自身のオーディオが含まれており、共有するのは適切でないかもしれません。この新しい制約を使うには、制約として systemAudio を渡します。次に例を示します。
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true,
systemAudio: "exclude" // or "include"
});この機能はパソコン版でのみサポートされます。
TransformStreamDefaultController の公開
仕様に準拠するため、TransformStreamDefaultController クラスがグローバル スコープで利用できるようになります。このクラスはすでに存在しており、次のようなコードでアクセスできます。
let TransformStreamDefaultController;
new TransformStream({ start(c) { TransformStreamDefaultController = c.constructor; } });
今回の変更により、TransformStreamDefaultController がグローバル スコープから利用できるようになるので、上記のようなコードは不要になります。このクラスは、モンキーパッチによって TransformStreamDefaultController.prototype にプロパティを追加したり、その既存プロパティの機能テストを簡単にしたりするために利用できます。このクラスを作成することはできません。つまり、次のコードはエラーをスローします。
new TransformStreamDefaultController()
HTML Sanitizer API
HTML Sanitizer API は、便利で安全な方法によって、任意のユーザー提供コンテンツから実行可能コードを削除します。この API の目的は、クロスサイト スクリプティング脆弱性のないウェブ アプリケーションを簡単に作れるようにし、そのようなアプリのメンテナンス負荷の一部をプラットフォームに移すことです。
今回のリリースでは、基本機能の Element.setHTML() のみがサポートされます。Sanitize インターフェースは、今後の段階で追加される予定です。サポートされるのは HTML のみで、名前空間付きコンテンツ（SVG + MathML）はまだサポートされません。この API の詳細は、HTML Sanitizer API - Web APIs をご覧ください。
import.meta.resolve()
import.meta.resolve() メソッド は、現在のスクリプトのコンテキストで渡された指定子が解決される URL を返します。つまり、import() を呼び出した場合にインポートされる URL を返します。指定子とは、有効なスキームまたは /、./、../ のいずれかで始まる URL です。サンプルは HTML 仕様をご覧ください。
このメソッドを使うと、厳密なロケーションやウェブ アプリケーションのモジュール設定にこだわらないスクリプトの記述が簡単になります。この機能のいくつかは現在でも利用できますが、new URL() と既存の import.meta.url() メソッドを組み合わせるという長い形式が必要です。しかし、インポート マップとの統合により、インポート マップの影響を受ける URL を解決できるようになります。
Navigation API の改善
Chrome 105 では、Navigation API（102 で導入）の NavigateEvent に 2 つの新しいメソッドが導入され、実用性に問題があったメソッドが改善されます。intercept() は、ナビゲーションに続く状態をデベロッパーが制御できるようにするもので、使うのが難しかった transitionWhile() の代わりとなります。scroll() メソッドは、URL で指定されたアンカーにスクロールするもので、すべてのナビゲーションの種類には対応していなかった restoreScroll() の代わりになります。既存のメソッドの問題の説明や、新しいメソッドの使用例については、NavigateEvent の変更点をご覧ください。
transitionWhile() メソッドと restoreScroll() メソッドはこのリリースで非推奨になり、108 で削除される予定です。以下に記載されている今回のリリースでのその他のサポート終了と機能の削除をご覧ください。
onbeforeinput グローバル イベント ハンドラのコンテンツ属性
Chrome で onbeforeinput グローバル コンテンツ属性がサポートされます。beforeinput 形式は、すでに addEventListener() で利用できるようになっています。Chrome では、document.documentElement.onbeforeinput を確認することで、この機能を検出できます。
Opaque Response Blocking v0.1
Opaque Response Blocking（ORB）は、Cross-Origin Read Blocking（CORB）に代わるものです。CORB と ORB は、どちらも "no-cors" サブリソースのクロスオリジン開示を防ぐためのヒューリスティックです。
Picture-in-Picture API が Android に対応
Picture-in-Picture API を使うと、ウェブサイトでフローティング動画ウィンドウを作成できます。これは常に他のウィンドウの上部に表示されるので、ユーザーはデバイスで他のサイトやアプリケーションを操作しながら、メディアを視聴し続けることができます。この機能は、パソコンでは Chrome 70 以降で利用可能ですが、現在、Android 11 以降で実行される Chrome でも利用できるようになっています。今回の変更は、<video> 要素にのみ適用されます。Picture-in-Picture API の詳しい使い方は、ピクチャー イン ピクチャーで動画を視聴するをご覧ください。
Response.json()
Response() コンストラクタを使うとさまざまな種類のレスポンス本体を作成できますが、既存の response.json() インスタンス メソッドでは直接 JSON オブジェクトを作ることはできません。この点に対応するのが、Response.json() 静的メソッドです。
Response.json() は、2 つの引数を受け取り、新しい Response オブジェクトを返します。最初の引数は、JSON に変換する文字列です。2 つ目の引数は初期化オブジェクトで、省略可能です。
マークアップ ベースのクライアント ヒント委譲の構文変更
Chrome 100 のユーザー エージェントの削減によって取得できなくなったクライアント情報を必要とするサードパーティ コンテンツへのクライアント ヒント委譲の構文が変更されます。
以前の構文 :
<meta name="accept-ch" value="sec-ch-dpr=(https://foo.bar https://baz.qux), sec-ch-width=(https://foo.bar)">
新しい構文 :
<meta http-equiv="delegate-ch" value="sec-ch-dpr https://foo.bar https://baz.qux; sec-ch-width https://foo.bar">
File System Access API での書き込み可能なディレクトリ プロンプト
Chromium では、File System Access API の 1 回のプロンプトで、読み取りと書き込みの両方のパーミッションを持つディレクトリを返すことができるようになります。これまで、Window.showDirectoryPicker() は読み取りアクセスのプロンプトを表示した後、読み取り専用のディレクトリを返していたので、書き込みアクセスを取得するために 2 つ目のプロンプトが必要でした。このような 2 重のプロンプトはユーザー エクスペリエンスが低く、ユーザーの混乱やパーミッション疲労の原因になります。
サポートの終了と機能の削除
このバージョンの Chrome では、以下のサポートの終了と機能の削除が行われます。サポートの終了が予定されている機能、現在サポートが終了している機能、以前に削除された機能のリストは、ChromeStatus.com をご覧ください。
安全でないコンテキストでの WebSQL の削除
安全でないコンテキストでの WebSQL が削除されます。Web SQL Database 標準が最初に提案されたのは 2009 年 4 月で、2010 年 11 月に検討が中止されました。Gecko はこの機能を実装しておらず、WebKit では 2019 年に非推奨となりました。W3C は、代替手段として Web Storage や Indexed Database を推奨しています。
デベロッパーは、WebSQL 自体が非推奨であり、利用率が十分低くなった際に削除される予定であることを想定する必要があります。
CSS のカスタム識別子で default キーワードの利用を禁止
CSS キーワード 'default' が CSS カスタム識別子として使用できなくなります。カスタム識別子は、CSS でさまざまな種類のユーザー定義名に使われます（@keyframes ルールで作られる名前、カウンタ、@container 名、カスタムのレイアウトやペイントの名前など）。これにより、カスタム識別子での利用が制限される名前のリスト（'inherit'、'initial'、'unset'、'revert'、'revert-layer'）に 'default' が追加されます。
Navigation API でのサポートの終了
transitionWhile() メソッドと restoreScroll() メソッドは今回のリリースで非推奨となり、108 で削除される予定です。この機能が必要なデベロッパーは、新しい intercept() メソッドと scroll() メソッドを利用してください。既存のメソッドの問題の説明や、新しいメソッドの使用例については、NavigateEvent の変更点をご覧ください。
Cookie のドメイン属性での非 ASCII 文字のサポート終了
最新の仕様（RFC 6265bis）に準拠するため、Chromium は非 ASCII 文字（Domain=éxample.com など）を含む Domain 属性を持つ Cookie を拒否するようになります。
Cookie の IDN ドメイン属性のサポートは長いこと規定されておらず、Chromium、Safari、Firefox のすべてで動作が異なります。今回の変更により、非 ASCII ドメイン属性を持つ Cookie を拒否するという Firefox の動作が標準になります。
これまでの Chromium は、非 ASCII 文字を受け入れ、正規化した punycode に変換して保存しようとしていました。今後は厳しいルールを適用し、有効な ASCII（該当する場合は punycode）ドメイン属性が必須となります。
105 以降では、コンソールに警告が表示されます。削除は 106 で行われる予定です。
ジェスチャー スクロール DOM イベントを削除
ジェスチャー スクロール DOM イベント（gesturescrollstart、gesturescrollupdate、gesturescrollend）が Chrome から削除されます。これらは非標準 API であり、プラグインで使うために Blink に追加されましたが、ウェブにも公開されていました。
Posted by
Eiji Kitamura - Developer Relations Team
