Chrome 137 ベータ版

Rachel Andrew

公開日: 2025 年 5 月 1 日

特に明記しない限り、以下の変更は Android、ChromeOS、Linux、macOS、Windows 版の最新の Chrome ベータ版チャネル リリースに適用されます。ここに記載されている機能の詳細については、記載されているリンクまたは ChromeStatus.com のリストをご覧ください。Chrome 130 は 2025 年 4 月 30 日時点でベータ版です。最新版は、パソコンの Google.com または Android の Google Play ストアからダウンロードできます。

CSS と UI

このリリースでは、CSS と UI に 7 つの新機能を追加しました。

if() 関数

CSS の if() 関数を使用すると、条件付き値を簡潔に表現できます。セミコロンで区切られた一連の条件値ペアを指定します。この関数は、各条件を順番に評価し、最初に true になった条件に関連付けられた値を返します。条件のいずれも true と評価されない場合、関数は空のトークン ストリームを返します。これにより、複雑な条件ロジックをシンプルかつ簡潔に表現できます。例:

div {
      color: var(--color);
      background-color: if(style(--color: white): black; else: white);
  }
  .dark {
      --color: black;
  }
  .light {
      --color: white;
  }

<div class="dark">dark</div>
<div class="light">light</div>

reading-flow プロパティと reading-order プロパティ

reading-flow CSS プロパティは、フレックス、グリッド、ブロック レイアウト内の要素がユーザー補助ツールに公開され、Tab キーによるフォーカス ナビゲーションを使用してフォーカスされる順序を制御します。次のいずれかのキーワード値を指定します。

  • normal
  • flex-visual
  • flex-flow
  • grid-rows
  • grid-columns
  • grid-order
  • source-order

reading-order CSS プロパティを使用すると、読み上げフロー コンテナ内の順序を手動でオーバーライドできます。デフォルト値は 0 の整数です。

詳細については、論理的な連続フォーカス ナビゲーションに CSS 読み上げフローを利用するをご覧ください。また、読み上げフローの例をお試しください。

offset-path: shape()

shape() 関数は clip-path ですでにサポートされており、レスポンシブなクリッピングが可能です。offset-path でも有効にすることで、そのプロパティに同じ種類のシェイプを使用できる小さなギャップが解消されます。

SVGSVGElement で変換属性をサポート

この機能を使用すると、transform 属性を使用して、拡大縮小、回転、移動、スキューなどの変換プロパティを <svg> ルート要素に直接適用できます。この機能強化により、SVG 座標系全体またはそのコンテンツ全体を操作できるため、動的でレスポンシブなインタラクティブなベクター グラフィックをより柔軟に作成できます。この属性をサポートすることで、追加のラッパー要素や複雑な CSS の回避策を必要とせずに SVG 要素を変換できるため、スケーラブルでアニメーション化されたウェブ グラフィックの作成プロセスを効率化できます。

フラグメントを省略して、<use> が外部ドキュメントのルート要素を参照できるようにします。

この機能では、参照要件を緩和することで、SVG <use> 要素を効率化しています。現在のところ、SVG ドキュメント内のフラグメントを明示的に参照する必要があります。フラグメント ID が指定されていない場合、<use> はターゲットを解決できず、レンダリングも参照も行われません。

この機能を使用すると、フラグメントを省略するか、外部 SVG ファイル名を指定するだけで、ルート要素が自動的に参照されるため、ID をルートに割り当てるためだけに参照ドキュメントを変更する必要がなくなります。この機能強化により、この手動編集プロセスが簡素化され、効率が向上します。

accent-color プロパティのシステム アクセント カラーを Windows と ChromeOS に拡張

これにより、フォーム要素にオペレーティング システムのアクセント カラーを使用できます。accent-color CSS プロパティを使用すると、チェックボックス、ラジオボタン、進行状況バーなどのフォーム要素に、ユーザーのオペレーティング システムで定義されたアクセント カラーが自動的に適用されます。これは 2021 年から macOS でサポートされており、Windows と ChromeOS でもサポートされるようになりました。

view-transition-name: match-element

view-transition プロパティの match-element 値は、要素の ID に基づいて一意の ID を生成し、この要素では同じ値になります。これは、要素が移動され、ビュー遷移でアニメーション化したい単一ページ アプリのケースで使用されます。

ウェブ API

