Chrome 150 ベータ版

Rachel Andrew

公開日: 2026 年 6 月 3 日

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

CSS と UI

AccentColor と AccentColorText のシステムカラー

CSS で AccentColor と AccentColorText のシステムカラーを使用すると、ユーザーのデバイスで指定されたシステム アクセントカラーにアクセスできます。この機能により、インストールされたウェブ アプリケーションなど、ユーザーがオペレーティング システムのテーマとの統合を期待するコンテキストで、ウェブ コンテンツにアプリのようなスタイルを適用できます。システム アクセントカラーをレンダリングするには、最初のプロファイルでインストールされたウェブ アプリケーションを使用する必要があります。

polygon() のオプションの丸めパラメータを許可する

polygon() CSS シェイプ関数で、オプションの角の丸めパラメータを指定できます。開発者は、ベジェ曲線を手動で計算することなく、長さの値を指定してポリゴンの角を丸めることができます。

アニメーション可能なズーム

CSS の zoom プロパティはアニメーション可能で、<number> として補間されます。開発者は、ズームをトランジションしてアニメーション化することで、要素とそのレイアウトをスムーズにスケーリングできます。これは、既存の変換ベースのスケーリングを補完するものです。

CSS URL リクエスト修飾子

CSS の url() 関数は、引用符で囲まれた URL 文字列の後に、オプションのリクエスト修飾子 cross-origin()、integrity()、referrer-policy() を受け入れます。これらの修飾子は、HTML マークアップや JavaScript を変更することなく、参照されるリソースのフェッチ動作を CSS から直接制御します。

たとえば、background-image: url("image.png" cross-origin(anonymous)) 画像をフェッチします は、CORS 匿名モードを使用して画像をフェッチします。

CSS の text-fit プロパティ

テキストノードのフォントサイズを、包含ボックスの幅にぴったり合うようにスケーリングします。

このプロパティを使用すると、開発者は、フォントサイズを手動で計算したり、複雑な JavaScript の回避策を使用したりすることなく、見出しや動的コンテンツが利用可能な水平方向のスペースを埋めるようにできます。このプロパティは、さまざまな画面サイズやテキストの長さで視覚的な配置を維持する、レスポンシブ タイポグラフィ向けの堅牢な CSS ネイティブ ソリューションを提供します。

CSS の background-clip: border-area

CSS Backgrounds Level 4 で定義されているように、CSS の background-clip プロパティに border-area 値を実装します。background-clip 値は、要素の背景をそのボーダー ストロークで描画された領域にクリップします。この際、border-width と border-style が考慮され、border-color の透明度は無視されます。この値を使用すると、border-image を使用せずにグラデーション ボーダーを作成できます。

CSS の image(<color>) 関数

image() 関数を使用すると、開発者は任意の色から単色の画像を生成できます。構文は image() = image( <color> ) です。

画像値を使用した CSS の light-dark()

CSS の light-dark() 関数を拡張して、作成者のスタイルシートで url()、image-set()、none などの画像値を受け入れるようにします。これにより、background-image、list-style-image、border-image-source、cursor、content などの画像プロパティが、ユーザーが選択したカラーパターンに基づいて自動的に切り替わります。以前は、この動作はユーザー エージェントのスタイルシートでのみ許可されていました。この変更は CSS Color 5 仕様に準拠しており、Firefox の既存の実装と一致しています。

すべての子孫 selectedcontent 要素にクローンを作成する

selectedcontent 要素のエッジケースにいくつかの小さな変更が加えられています。

  • 複数の selectedcontent 要素が同時に <select> 要素に配置されると、DOM 順の最初の要素だけでなく、すべての要素が最新の状態に保たれます。
  • セキュリティ上の問題を修正するため、挿入、削除、移動の手順で selectedcontent 要素の更新が遅延します。更新は、挿入後の手順またはマイクロタスクを使用して遅延されます。

カンマ区切りのコンテナクエリ

@container ルールごとに複数のクエリをサポートします。クエリの少なくとも 1 つが一致する場合、@container ルールが適用されます。

この機能により、すべてのブラウザでサポートされていない機能のフォールバック クエリを使用できます。

