ウェブブラウザ「Google Chrome」の最新安定版であるバージョン150がリリースされました。見出しや動的コンテンツの文字サイズをCSSだけで枠の幅に合わせる「text-fit」プロパティ、矢印キーでのフォーカス移動を宣言的に指定できる「focusgroup」属性、グラデーション枠線をCSSだけで作成しやすくする「background-clip: border-area」などが追加されています。

Chrome 150 の新機能  |  Blog  |  Chrome for Developers

https://developer.chrome.com/blog/new-in-chrome-150?hl=ja

Chrome 150 | Release notes | Chrome for Developers

https://developer.chrome.com/release_notes/150?hl=ja

◆CSSだけでテキストを枠の幅にフィットさせる「text-fit」

text-fitはテキストノードのフォントサイズを、そのテキストを含むボックスの幅にぴったり収まるように調整するプロパティです。

これまでは、見出しやユーザー名、商品名、スコア表示など、内容の長さが変わるテキストを限られた横幅に収めるには、JavaScriptで文字数や要素幅を測定してフォントサイズを計算したり、複数のCSS指定を組み合わせたりする必要がありました。Chrome 150以降は、CSSだけでコンテナ幅に応じた文字サイズ調整を行いやすくなります。

以下は同じ枠に同じフォントサイズのテキストを設定した上で、下の枠だけ「text-fit」を設定しています。text-fitが設定されている下の枠ではテキストが自動で幅に合うように拡大していることが分かります。



この機能により、レスポンシブデザインで画面幅が変化した場合でも、見出しやカード内のテキストを視覚的にそろえやすくなります。

◆矢印キーでのフォーカス移動を宣言的に指定できる「focusgroup」

Chrome 150ではHTMLに「focusgroup」属性が追加されました。「focusgroup」を使用するとツールバーやタブリスト、メニュー、カスタムUI部品などの複合ウィジェットで、矢印キーによるフォーカス移動を宣言的に指定できます。

例えば、以下のようにボタン群を囲む要素に「focusgroup="toolbar wrap"」を指定すると、ユーザーはキーボードの矢印キーでボタン間を移動できるようになります。



これまでは、こうしたUIをアクセシブルに実装するために、JavaScriptで「roving tabindex」と呼ばれるフォーカス制御を手作業で書く必要がありました。focusgroupを使うことで、タブ移動の起点、矢印キーによる移動、最後にフォーカスされた要素の記憶などをブラウザ側に任せやすくなります。

◆CSSだけでグラデーション枠線を作成しやすくなる

Chrome 150では、CSSの「background-clip」プロパティに「border-area」という値が追加されました。「background-clip: border-area」は、要素の背景を枠線が描画される領域にクリップする指定です。border-widthやborder-styleを考慮しつつ、border-colorの透明度は無視されるため、背景のグラデーションを枠線部分にだけ表示するような表現を作りやすくなります。

これまでも「border-image」や疑似要素を使えばグラデーション枠線を作ることはできましたが、実装が複雑になりがちでした。Chrome 150以降は、よりCSSネイティブな方法でグラデーションボーダーを実装できます。

◆PWAのオリジン移行が可能に

プログレッシブウェブアプリ(PWA)はインストール時のオリジンにIDや権限が強く結び付いています。そのため、サービスのブランド変更やドメイン再編、技術的な再構築などでPWAのオリジンを変更する場合、従来はユーザーが古いアプリをアンインストールし、新しいアプリをインストールし直す必要がありました。

Chrome 150ではインストール済みのPWAを新しい同一サイトのオリジンへ移行する仕組みが導入されました。PWAオリジン移行により、開発者はユーザーの信頼や権限を維持したままインストール済みPWAを同一サイト内の新しいオリジンへ移行しやすくなります。なお、企業管理者によって強制インストールされているPWAでは、管理ポリシーを回避しないよう移行がブロックされ、ユーザーには説明バナーが表示されるとのこと。

◆オンデバイス音声認識の品質レベルを指定可能に

