Chrome 148 ベータ版

Rachel Andrew

公開日: 2026 年 4 月 8 日

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

CSS と UI

CSS の名前のみのコンテナクエリ

要素に container-type を設定しなくても、container-name のみに基づいて CSS コンテナをクエリできるようになりました。

#container {
  container-name: --foo;
}
@container --foo {
  input { background-color: green; }
}

<div id="container">
  <div><input></div>
</div>

ユーザーインタラクション時にテキストのオーバーフローをクリップする

ユーザーが text-overflow: ellipsis が設定されたテキストを操作（編集やカーソルナビゲーションなど）すると、テキストは一時的に省略記号からクリップに切り替わります。これにより、ユーザーは非表示のオーバーフローコンテンツを表示して操作できます。この機能は、編集可能な要素と編集不可能な要素の両方に適用されます。<textarea> や <input> などのフォームコントロールでは、この動作はすでにサポートされています。

`dragEnter`、`dragLeave`、`dragOver` イベントの `dropEffect` を正しく設定

ドラッグ＆ドロップの仕様では、dataTransfer オブジェクトの dropEffect 属性が dragEnter、dragOver、dragLeave で特定の事前定義された値を持つ必要があります。dragEnter と dragOver は、現在の effectAllowed に基づく dropEffect を持つ必要があります。dragLeave には常に none dropEffect が必要です。現在、Chrome はこれらのルールに準拠していません。Chrome 148 以降では、Chrome は仕様を尊重し、この属性に正しい値を割り当てます。

動画要素と音声要素を遅延読み込みする

この機能では、loading 属性を <video> 要素と <audio> 要素に追加します。これにより、デベロッパーは loading="lazy" を使用して、要素がビューポートに近づくまでメディアリソースの読み込みを遅らせることができます。これは、<img> 要素と <iframe> 要素の既存の遅延読み込みの動作と一致しており、ページの読み込みパフォーマンスが向上し、データ使用量が削減されます。

機能検出用の CSS `at-rule()` 関数

この機能により、CSS @supports に at-rule() 関数が追加され、CSS @ 規則のサポートを検出できるようになります。

キーワード「`revert-rule`」を追加する

revert-rule キーワードは、revert-layer がカスケードを前のレイヤにロールバックするのと同様に、カスケードを前のルールにロールバックします。次に例を示します。

div { color: green; }
div { color: revert-rule; /* Effectively green */ }

これは、条件が満たされない場合に現在のルールを削除できるため、条件付きで特に便利です。

div {
  display: if(style(--layout: fancy): grid; else: revert-rule);
}

`text-decoration-skip-ink: all` を支援する

この機能では、CSS の text-decoration-skip-ink プロパティの all 値のサポートが追加されます。text-decoration-skip-ink プロパティはすでに auto と none をサポートしています。all の値は、CJK 文字を含むすべてのグリフに無条件でインクスキップを適用することで、これを拡張します。一方、auto は CJK 文字をスキップしません。これは、一般的な下線位置で表意文字のスクリプトにインクスキップを適用すると、望ましくない視覚効果が生じる傾向があるためです。text-decoration-skip-ink: all を使用すると、CJK グリフとの競合を避けるために text-underline-position または text-underline-offset を調整した作成者は、これらの文字のインクスキップを明示的に有効にできます。

ウェブ API

マニフェストメンバーをローカライズする

この機能はマニフェストメンバーのローカライズをサポートしており、アプリはユーザーの言語や地域に合わせて名前、説明、アイコン、ショートカットを調整できます。デベロッパーは、ウェブアプリマニフェストでローカライズされた値を提供します。ブラウザはユーザーの言語設定に基づいて適切なリソースを自動的に選択するため、さまざまな市場で言語サポートが導入されます。

テキストの整形とグリフのレンダリングで Open Font Format `avar2` をサポート

avar（軸のバリエーション）テーブルのバージョン 2 では、フォントデザイナーが補間をより細かく制御できる可変フォントを作成できます。元のバリアブルフォントの仕様では軸が個別に処理されますが、avar2 では軸が互いに影響し合います。これにより、コンテンツ作成者が使いやすいフォントが作成され、コンパクトなストレージが可能になります。

Avar2 は、フォントバリエーションと同じ概念を使用しますが、デザイン軸自体に可変デルタ値を適用できます。これは、複数の軸の範囲で実行できます。

たとえば、複数のバリエーション軸を一度に制御するメタスライダーを作成できます。これにより、ユーザーはフォントのデザインスペースの有用なコーナーを微調整して見つける必要がなくなります。