「支払い」WebAuthn 認証情報の作成時にスローされるエラータイプを調整

payment 認証情報の WebAuthn 認証情報の作成中にスローされるエラータイプを修正しました。過去の仕様が一致しないため、ユーザーの有効化なしでクロスオリジン iframe に payment 認証情報を作成すると、支払い以外の認証情報でスローされる NotAllowedError ではなく、SecurityError がスローされます。これは互換性を破る変更です。以前はスローされたエラーのタイプ（e instanceof SecurityError など）を検出していたコードが影響を受けます。認証情報の作成中にエラーを一般に処理するコード（catch (e) など）は、引き続き正しく機能します。

blob URL のパーティショニング: 取得/ナビゲーション

ストレージ パーティションの延長として、ストレージキー（トップレベル サイト、フレーム オリジン、has-cross-site-ancestor ブール値）による Blob URL アクセスのパーティショニングを実装します。ただし、フレーム オリジンのみでパーティショニングされるトップレベル ナビゲーションを除きます。

この変更は、PartitionedBlobURLUsage ポリシーを設定することで一時的に元に戻すことができます。他のストレージ パーティショニング関連のエンタープライズ ポリシーが非推奨になったときに、このポリシーも非推奨となります。

応答しないウェブページのクラッシュ レポートのコールスタック

この機能は、JavaScript コードが無限ループを実行しているなどの非常に長い計算が原因でウェブページが応答しなくなったときに、JavaScript 呼び出しスタックをキャプチャします。これにより、デベロッパーは応答しない原因を特定し、簡単に修正できます。理由が「応答なし」の場合、JavaScript 呼び出しスタックがクラッシュ レポート API に含まれます。

キャンバスの浮動小数点数カラータイプ

CanvasRenderingContext2D、OffscreenCanvasRenderingContext2D、ImageData で浮動小数点ピクセル形式（8 ビット固定小数点形式ではなく）を使用できるようになりました。これは、高精度アプリケーション（医療画像化など）、ハイ ダイナミック レンジ コンテンツ、リニア作業色空間に必要です。

信頼できない平文の HTTP プリレンダリングを禁止する

現在、事前レンダリングは HTTP と HTTPS で許可されていますが、プリフェッチは HTTPS でのみ機能します。プリレンダリングを制限してプリフェッチと整合させる。

Document-Isolation-Policy

Document-Isolation-Policy を使用すると、ドキュメントで crossOriginIsolation を有効にできます。この場合、COOP または COEP をデプロイする必要はなく、ページの crossOriginIsolation ステータスも関係ありません。このポリシーはプロセス分離によってサポートされています。また、ドキュメントの CORS 以外のクロスオリジン サブリソースは、認証情報なしで読み込まれるか、CORP ヘッダーが必要になります。

詳しくは、ドキュメント分離ポリシー: 強力なウェブ機能を簡単に有効にするをご覧ください。

ウェブ暗号における Ed25519

この機能により、Web Cryptography API で Curve25519 アルゴリズム（署名アルゴリズム Ed25519）のサポートが追加されます。

IP アドレスのロギングとレポート

Chrome Enterprise では、ローカル IP アドレスとリモート IP アドレスを収集して報告し、それらをセキュリティ調査ログ（SIT）に送信することで、セキュリティ モニタリングとインシデント対応の機能を強化しています。また、オプションで、管理者が Chrome Enterprise レポート コネクタを使用して、自社およびサードパーティの SIEM プロバイダに IP アドレスを送信できるようになります。Chrome Enterprise Core をご利用のお客様にお使いいただけます。

JavaScript Promise の統合

JavaScript Promise Integration（JSPI）は、WebAssembly アプリケーションを JavaScript Promise と統合できる API です。これにより、WebAssembly プログラムが Promise の生成元として機能し、Promise を含む API とやり取りできるようになります。特に、アプリケーションが JSPI を使用して Promise を含む（JavaScript）API を呼び出すと、WebAssembly コードが停止します。WebAssembly プログラムの元の呼び出し元には、WebAssembly プログラムが最終的に完了したときに満たされる Promise が渡されます。

Language Detector API

Language Detector API は、指定された文字列の言語を識別する JavaScript API です。この API は、言語検出タスクを実行するようにファインチューニングされた基盤となるモデルをベースにしています。