例:

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

複数のクエリのサポートに加えて、オブジェクト モデルが拡張され、CSSContainerRule API の conditions 属性がサポートされるようになりました。

印刷できない領域を CSS に公開する

通常、プリンタには、用紙の 4 つの端に、プリンタの用紙処理メカニズムが原因で確実に印刷できない小さな領域があります。デフォルトのページ余白はこれらの領域よりも大きくなることが想定されますが、作成者が自分で余白を設定する場合や、カスタム ヘッダーやフッター用に @page 余白ボックスを追加する場合など、安全に印刷できる場所を特定する方法が必要です。

CSS 記述子 page-margin-safety を使用すると、このような印刷できない領域を避けることができます。

focusgroup 属性

作成者は、手動でコーディングされたロービング tabindex スクリプトを置き換えて、複合ウィジェットに矢印キー ナビゲーション、保証されたタブストップ、最後にフォーカスされたメモリを宣言的に付与できます。 例:

<div focusgroup="toolbar wrap" aria-label="Formatting">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

メディア要素の疑似クラス

:playing、:paused、:seeking、:buffering、:stalled、:muted、 および :volume-locked の CSS 疑似クラスは、<audio> 要素と <video> 要素 の状態に基づいて一致します。

この機能は、 Interop 2026 の重点分野の 1 つです。

popover=hint の動作の変更

この変更では、popover=hint 属性と popover=auto とのやり取りについて、改訂され簡素化されたスタッキング モデルが実装されます。以前は、popover=hint の内部に popover=auto をネストするなど、一部のエッジケースで、これら 2 種類のポップオーバー間のやり取りが複雑になり、予期しない動作が発生する可能性がありました。新しいモデルでは、popover=hint を開いても、関連のない popover=auto 要素が誤って閉じられることはなくなりました。ヒント ポップオーバーは、祖先の popover=auto が非表示になった場合、または関連のない新しい popover=auto が開かれた場合にのみ非表示になります。また、開発者はヒント ポップオーバー内に自動ポップオーバーを安全にネストできます。ネストされた popover=auto は、例外をスローしたりスタックを中断したりするのではなく、正常にダウングレードして popover=hint として動作します。 この機能により、開発者はカスタマイズ可能な <select> を popover=hint 内に配置できます。

予測可能性をさらに高め、複雑な状態の変更を防ぐため、Chrome では beforetoggle イベント内からポップオーバーを開閉する動作も厳格化されています。以前は、考えられるケースの一部に対してはガードが設定されていましたが、すべてではありませんでした。この変更では、これらのケースを検出するメカニズムが刷新され、このようなケースすべてに対してより確実に InvalidStateError がスローされるようになります。この変更により、ポップオーバーの状態管理が安定し、ループ再入バグを防ぐことができます。

これらの変更は、GitHub の HTML 仕様の pull リクエストに関する Mozilla との標準に関する話し合いに基づいて行われました。

相対アルファ色

相対アルファ色を使用すると、色のチャンネルを書き換えることなく、既存の色の半透明バージョンを直接 CSS で派生させることができます。 現在、開発者は、不透明度が異なる同じ色が必要な場合、コンポーネント値を複製するか、事前に計算されたトークンを別途作成する必要があります。 CSS Color 5 の alpha() 関数は、元の色のコンポーネントを保持し、アルファのみを変更するため、作成のオーバーヘッドが減り、カラートークンを再利用して管理しやすくなります。

レスポンシブ サイズの <iframe>

サイトは、レスポンシブ サイズの iframe を選択できます。これにより、親ドキュメントの <iframe> 要素が iframe ドキュメントのレイアウト オーバーフロー サイズに合わせてサイズ調整され、子ドキュメントでのスクロールが回避されます。

flex-wrap:balance

flex-wrap:balance を使用すると、開発者は text-wrap:balance と同様に、コンテンツをフレキシブル ライン間でよりバランスの取れた状態に分散できます。

CSS @supports の named-feature() 関数