Avar2 を使用すると、フォントデザイナーはフォントの利用可能なバリエーションスペースをより細かく制御し、複数の軸にわたってデザイン軸の調整を連携させることができます。avar バージョン 2 テーブル内で軸間の関係を数学的に定義することで、フォントは少ないマスターで複雑なデザインを実現できます。これにより、補間がより効率的に保存されるため、ファイルサイズが小さくなります。

Web Authentication Immediate UI モード

navigator.credentials.get() のこの新しいモードでは、サイトのパスキーまたはパスワードがブラウザにすぐに認識される場合、ブラウザのログイン UI がユーザーに表示されます。それ以外の場合、そのような認証情報が利用できない場合は、NotAllowedError で Promise を拒否します。これにより、ブラウザが成功する可能性の高いログイン認証情報の選択肢を提供できる場合、サイトはログインページを表示しないようにできます。このような認証情報が存在しない場合でも、ログインページフローは許可されます。

Android での Web Serial API のサポート

Web Serial API は、シリアルデバイスに接続するためのインターフェースを提供します。これらのデバイスは、ユーザーのシステムのシリアルポート、またはシリアルポートをエミュレートする取り外し可能な USB デバイスや Bluetooth デバイスを介して接続できます。この API は Android でサポートされるようになりました。

特に教育、ホビー、産業分野のユーザーは、制御にカスタムソフトウェアを必要とする周辺機器をコンピュータに接続します。たとえば、学校ではロボット工学がコンピュータプログラミングや電子工学の教育によく使用されます。これには、ロボットにコードをアップロードしたり、リモートで制御したりできるソフトウェアが必要です。産業用またはホビー用の設定では、フライス盤、レーザーカッター、3D プリンタなどの機器は、接続されたコンピュータで実行されるプログラムによって制御されます。これらのデバイスは、シリアル接続を介して小さなマイクロコントローラによって制御されることがよくあります。

WebGPU `linear_indexing` 機能

この機能により、ユーザーエクスペリエンスを向上させるために、2 つの新しいコンピュートシェーダー組み込み値が追加されます。これらの値は、すべてのバックエンドで実装されます（既存の組み込み値のポリフィルとして）。

Android での `SharedWorker` のサポート

予測不可能なプロセスライフサイクルに関する懸念から、Android では SharedWorker が長らく無効になっていました。Chrome デベロッパーは、ユーザーやウェブデベロッパーに通知することなく SharedWorker インスタンスが予期せず終了する可能性があると考えていました。これは受け入れられないと見なされました。

ただし、GitHub での最近の議論では、SharedWorker のプロセスライフサイクルの予測不可能性は、以前考えられていたほど大きな問題ではないことが示唆されています。このため、Chrome は Android で SharedWorker を再度有効にすると同時に、安定した信頼性の高いエクスペリエンスを確保するためにこの動作を調査しています。

共有ワーカーのライフタイムの延長

この更新では、SharedWorker コンストラクタに新しいオプション extendedLifetime: true が追加されます。これにより、現在のすべてのクライアントがアンロードされた後も、共有ワーカーがアクティブな状態を維持するようにリクエストされます。主なユースケースは、Service Worker に依存することなく、ページがアンロードされた後に JavaScript を必要とする非同期処理を実行できるようにすることです。

Prompt API

Prompt API を使用すると、ウェブデベロッパーはブラウザが提供するオンデバイス AI 言語モデルに直接アクセスできます。API 設計では、クラウド API の形状に合わせてきめ細かい制御が可能です。これにより、個々のユースケースに合わせて調整されたモデルインタラクションでサイトを段階的に強化できます。これは、タスクベースの言語モデル API（Summarizer API など）や、デベロッパーが提供する ML モデルを使用した汎用的なオンデバイス推論用のさまざまな API やフレームワークを補完するものです。最初の実装では、テキスト、画像、音声の入力と、生成されたテキストが事前定義された正規表現と JSON スキーマ形式に準拠することを保証するレスポンス制約がサポートされています。

これにより、さまざまなユースケースに対応できます。たとえば、画像キャプションの生成、画像検索の実行、音声の文字起こし、音声イベントの分類、特定の指示に従ったテキストの生成、マルチモーダルソースマテリアルからの情報や分析情報の抽出などを行うことができます。

この API は Chrome 拡張機能ですでにリリースされています。このインテントは、ウェブでの配送をトラッキングします。エンタープライズポリシー GenAILocalFoundationalModelSettings を使用して、基盤となる言語モデルのダウンロードを無効にできます。その場合、この API は使用できなくなります。企業管理者は、BuiltInAIAPIsEnabled ポリシーを設定して、他のオンデバイスの生成 AI 機能を許可しながら、組み込み AI API の使用をブロックすることもできます。

言語サポートのログ:

