公開日: 2024 年 1 月 15 日
特に記載がない限り、以下の変更は Android、ChromeOS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能について詳しくは、リンク先をご覧いただくか、ChromeStatus.com のリストをご覧ください。2024 年 1 月 15 日時点で、Chrome 133 はベータ版です。パソコン版は Google.com から、Android 版は Google Play ストアから最新版をダウンロードできます。
CSS と UI
今回のリリースでは、7 つの新しい CSS 機能と UI 機能が追加されました。
CSS の高度な attr() 関数
CSS レベル 5 で指定された attr() の拡張を実装します。これにより、<string> 以外の型を使用できるようになり、すべての CSS プロパティで使用できるようになります（既存の疑似要素 content のサポートに加えて）。
詳しくは、CSS attr() がアップグレードされましたをご覧ください。
CSS :open 疑似クラス
:open 疑似クラスは、<dialog> と <details> が開いている状態のときに一致し、ピッカーがあり、ピッカーが表示されているモードのときに <select> と <input> に一致します。
CSS スクロール状態コンテナ クエリ
コンテナ クエリを使用して、コンテナのスクロール状態に基づいてコンテナの子孫にスタイルを適用します。
クエリ コンテナは、スクロール コンテナ、またはスクロール コンテナのスクロール位置の影響を受ける要素のいずれかです。次の状態をクエリできます。
stuck: スクロール ボックスの端に固定されたコンテナ。snapped: スクロール スナップが揃えられたコンテナが現在、水平方向または垂直方向にスナップされています。scrollable: スクロール コンテナがクエリされた方向にスクロールできるかどうか。
新しい container-type: scroll-state を使用すると、コンテナをクエリできます。
#sticky {
position: sticky;
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
#sticky-child {
font-size: 75%;
}
}
詳しくは、CSS scroll-state() をご覧ください。
CSS text-box、text-box-trim、text-box-edge
テキスト コンテンツの最適なバランスを実現するために、text-box-trim プロパティと text-box-edge プロパティ、および text-box ショートハンド プロパティを使用すると、テキストの垂直方向の配置をより細かく制御できます。
text-box-trim プロパティは切り取る辺（上下）を指定し、text-box-edge プロパティは辺をどのように切り取るかを指定します。
これらのプロパティを使用すると、フォントの指標を使用して垂直方向のスペースを正確に制御できます。詳しくは、CSS text-box-trim をご覧ください。
popover 属性の hint 値
Popover API は、popover 属性の 2 つの値（auto と manual）の動作を指定します。この機能は、3 番目の値 popover=hint を記述します。ヒントは、多くの場合「ツールチップ」タイプの動作に関連付けられていますが、動作が若干異なります。主な違いは、ネストされたポップオーバーのスタックを開くときに hint が auto の下位になることです。そのため、既存の auto ポップオーバーのスタックが開いたまま、無関係の hint ポップオーバーを開くことができます。
標準的な例として、<select> ピッカーが開いており（popover=auto）、ホバーでトリガーされるツールチップ（popover=hint）が表示されている場合が挙げられます。この操作では <select> ピッカーは閉じません。
ポップオーバーのトリガー要素とアンカー要素の配置を改善
popover.showPopover({source}) を使用してポップオーバー間のトリガー要素の関係を設定するための命令型の方法を追加します。トリガー要素の関係で暗黙的なアンカー要素の参照を作成できるようにします。
トリガー要素内にネストされたポップオーバーがトリガー要素を再呼び出ししないようにする
次のケースでは、ボタンをクリックするとポップオーバーが正しくアクティブになりますが、その後ポップオーバー自体をクリックしてもポップオーバーは閉じません。
<button popovertarget=foo>Activate
<div popover id=foo>Clicking me shouldn't close me</div>
</button>
以前は、ポップオーバーのクリックが <button> にバブリングしてインボーカーをアクティブにし、ポップオーバーを閉じるように切り替わっていたため、このようなことが起こっていました。このたび、この点も変更されました。
ウェブ API
Animation.overallProgress
アニメーションの進行状況を、タイムラインの性質に関係なく、反復処理全体で一貫して表現する便利な方法をデベロッパーに提供します。overallProgress プロパティがない場合、アニメーションの進行状況をアニメーションの反復回数と、アニメーションの currentTime が合計時間の割合（スクロール駆動型アニメーションの場合など）か、絶対時間量（時間駆動型アニメーションの場合など）かを考慮して手動で計算する必要があります。
Atomics オブジェクトの pause() メソッド
現在のコードがスピンロックを実行していることを CPU に伝えるため、Atomics 名前空間オブジェクトに pause() メソッドを追加します。
スクリプトの CSP ハッシュ レポート
複雑なウェブ アプリケーションでは、セキュリティ上の理由から、ダウンロードしたサブリソースを追跡する必要があることがよくあります。
特に、今後登場する業界標準とベスト プラクティス（PCI-DSS v4 など）では、ウェブ アプリケーションがダウンロードして実行するすべてのスクリプトのインベントリを保持することが求められています。
この機能は、CSP と Reporting API を基盤として、ドキュメントが読み込むすべてのスクリプト リソースの URL とハッシュ（CORS/同一オリジン用）をレポートします。
DOM の状態を保持する移動
要素の状態をリセットせずに DOM ツリー内で要素を移動できる DOM プリミティブ（Node.prototype.moveBefore）を追加します。
削除と挿入ではなく移動する場合、次のような状態が保持されます。
<iframe>個の要素が読み込まれたままになります。- アクティブな要素はフォーカスされたままになります。
- ポップオーバー、全画面表示、モーダル ダイアログは開いたままになります。
- CSS の切り替え効果とアニメーションは継続されます。
<area> で attributionsrc 属性を公開
<area> の attributionsrc 属性の公開を、公開されていない場合でも、属性の既存の処理動作に合わせます。
また、<area> 要素はファーストクラスのナビゲーション サーフェスであり、Chrome は <a> と window.open の他のサーフェスでこの属性をすでにサポートしているため、<area> でこの属性をサポートすることも理にかなっています。
要素のタイミングと LCP で粗いクロスオリジン renderTime を公開（Timing-Allow-Origin に関係なく）
要素のタイミングと LCP エントリには、画像またはテキストが描画された最初のフレームに合わせた renderTime 属性があります。
この属性は現在、画像リソースに Timing-Allow-Origin ヘッダーを要求することで、クロスオリジン画像に対して保護されています。ただし、この制限は簡単に回避できます（たとえば、同じオリジンとクロスオリジンの画像を同じフレームに表示するなど）。
この制限は混乱を招く可能性があるため、この制限を削除し、ドキュメントがクロスオリジン分離されていない場合は、すべてのレンダリング時間を 4 ミリ秒単位で粗くする予定です。これは、クロスオリジン画像に関する有用なデコード時情報の漏洩を防ぐのに十分な粗さであると考えられます。
responseStart を元に戻し、firstResponseHeadersStart を導入
103 Early Hints が有効になっている場合、レスポンスには 2 つのタイムスタンプがあります。
- Early Hints が届いたとき（103）
- 最終ヘッダーが到着したとき（例: 200）
Chrome 115 で firstInterimResponseStart がリリースされ、これらの 2 つのタイムスタンプを測定できるようになりました。また、responseStart（Time to First Byte（TTFB）で使用）の意味を「最終ヘッダー」に変更しました。このため、この一般的に使用される指標について同様の変更を行っていないブラウザやツールとの間でウェブの互換性の問題が生じました。
Chrome 133 では、この互換性の問題を解決するために responseStart の変更が元に戻され、代わりに firstResponseHeadersStart が導入されます。これにより、サイトは TTFB の元の定義を保持しながら、最終的なヘッダーまでの時間を測定できます。
FileSystemObserver インターフェース
FileSystemObserver インターフェースは、ファイル システムへの変更をウェブサイトに通知します。サイトは、ユーザーが以前に権限を付与したファイルやディレクトリに対する変更を、ユーザーのローカル デバイスまたはバケット ファイル システム（オリジン プライベート ファイル システムとも呼ばれます）で監視し、変更タイプなどの基本的な変更情報が通知されます。
省エネモードでのフリーズ
省エネモードが有効になっている場合、Chrome は、非表示でサイレントの状態が 5 分を超え、その中の同一オリジン フレームのサブグループが CPU 使用率のしきい値を超えている「ブラウジング コンテキスト グループ」をフリーズします。ただし、次の場合はフリーズされません。
- 音声またはビデオ会議機能を提供している（マイク、カメラ、画面/ウィンドウ/タブのキャプチャ、または「オープン」な RTCDataChannel か「ライブ」な MediaStreamTrack を含む RTCPeerConnection を特定することで検出）。
- 外部デバイスを制御するタブ（WebUSB、Web Bluetooth、WebHID、Web Serial を使用して検出）。
- 別の接続でのバージョン更新またはトランザクションをブロックする Web Lock または IndexedDB 接続を保持します。
フリーズは実行の一時停止で構成されます。これは、Page Lifecycle API で正式に定義されています。
省エネモードが有効になっているときに、バックグラウンド タブの約 10% がフリーズされるように、CPU 使用率のしきい値が調整されます。
複数のインポート マップ
現在、インポート マップは ES モジュールの前に読み込む必要があり、ドキュメントごとに 1 つのインポート マップしか使用できません。そのため、脆弱で、実際のシナリオでは使用が遅くなる可能性があります。それらの前に読み込まれるモジュールがあると、アプリ全体が破損します。また、モジュールが多いアプリでは、すべての可能なモジュールのマップを最初に読み込む必要があるため、大きなブロッキング リソースになります。
この機能により、複数のインポート マップを整合性のある決定論的な方法でマージすることで、ドキュメントごとに複数のインポート マップを使用できるようになります。
ストレージ アクセス ヘッダー
認証済み埋め込みでパーティショニングされていない Cookie をオプトインする別の方法を提供します。これらのヘッダーは、パーティション分割されていない Cookie が特定のネットワーク リクエストに含まれている（または含まれる可能性がある）かどうかを示し、サーバーがすでに付与されている「storage-access」権限を有効にできるようにします。「storage-access」権限を有効にする別の方法を提供することで、非 iframe リソースによる使用が可能になり、認証済み埋め込みのレイテンシを短縮できます。
Promise<DOMString> を使用した ClipboardItem の作成をサポート
非同期クリップボードの write() メソッドへの入力である ClipboardItem は、コンストラクタで Blob に加えて文字列値も受け入れるようになりました。ClipboardItemData は、Blob、文字列、または Blob か文字列のいずれかに解決される Promise になります。
WebAssembly Memory64
memory64 提案では、2^32 ビットを超えるサイズの線形 WebAssembly メモリのサポートが追加されています。新しい命令は提供されませんが、既存の命令が拡張され、メモリとテーブルの 64 ビット インデックスが許可されます。
Web Authentication API: PublicKeyCredential getClientCapabilities() メソッド
PublicKeyCredential getClientCapabilities() メソッドを使用すると、ユーザーのクライアントでサポートされている WebAuthn 機能を特定できます。このメソッドは、サポートされている機能のリストを返します。これにより、デベロッパーはクライアントの特定の機能に基づいて認証エクスペリエンスとワークフローを調整できます。
WebGPU: 1 コンポーネントの頂点形式（および unorm8x4-bgra）
サポートの欠如や古い macOS バージョン（どのブラウザでもサポートされなくなった）により、WebGPU の初回リリースには含まれていなかった追加の頂点形式を追加します。1 コンポーネントの頂点形式を使用すると、アプリケーションは必要なデータのみをリクエストできます。以前は、8 ビットと 16 ビットのデータ型に対して少なくとも 2 倍のリクエストが必要でした。unorm8x4-bgra 形式を使用すると、同じシェーダーを維持しながら BGRA エンコードされた頂点カラーを読み込むのが少し便利になります。
Web Cryptography API の X25519 アルゴリズム
「X25519」アルゴリズムは、[RFC7748] で指定された X25519 関数を使用して鍵交換を行うためのツールを提供します。「X25519」アルゴリズム識別子は、SubtleCrypto インターフェースで使用して、実装されたオペレーション（generateKey、importKey、exportKey、deriveKey、deriveBits）にアクセスできます。
新しいオリジン トライアル
Chrome 133 では、次の新しいオリジン トライアルにオプトインできます。
省エネモードでのフリーズを無効にする
このオプトアウト トライアルを使用すると、サイトは Chrome 133 でリリースされる省エネモードでのフリーズ動作をオプトアウトできます。
非推奨と削除
このバージョンの Chrome では、以下の非推奨と削除が導入されています。計画中の非推奨、現在の非推奨、以前の削除のリストについては、ChromeStatus.com をご覧ください。
今回の Chrome のリリースでは、1 つの機能のサポートが終了します。
WebGPU の maxInterStageShaderComponents 上限を非推奨に
maxInterStageShaderComponents limit は、複数の要因が組み合わさった結果、非推奨となりました。Chrome 135 で削除される予定です。
maxInterStageShaderVariablesによる冗長性: この上限は、シェーダー ステージ間で渡されるデータ量を制御するという同様の目的をすでに果たしています。- わずかな不一致: 2 つの上限の計算方法には若干の違いがありますが、その違いは小さく、
maxInterStageShaderVariablesの上限内で効果的に管理できます。 - 簡素化:
maxInterStageShaderComponentsを削除すると、シェーダー インターフェースが効率化され、デベロッパーの複雑さが軽減されます。微妙な違いのある 2 つの別々の上限を管理するのではなく、より適切な名前で包括的なmaxInterStageShaderVariablesに集中できます。
このリリースの Chrome では、2 つの機能が削除されています。
<link rel=prefetch> 5 分ルールを削除
以前は、<link rel=prefetch> を使用してリソースがプリフェッチされた場合、Chrome は 5 分以内の初回使用ではキャッシュ セマンティクス（max-age と no-cache）を無視して、再取得を回避していました。Chrome では、この特殊なケースが削除され、通常の HTTP キャッシュ セマンティクスが使用されるようになりました。
つまり、ウェブ デベロッパーは <link rel=prefetch> のメリットを享受するために、適切なキャッシュ ヘッダー（Cache-Control または Expires）を含める必要があります。
これは、非標準の <link rel=prerender> にも影響します。
初期設定の初回実行タブを介した Chrome スタートページのトリガーを削除
initial_preferences ファイルの first_run_tabs プロパティに chrome://welcome を含めても、何も起こらないようになりました。このページは、パソコン プラットフォームでトリガーされる初回起動時の動作と重複するため、削除されました。