named-feature() 関数を使用すると、CSS の @supports ルールで、他の @supports メカニズムを使用してテストすることはできないが、テストすることが非常に重要と見なされる、特定の名前付き機能の小さなセットをクエリできます。

overscroll-behavior: chain

overscroll-behavior には、none、auto、contain の 3 つの値があります。これらの値は、スクロールの伝播とローカル境界効果という 2 つの独立した効果に影響します。たとえば、オーバースクロール ストレッチなどです。

  • none: スクロールの伝播なし、ローカル境界効果なし。
  • auto: スクロールの伝播、ローカル境界効果。
  • contain: スクロールの伝播なし、ローカル境界効果。

このリリースでは、セットを完成させる新しい値 chain が追跡されます。スクロールの伝播、ローカル境界効果なし。

この値は、スクロールとして実装されたサイドメニューなどの効果に便利です。メニューを表示して、端に達しても、オーバースクロールしたり、伸縮したり、変換したりすることはありません。ただし、スクロールは祖先にチェーンされます。

ウェブ API

プラグインとクロスオリジンまたは制限付き iframe で SVG フィルタを無効にする

Chrome 150 では、Scalable Vector Graphics（SVG）フィルタが、クロスオリジンまたは制限付き iframe（サンドボックス化されたものなど）や、埋め込みプラグイン（PDF など）に適用されなくなります。フレームまたはプラグインが SVG フィルタ効果で描画されると、効果ツリーがトラバースされ、SVG フィルタのない最上位の祖先が検索され、その効果が適用されます。

IndexedDB: SQLite バックエンド

Chromium の IndexedDB 実装は、LevelDB とフラット ファイルのハイブリッドを使用する以前の実装を置き換えるため、SQLite の上に書き換えられます。この変更はウェブ API に影響しません。

この書き換えにより、信頼性が向上し、パフォーマンスも向上することが期待されます。

現時点では、この変更は新しいデータストアに適用されます。 この変更は、多段階のプログレッシブ リリースのステップ 2 です。ステップ 1 を追跡する SQLite インメモリ コンテキストについては、 Chrome Platform Status の機能ページをご覧ください。

MediaStreamTrackProcessor フレーム カウンタ

MediaStreamTrackProcessor インターフェースに discardedFrames 属性と totalFrames 属性を追加します。これらのカウンタを使用すると、ウェブ デベロッパーは、プロセッサで受信およびドロップされたフレーム数を追跡することで、メディア処理パイプラインの健全性をモニタリングできます。

data: URL の不透明なオリジン

Chrome 150 では、DedicatedWorker と SharedWorker が data: URL を処理する方法が更新されます。これらのワーカーは、作成した スクリプトまたはページのセキュリティ オリジンを自動的に継承するのではなく、一意の不透明なオリジンが割り当てられます。

この変更は、ワーカーの HTML 仕様 に準拠し、これらのワーカーを作成者の同一オリジン 状態から分離することでセキュリティを強化します。これにより、 BroadcastChannel や同一オリジン ストレージなどのメカニズムを介してセンシティブ データにアクセスできなくなります。正しい分離境界を維持するため、これらのワーカーは、作成者と同じストレージ パーティション（最上位サイトや nonce の保持など）内に存在します。

このセキュリティ調整は、パソコンとモバイル プラットフォームでデフォルトで有効になっています。管理者は、一元化された構成でセキュリティ境界を確認または検証できます。技術的な実装の詳細と 仕様の参照については、 HTML Living Standard Worker Settingsのステップ 3 をご覧ください。

PWA オリジンの移行

ユーザーがプログレッシブ ウェブアプリ（PWA）をインストールすると、その ID とセキュリティ コンテキストはウェブにおけるオリジン（app.example.com など）に緊密にバインドされます。このバインディングは、リブランディング、ドメインの再構築、技術的な再アーキテクチャにより PWA のオリジンを変更する必要があるデベロッパーにとって大きな課題となります。このような変更を行うと、ユーザーは古いアプリを手動でアンインストールして新しいアプリを再インストールする必要があるため、中断が発生し、ユーザー減少数につながる可能性があります。Chrome 150 では、開発者がインストールされている PWA を新しい同一サイトのオリジンに移行し、ユーザーの信頼と 権限を維持するメカニズムが導入されています。