Language Detector API は、文字列を受け取ると、検出された言語の順序付きリストと、各結果の信頼スコアを返します。

必要に応じて、Language Detector インスタンスを作成するときに、想定される入力言語のリストを渡して、特定の言語で検出が実行されるユースケースに合わせて最適化できます。

SVGMatrix、SVGRect、SVGPoint の浮動小数点属性と引数を制限

SVGMatrix、SVGRect、SVGPoint に浮動小数点属性または引数を設定する際、Infinity または Nan として設定できなくなりました。SVG 仕様で定義されているように、設定しようとすると JavaScript 例外がスローされます。

Selection API getComposedRanges と direction

この機能では、Selection API の 2 つの新しい API メソッドが提供されます。

  • Selection.direction: 選択範囲の方向を "none"、"forward"、または "backward" として返します。
  • Selection.getComposedRanges(): 0 または 1 の「コンポーズされた」StaticRange のリストが返されます。

「合成」された StaticRange は、通常の範囲ではできないシャドウ境界を越えることができます。

次に例を示します。

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

選択範囲が、shadowRoots リストに指定されていないシャドウルート境界を越える場合、StaticRange のエンドポイントは、そのツリー外になるように「スコープが再設定」されます。これにより、不明なシャドウ ツリーが公開されなくなります。

ウェブアプリ スコープ拡張機能

ウェブアプリが他のオリジンにスコープを拡張できるようにする scope_extensions ウェブアプリ マニフェスト フィールドを追加します。

例:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

これにより、複数のサブドメインとトップレベル ドメインを制御するサイトを 1 つのウェブアプリとして表示できます。

リストに登録されているオリジンが、.well-known/web-app-origin-association 構成ファイルを使用してウェブアプリとの関連付けを確認する必要があります。

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

WebAssembly ブランチ ヒント

特定の分岐命令が特定のパスをたどる可能性が高いことをエンジンに通知することで、コンパイルされた WebAssembly コードのパフォーマンスを向上させます。これにより、エンジンはコード レイアウト（命令キャッシュ ヒットの改善）とレジスタ割り当てについてより適切な判断を行うことができます。

WebGPU: externalTexture バインディングの GPUTextureView

GPUBindGroup の作成時に、externalTexture バインディングに GPUTextureView を使用できるようになりました。

WebGPU: copyBufferToBuffer のオーバーロード

GPUCommandEncoder copyBufferToBuffer() メソッドに、オフセットとサイズのパラメータ（省略可）を指定できる新しいオーバーロードを使用してバッファ全体をコピーする簡単な方法が追加されました。

新しいオリジン トライアル

Chrome 137 では、次の新しいオリジン トライアルを有効にできます。

フルフレームレートのレンダリング ブロック属性

ブロック属性に新しいレンダリング ブロック トークン full-frame-rate を追加しました。レンダラがフル フレームレート トークンでブロックされると、レンダラは低いフレームレートで動作し、読み込みに多くのリソースを予約します。

レンダリングされていない iframe でメディアの再生を一時停止

"media-playback-while-not-rendered" 権限ポリシーを追加して、埋め込み iframe のメディア再生を埋め込み元のウェブサイトが一時停止できるようにします。この iframe はレンダリングされていない（つまり、display プロパティが none に設定されている）必要があります。これにより、デベロッパーはよりユーザー フレンドリーなエクスペリエンスを構築できるようになります。また、ユーザーには表示されないコンテンツの再生をブラウザに任せることで、パフォーマンスも向上します。

Rewriter API

Rewriter API は、オンデバイスの AI 言語モデルを基に、リクエストされた方法で入力テキストを変換して言い換えます。デベロッパーは、この API を使用して、文字数の制限に収まるようにテキスト内の冗長性を削除したり、対象読者に合うようにメッセージを言い換えたり、有害な表現が使用されているメッセージが見つかった場合により建設的なものにしたり、投稿や記事を言い換えてよりシンプルな単語やコンセプトを使用したりできます。

Writer API

Writer API は、デバイス上の AI 言語モデルを基に、文章作成タスクのプロンプトから新しい文章を作成するために使用できます。デベロッパーは、この API を使用して、構造化データのテキストによる説明を生成したり、レビューや商品説明に基づいて商品に関する投稿を作成したり、長所と短所のリストから詳細ビューを拡張したりできます。