Chrome 150ではWeb Speech APIの「SpeechRecognitionOptions」に「quality」プロパティが追加されました。「quality」プロパティを使用することで、「processLocally: true」を指定してオンデバイス音声認識を利用する際に必要な認識品質を開発者が指定できるようになります。品質レベルとしては「command」「dictation」「conversation」の3段階が想定されており、コマンド認識、文章のディクテーション、会話の文字起こしのように、用途に応じて求められる能力を指定できます。

会議の文字起こしのような高い精度が求められるケースで、ローカルデバイスだけで処理できるかどうかを判断し、必要に応じてクラウドサービスへフォールバックする、といった実装がしやすくなります。

◆data: URLで作成されたWorkerのセキュリティを強化

Chrome 150では、専用WorkerおよびSharedWorkerが「data: URL」を扱う方法が変更されました。従来は、data: URLで作成されたWorkerが、作成元のスクリプトやページのセキュリティオリジンを継承する場合がありました。Chrome 150では、こうしたWorkerに一意の不透明なオリジンを割り当てるようになります。

これにより、BroadcastChannelや同一オリジンストレージなどを通じて、作成元と同じオリジン状態にアクセスできてしまうリスクを抑え、Workerの分離が強化されます。

◆その他の更新点

・CSSでユーザーのOSアクセントカラーを参照できる「AccentColor」「AccentColorText」システムカラーが追加されました。インストール済みウェブアプリなど、OSテーマとの統合が求められる場面で利用できます。

・CSSの「polygon()」関数で、角を丸めるためのオプションパラメータを指定できるようになりました。

・CSSの「zoom」プロパティがアニメーション可能になりました。

・CSSの「url()」関数で「cross-origin()」「integrity()」「referrer-policy()」などのリクエスト修飾子を指定できるようになりました。

・CSSの「image(<color>)」関数により、任意の色の単色画像を生成できるようになりました。

・CSSの「light-dark()」関数が画像値に対応し、カラースキームに応じて背景画像などを切り替えられるようになりました。

・「@container」ルールで、カンマ区切りの複数コンテナクエリを指定できるようになりました。

・印刷時にプリンターが印字できない領域を避けるためのCSS記述子「page-margin-safety」が追加されました。

・「flex-wrap: balance」により、複数行に折り返されたFlexアイテムをよりバランス良く配置できるようになりました。

・CSSの「@supports」で「named-feature()」関数を使えるようになりました。

・「overscroll-behavior」に新しい値「chain」が追加されました。

・SVGの「pathLength」プレゼンテーション属性に対応するCSSプロパティ「path-length」が追加されました。

・「<selectedcontent>」要素の複数配置時や更新タイミングに関する挙動が改善されました。

・「<template for>」と処理命令範囲を使って、JavaScriptなしでドキュメントの既存部分を更新する「Out of order streaming」が導入されました。

・HTMLパーサーが処理命令を解析できるようになりました。

・「popover=hint」と「popover=auto」の相互作用が整理され、ポップオーバーのスタック管理がより予測しやすくなりました。

・ElementおよびWindowのスクロールメソッドが、プログラムによるスムーズスクロールの完了時に解決されるPromiseを返すようになりました。

・埋め込みプラグインやクロスオリジンiframe、制限付きiframeにSVGフィルターが適用されないようになりました。

・WebGPUに、少量の頻繁に更新されるデータをGPUバッファやバインドグループなしでシェーダーへ渡すための即時アドレス空間と「setImmediateData()」メソッドが追加されました。

◆オリジントライアル

・Email Verification Protocol

メールで送られるワンタイムパスワードをユーザーが手入力する代わりに、暗号学的な所有権証明を用いてアカウント作成、ログイン、復旧を支援する仕組みです。

・Speculative load measurement

プリロード、プリフェッチ、プリレンダリングなどの投機的読み込みに関する測定データを「performance.getSpeculations()」メソッドで取得できるようにするものです。

・WebRTC Diagnostic Logging API

WebRTCの診断ログをアプリ側で有効化できるAPIです。診断ログはエンタープライズポリシーで許可されたオリジンで有効化でき、ローカルデバッグやバグ報告に利用できます。必要に応じてブラウザベンダーへアップロードすることも可能とのこと。

なお、次期安定版の「Google Chrome 151」は現地時間の2026年7月28日(火)にリリース予定です。