WebAppInstallForceList ポリシーは移行をブロックします。ウェブ アプリケーションに関するエンタープライズ ポリシーは主に URL とオリジンに基づいているため、移行によって管理者が構成した特定のポリシーがバイパスされる可能性があります。アプリが企業の管理者によって強制インストールされた場合、移行プロセスは実行されず、代わりに状況を説明するバナーが表示されます。

HTML で処理命令を解析する

処理命令（構文: <?target data>）は、XML で公開されている既存の DOM 構造です。要素ではないが、ドキュメントの処理に意味を持つノード オブジェクトを使用できます。

たとえば、新しい DOM 要素を必要とせず、CSS に関して DOM 構造を変更することなく、ストリーミングやハイライト表示の範囲を示すために使用できます。また、バッファリングとストリーミングの方法に関する HTML パーサーのディレクティブとしても使用できます。

順序不同のストリーミング

順序不同のストリーミングを使用すると、<template for> と処理命令の範囲 （<?start> と <?end>) を使用して、HTML を順不同で配信し、 JavaScript を使用せずにドキュメントの既存の部分を更新できます。

プログラムによるスクロールの Promise

この機能は、プログラムによるスムーズ スクロールの完了ステータスの信頼できるシグナルを提供します。Element と Window のすべてのスクロール メソッドは、スクロールの完了時に解決される Promise オブジェクトを返します。解決された値は、スクロールが中断されたかどうかを示します。

WebGPU Immediates

WGSL に新しいイミディエイト アドレス空間を追加し、レンダリング パス、コンピューティング パス、レンダリング バンドル エンコーダに setImmediateData() メソッドを追加します。これにより、GPU バッファ オブジェクトやバインド グループを作成せずに、頻繁に更新される少量のデータをシェーダーに直接渡すことができます。これは、描画呼び出しごとにオブジェクト インデックス、マテリアル インデックス、変換行列などの描画ごとのパラメータを更新する必要があるアプリケーションで特に便利です。バッファとバインド グループの管理オーバーヘッドを回避することで、パフォーマンスを大幅に向上させることができます。

Web Speech API: デバイス上の認識品質

SpeechRecognitionOptions に quality プロパティを追加して、SpeechRecognition インターフェースを拡張します。このプロパティを使用すると、開発者は processLocally: true を使用して、デバイス上の認識に必要なセマンティック機能を指定できます。

提案されている quality 列挙型は、command、dictation、conversation の 3 つのレベルをサポートしています。これは、タスクの複雑さとハードウェア要件の増加に対応しています。 この機能により、開発者は、ローカル デバイスで重要なユースケース（会議の文字起こしなど）を処理できるかどうか、またはクラウド サービスにフォールバックする必要があるかどうかを判断できます。これにより、デバイス上のモデル機能の不透明性が解消されます。

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

Chrome 150 では、次の新しい オリジン トライアルに参加できます。

メール確認プロトコル（EVP）

メール確認プロトコル（EVP）を使用すると、メールの OTP を手動で入力するのではなく、所有権の暗号証明をシームレスに提供することで、ユーザーがアカウントを作成、アクセス、復元できるようになります。

非推奨と削除

このリリースの Chrome では、以下の非推奨と削除が行われます。

FontFaceSet IDL から [LegacyNoInterfaceObject] を削除する

Chromium の FontFaceSet IDL では、以前は [LegacyNoInterfaceObject] が誤って使用されていました。これにより、FontFaceSet がグローバル プロパティとして非表示になり、コンストラクタ プロパティがプロトタイプから削除されていました。この動作は CSS Font Loading 仕様から逸脱しており、Safari と Firefox の動作とは異なっていました。

この削除により、FontFaceSet IDL から [LegacyNoInterfaceObject] が削除され、FontFaceSet がグローバル プロパティとして適切にアクセスできるようになります。IDL で constructor() が定義されていないため、JavaScript から new FontFaceSet() を呼び出すと、仕様で義務付けられている動作と一致して、TypeError: Illegal constructor が正しくスローされます。