Chrome 139 以前では、英語（'en'）のみがサポートされていました。
Chrome 140 でスペイン語と日本語（'es' と 'ja'）のサポートが追加されました

安全なお支払い確認機能を取得する

この機能により、ウェブデベロッパーがブラウザの Secure Payment Confirmation の実装機能を取得できる新しい静的メソッドが Payment Request API に追加されます。これにより、ウェブデベロッパーはセキュアな支払い確認で利用できる機能を確認できます。その後、これらの機能で安全な支払い確認を使用するかどうかを決定できます。

IDNA ContextJ ルール

IDNA は、ドメイン名で ASCII 以外の文字を使用するためのメカニズムです。http://네이버.한국/ などの URL を http://xn--950bt9s8xi.xn--3e0b707e/（naver.com へのリダイレクト）としてエンコードします。

URL 仕様では CheckJoiners フラグを設定します。これにより、IDNA2008 の ContextJ ルールが有効になります。これにより、URL のほとんどの場所で ZWNJ（U+200C ゼロ幅の非接合子）と ZWJ（U+200D ゼロ幅の接合子）が禁止されます。実装では、このルールが実装されている ICU に UIDNA_CHECK_CONTEXTJ オプションが渡されます。

同じ src の再割り当てで no-store 画像を再利用

この機能により、同じ src 値が <img> 要素に再割り当てされたときに、同じドキュメントの利用可能な画像の再利用で Cache-Control: no-store の再読み込みがバイパスされます。以前は、画像がすでにデコードされてドキュメントで使用可能になっていても、Blink は画像を再取得していました。これは、既存の Gecko と WebKit の動作と一致します。

Resource Timing に `contentType` フィールドを追加

この機能では、サーバーから返された、取得したリソースのコンテンツタイプに対応する文字列を保持するために、PerformanceResourceTiming に contentType フィールドを追加します。

ドラッグ開始時のポインタイベントを抑制する

HTML 仕様によると、ドラッグが開始されると、ユーザーエージェントはドラッグソースに適切なイベントを送信して、ポインタイベントストリームが終了したこと、およびこのポインタからこれ以上イベントが送信されないことを示す必要があります。このコードは、マウスイベントでは部分的に実装され、Android のタッチドラッグでは完全に実装されました。この機能により、Chrome は他のすべてのプラットフォームでこの仕様要件を完全に満たすことを目指しています。実際には、ドラッグが開始された後、ドラッグソースは pointercancel、pointerout、pointerleave イベントを受け取り、現在のイベントストリームが終了したことを示します。

WebRTC Datachannel: 常にデータチャネルをネゴシエート

この機能は、データチャネルを作成する前に、アプリケーションが SDP オファーでデータチャネルをネゴシエートする方法を定義する WebRTC 拡張機能 alwaysNegotiateDataChannels を実装します。また、音声または動画の m セクションの前にデータ m= セクションをネゴシエートし、[BUNDLE] の「オファラータグ付き m= セクション」として使用します。

つまり、alwaysNegotiateDataChannels: true で RTCPeerConnection を作成してから createOffer() を呼び出すと、SDP にアプリケーション m 行を含むオファーが作成されます。次に例を示します。

  const pc = new RTCPeerConnection({
    alwaysNegotiateDataChannels: true});
  const offer = await pc.createOffer();

音声トランシーバとデータチャネルも追加すると、オファーは SDP でアプリケーション m-line の後に音声 m-line をネゴシエートします。

  const pc = new RTCPeerConnection({
    alwaysNegotiateDataChannels: true});
  pc.addTransceiver('audio');
  pc.createDataChannel('somechannel');
  const offer = await pc.createOffer();

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

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

エージェントによるフェデレーションログイン

エージェントブラウザが連携されたアカウントを使用してユーザーをウェブサイトに安全にログインさせるための FedCM 拡張機能のセット。

接続許可リスト

接続許可リストは、ドキュメントまたはワーカーから Fetch API や他のウェブプラットフォーム API を介して開始された接続を制限することで、外部エンドポイントを明示的に制御できるように設計された機能です。提案された実装では、認可されたエンドポイントリストをサーバーから HTTP レスポンスヘッダーを介して配布します。ユーザーエージェントは、ページに代わって接続を確立する前に、この許可リストに対して宛先を評価します。検証済みのエンドポイントへの接続は許可されますが、リスト内のエントリと一致しない接続はブロックされます。

コンテナのタイミング

Container Timing API を使用すると、DOM のアノテーション付きセクションが画面に表示され、最初のペイントが完了したタイミングをモニタリングできます。DOM のサブセクションを containertiming 属性でマークし（Element Timing API の elementtiming と同様）、そのセクションが初めてペイントされたときにパフォーマンスエントリを受け取ることができます。この API を使用すると、ページのさまざまなコンポーネントのタイミングを測定できます。

宣言型 CSS モジュールスクリプト

宣言型 CSS モジュールスクリプトは、既存のスクリプトベースの CSS モジュールスクリプトの拡張機能です。これにより、デベロッパーは宣言型シャドールートを含む宣言型スタイルシートをシャドールートと共有できます。デベロッパーは、<style type="module" specifier="foo"> を使用してインラインスタイルモジュールを定義し、specifier や <template shadowrootmode="open" shadowrootadoptedstylesheets="foo"> などの URL を参照して、宣言型モジュールを宣言型 Shadow DOM に適用できます。

HTML-in-canvas

HTML-in-canvas は、コンテンツのインタラクティビティとアクセシビリティを維持しながら、レンダリング DOM 要素をキャンバスまたは WebGL / WebGPU テクスチャに直接カスタマイズできる新しい API です。3 つの部分で構成されています。キャンバス要素をオプトインする属性（layoutsubtree）、子要素を描画するメソッド（2d: drawElementImage、webgl:texElementImage2D、webgpu: copyElementImageToTexture）、インタラクティブ機能のために画面上の要素の変換を正しく更新する方法です。

長いアニメーションフレームスタイルの時間

この機能により、Long Animation Frame API に styleDuration と forcedStyleDuration の情報が追加されます。これにより、開発者はスタイルとレイアウトの時間を区別できます。

`OpaqueRange`

OpaqueRange は、フォームコントロールの値（<textarea> やテキスト <input> など）内のテキストのライブスパンを表します。これにより、デベロッパーは範囲のような API を使用して値のテキストを操作できます。

これにより、getBoundingClientRect() や getClientRects() などの操作が可能になり、CSS ハイライト API と組み合わせて、インライン候補、ハイライト、アンカー付きポップオーバーなどの UI を使用できます。値オフセットのみを公開し（startContainer と endContainer に対しては null を返す）、カプセル化を維持するため、DOM エンドポイントと内部構造は公開されません。

HTML の処理命令を解析する

処理命令（構文: <?target data>）は、XML で公開されている既存の DOM 構造です。この構成により、要素ではないノードオブジェクトがドキュメントの処理において意味を持つようになります。たとえば、新しい DOM 要素を必要とせず、CSS に関する限り DOM 構造を変更せずに、ストリーミングやハイライト表示の範囲を示すために使用できます。これらは、バッファリングとストリーミングの方法に関する HTML パーサーのディレクティブとしても使用できます。

Permissions Policy: focus-without-user-activation

このポリシーにより、埋め込みコンテンツのプログラマティックフォーカスを focus-without-user-activation 権限ポリシーで制御できるようになります。フレームでポリシーが拒否された場合、ユーザーアクティベーションによってトリガーされない限り、プログラムによるフォーカス呼び出し（element.focus()、autofocus、window.focus()、dialog.showModal()、ポップオーバーのフォーカス）はブロックされます。クリックやタブ移動など、ユーザーが開始したフォーカスは影響を受けません。ポリシーは、Permissions-Policy HTTP レスポンスヘッダーまたは iframe allow 属性で設定できます。フォーカス委任がサポートされています。フォーカスのある親フレームは、子フレームにポリシーが拒否されていても、プログラムで子 iframe にフォーカスを渡すことができます。フレームにフォーカスが設定されると、そのフレームは自身のサブツリー内でフォーカスを移動できます。

Prompt API のサンプリングパラメータ

この機能により、Prompt API にサンプリングパラメータが追加されます。これらのパラメータは、モデルからトークンをサンプリングする方法を制御します。これにより、デベロッパーは出力の創造性やランダム性を制御できます。また、設定値を読み取るために LanguageModel インスタンスに属性を追加します。また、これらのパラメータのデフォルト値と最大値を取得する静的 LanguageModel 関数も追加します。最初の実装では、temperature パラメータと topK パラメータを追加します。

ウェブアプリの HTML インストール要素

この機能により、ウェブサイトはユーザーにウェブアプリのインストールを宣言的に促すことができます。この要素は、別のオリジンからコンテンツをインストールできる 2 つの属性をオプションで受け入れます。

Chrome 148 ベータ版 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

CSS と UI

CSS の名前のみのコンテナクエリ

ユーザー インタラクション時にテキストのオーバーフローをクリップする

dragEnter、dragLeave、dragOver イベントの dropEffect を正しく設定

動画要素と音声要素を遅延読み込みする

機能検出用の CSS at-rule() 関数

キーワード「revert-rule」を追加する

text-decoration-skip-ink: all を支援する