安定版のリリース日: 2024 年 5 月 14 日
特に記載のない限り、Android、ChromeOS、Linux、macOS、Windows の Chrome 125 Stable チャンネル リリースに次の変更が適用されます。
HTML と DOM
宣言型 Shadow DOM のシリアル化
最近 HTML 標準で標準化された、Shadow ルートを含む DOM ツリーをシリアル化できる機能。
トラッキング バグ #41490936 | ChromeStatus.com のエントリ | 仕様
CSS
CSS アンカーの配置
CSS のアンカー配置を使用すると、デベロッパーは JavaScript を使用せずに、絶対位置にある要素をページ上の他の 1 つ以上の要素(アンカー)に宣言型の方法でテザリングできます。アンカーがスクロール可能な場合、アンカーの位置指定は効率的に機能します。一般的なユースケースは、ポップオーバーを呼び出した要素の横にツールチップ(ツールチップなど)を配置することや、選択メニューとそのポップオーバー オプション リストを配置することです。アンカー配置機能が導入される前は、このようなユースケースでは、JavaScript でポップオーバーを動的に配置し、呼び出し元要素がスクロールされたときに固定を維持する必要がありました。これはパフォーマンスのフットガンであり、正しく把握することが困難です。アンカーの配置により、これらのユースケースを効率的かつ宣言的に実装できます。
アンカー配置機能は、多数の CSS プロパティで構成されます。主なプロパティは次のとおりです。
anchor-name
: 要素を他の要素のアンカーとして設定します。position-anchor
: アンカー要素がアンカーの配置に使用する「デフォルト」のアンカーを記述します。anchor()
関数: アンカー要素の配置で、アンカー要素の位置を参照するために使用されます。inset-area
: 一般的な相対位置を示す、ポジショニングの省略形。
CSS Anchor positioning API のご紹介 | バグのトラッキング #40059176 | ChromeStatus.com のエントリ | 仕様
CSS の段階的な値関数 - round()
、mod()
、rem()
ステップ値関数 round()
、mod()
、rem()
はすべて、指定された値を別の「ステップ値」に従って変換します。
round()
CSS 関数は、選択した丸め方式に基づいて丸められた数値を返します。
mod()
CSS 関数は、JavaScript の余り演算子(%)と同様に、最初のパラメータを 2 番目のパラメータで除算したときに残されたモジュラスを返します。モジュラスは、1 つのオペランドである被除数を 2 番目のオペランドである除数で除算したときに残された値です。常に除数の符号を取ります。
rem()
CSS 関数は、JavaScript の余り演算子(%)と同様に、最初のパラメータを 2 番目のパラメータで除算したときに残された余りを返します。余りは、1 つのオペランドである被除数を 2 番目のオペランドである除数で除算したときに残された値です。常に被除数の符号を取ります。
トラッキング バグ #40253179 | ChromeStatus.com のエントリ | 仕様
CSS カスタム :state()
の新しい構文
CSS カスタム ステータスを使用すると、カスタム要素で独自の疑似クラスを公開できます。CSSWG でこの構文が指定され、Chrome 125 で新しい構文 :state(foo)
がサポートされるようになりました。この変更により、Chrome が古い構文(:--foo
)と新しい構文の両方をサポートするため、ウェブサイトが新しい構文に切り替えることができます。
明度が 100% または 0 に近い Oklab と Oklch の色の不連続性を取り除きます
この変更以前は、明度の値が 100% の Lab、LCH、Oklab、Oklch の色はすべて、他の 2 つのパラメータに関係なく白としてレンダリングされていました。明度の値が 0 のこれらのスペース内のすべての色は、黒としてレンダリングされました。この 2 つのマッピングは勾配の不連続性を引き起こし、ウェブ デベロッパーには予想していなかったもの��す。
このロールバックにより、これらの色は人為的にマッピングされることはなくなり、結果として表示される色は近くの色に対して連続的になり、ディスプレイの色域マッピングに依存します。
カラーパターンのルート スクロールバーを使用
「ページでサポートされているカラーパターン」の値が「normal」であるか指定されていない場合、およびルート要素の color-scheme
の計算値が normal
の場合、ブラウザでユーザーの好みのカラーパターンを使用してビューポートのスクロールバーをレンダリングします。ビューポートのスクロールバーは、ウェブ コンテンツの外部にあると考えられます。したがって、デベロッパーがカラーパターンのサポートを明示的に指定していない場合、ユーザー エージェントはビューポートのスクロールバーをレンダリングする際に、ユーザーの好みのカラーパターンを尊重する必要があります。
この変更を行っても、デベロッパーはスクロールバーのカラーパターンを制御できるようになります。新しい動作では、デベロッパーがルート要素のカラーパターンを指定していない場合にのみ、ブラウザでユーザーの好みのカラーパターンを使用してビューポートの非オーバーレイ スクロールバーをレンダリングします。
title | トラッキング バグ #40259909 | ChromeStatus.com のエントリ | 仕様
view-transitions
クラス
新しい CSS プロパティ view-transition-class
を使用して、1 つ以上のビュー遷移クラスを指定できます。次に、これらのクラスを使用して ViewTransition
疑似要素を選択できます(::view-transition-group(*.class)
など)。
これは ViewTransition API の拡張で、CSS クラスで通常の DOM 要素のスタイル設定を簡素化するのと同様の方法で、ビュー遷移擬似要素のスタイル設定を簡素化します。
トラッキング バグ #41492972 | ChromeStatus.com のエントリ | 仕様
読み込み中
WebSocket の作成時に HTTP URL と HTTPS URL を受け入れる
この更新により、WebSocket コンストラクタで HTTP スキームと HTTPS スキームが有効になり、デベロッパーも相対 URL を使用できるようになりました。相対 URL は ws:
と wss:
の内部スキームに正規化されます。
トラッキング バグ #325979102 | ChromeStatus.com のエントリ | 仕様
ウェブ API
Attribution Reporting API への追加
Attribution Reporting API に機能が追加され、エラーのデバッグ レポートの解析をサポートするデバッグ機能の追加、優先登録プラットフォームを指定するフィールドのサポートによる API のエルゴノミクスの改善、プライバシーの向上が可能になりました。
Compute Pressure API
Compute Pressure API は、システムの CPU 負荷を表すハイレベルの状態を提供します。これにより、実装で基盤となる適切なハードウェア指標を使用して��システムに管理不能な負荷がかかっていない限り、ユーザーが利用可能なすべての処理能力を活用できるようになります。
この API の設計と実装は Intel が主導し、ビデオ会議アプリで機能とパフォーマンスのバランスを動的に調整できるようにします。
Compute Pressure API | バグ追跡 #40683064 | ChromeStatus.com のエントリ | 仕様
Storage Access API(SAA)を Cookie 以外のストレージに拡張する
これにより、Storage Access API に提案された拡張機能(下位互換性があり、オリジン トライアル中)がリリースされ、サードパーティのコ������スト������ーティ�����ン分�����れていない Cookie と非 Cookie ストレージにアクセスできるようにします。現在の API は Cookie へのアクセスのみを提供します。Cookie へのアクセス方法は、Cookie 以外のストレージとは用途が異なります。
トラッキング バグ #40282415 | ChromeStatus.com のエントリ | 仕様
ID アサーション エンドポイントでの FedCM CORS 要件
FedCM API での取得は、必要なプロパティのために推論が困難です。アカウント エンドポイントについては現在も議論が行われていますが、ID アサーション エンドポイントで CORS を使用する必要があるという意見もおおむね合意されています。この更新により、このフェッチのセキュリティ プロパティが、ウェブ プラットフォームの他のフェッチとより厳密に一致します。
FedCM の更新: Button Mode API オリジン トライアル、CORS、SameSite | トラッキング バグ #40284123 | ChromeStatus.com エントリ
FedCM 認証リクエストで SameSite=Strict Cookie が送信されなくなった
FedCM が CORS を使用して ID アサーション リクエストを送信するようになりました。この変更により、Chrome は SameSite=Strict
Cookie を ID アサーション エンドポイントに送信しなくなりますが、SameSite=None
は引き続き送信されます。アカウントのエンドポイントと ID アサーション エンドポイントに異なる Cookie のセットを送信するのは意味がないため、この変更により整合性が保たれます。
SameSite=Strict
Cookie を送信しないことも、一般的な requestStorageAccess
の動作やクロスサイト リクエストと一致します。
トラッキング バグ #329145816 | ChromeStatus.com のエントリ | 仕様
相互運用可能なマウス移動のデフォルト アクション
Chrome では、マウス移動���ベントをキャンセルして、テキスト選択(これまではドラッグ&ドロップも可能)などの他の API を防止できるようになりました。これは他の主要なブラウザとは一致しておらず、UI イベントの仕様にも準拠していません。現在、テキスト選択はマウス移動のデフォルトのアクションではなくなりました。ただし、テキストの選択とドラッグ&ドロップは、selectstart
イベントと dragstart
イベントをそれぞれキャンセルすることで防止できます。
この機能は Chrome 125 から段階的にロールアウトされ、Chrome 126 までにすべてのユーザーが利用できるようになる予定です。
デモ | トラッキング バグ #40078978 | ChromeStatus.com のエントリ | 仕様
正規表現修飾子
正規表現修飾子を使用すると、パターン内の i
、m
、s
フラグをローカルで変更できます。
サブ式のフラグを有効にするには、(?X:subexpr)
を使用します。ここで、X
は i
、m
、s
のいずれかです。サブ式のフラグを無効にするには、(-X:subexpr)
を使用します。
たとえば、大文字と小文字を区別しない i
フラグの場合:
const re1 = /^[a-z](?-i:[a-z])$/i;
re1.test("ab"); // true
re1.test("Ab"); // true
re1.test("aB"); // false
const re2 = /^(?i:[a-z])[a-z]$/;
re2.test("ab"); // true
re2.test("Ab"); // true
re2.test("aB"); // false
正規表現で名前付きキャプチャ グループが重複しています
名前付きキャプチャ グループを複製すると、複数の選択肢で同じキャプチャ グループ名を使用できます。次に例を示します。
const re = /(?<year>[0-9]{4})-[0-9]{2}|[0-9]{2}-(?<year>[0-9]{4})/;
この場合、year
は 1 つ目の変換候補((?<year>[0-9]{4})-[0-9]{2}
)または 2 つ目の変換候補([0-9]{2}-(?<year>[0-9]{4})
)で有効です。
Chrome アプリ
Chrome アプリの Direct Sockets API
このアップデートにより、Chrome アプリで Direct Sockets が有効になり、ウェブアプリがネットワーク デバイスやシステムとの Direct Transmission Control Protocol(TCP)通信と User Datagram Protocol(UDP)通信を確立できるようになり、専用アプリを Chrome アプリから分離ウェブアプリに移行しやすくなります。
新しいオリジン トライアル
FedCM Button Mode API と Other Account API の使用
このオリジン トライアルには、次の 2 つの FedCM API が含まれています。
Button Mode API を使用すると、[Sign-in to IdP] ボタンをクリックするなど、ウェブサイトで FedCM をボタンのクリックで呼び出すことができます。この場合、ユーザーがログアウトしたときに UI を表示しないウィジェット モードとは対照的に、FedCM はユーザー インターフェースで常に応答するようにする必要があります。ボタンモードで FedCM API を呼び出すと、ユーザーがログアウトした状態で IdP に(ダイアログ ウィンドウで)ログインするように求められます。
また、ボタンモードは明示的なユーザー操作内で呼び出されるため、(そのような明示的な意図を持たない)ウィジェット モードの UI と比較して、UI がより目立ちます(中央に配置される、モーダルなど)。Button Mode API の仕組みについては、FedCM の更新: Button Mode API オリジン トライアル、CORS、SameSite をご覧ください。
Use Other Account API を使用すると、ID プロバイダはユーザーが他のアカウントにログインできます。
オリジン トライアル | デモ | トラッキング バグ #40284792 | ChromeStatus.com のエントリ | 仕様
Foldable API
このオリジン トライアルには、Device Posture API と Viewport Segments Enumeration API が含まれています。これらの API は、デベロッパーが折りたたみ式デバイスをターゲットにできるようにするためのものです。
オリジン トライアル | Foldable API のオリジン トライアル | ChromeStatus.com のエントリ | 仕様
プレフィックス付きの HTMLVideoElement Fullscreen プロパティとメソッドのサポート終了トライアル
コードの調整にさらに時間が必要な場合は、この非推奨トライアル期間中、プレフィックス付きの HTMLVideoElement プロパティとメソッドのサポートを再度有効にできます。
オリジン トライアル | ChromeStatus.com エントリ
プリロード スキャンをスキップする
プリロード スキャナをスキップして、サブリソースを取得しないページのパフォーマンスのトレードオフを調査します。
プリロード スキャナのステップは、投機的プリフェッチを実装することで、サブリソース フェッチを使用するページのパフォーマンスを向上させます。ただし、このステップのメリットが得られないページ、つまりサブリソースのないページの場合、処理のオーバーヘッドが増えますが、メリットはほとんどありません。
このオーバーヘッドを削減することでメリットを得たいと考えている上級ウェブユーザーのために、この試験運用版では、プリロード スキャナを無効にするページレベルの制御機能が用意されています。このテストで収集されたデータによって、変更した API や HTML プリロード スキャナの別の実装が役立つかどうかを評価できます。
オリジン トライアル | バグ追跡 #330802493 | ChromeStatus.com エントリ | 仕様
サポートの終了と削除
権限および権限ポリシー「window-management」の「window-placement」エイリアスを削除
権限と権限ポリシー「window-management」の「window-placement」エイリアスを削除しました。これは、最終的に「window-placement」が非推奨および削除されることで文字列の名前を変更する大規模な取り組みの一環です。Window Management API が時間の経過とともに進化するにつれて、用語の変更により記述子の寿命が短縮されます。
title | トラッキング バグ #40842072 | ChromeStatus.com のエントリ | 仕様
エンタープライズ ポリシーの削除: NewBaseUrlInheritanceBehaviorAllowed
このエンタープライズ ポリシーのオーバーライドの基盤となるコード変更(新しいベース URL 継承動作の有効化)は、2023 年 8 月(Chrome 118)以降の安定版リリースで有効になっています。既知の問題が対処されたため、このエンタープライズ ポリシーは Chrome 125 で削除されました。
接頭辞が付加された HTMLVideoElement Fullscreen プロパティとメソッドを削除
Chrome 38 以降���HTMLVideoElement
という接頭辞が付いた全画面 API のサポートは終了しています。これに代わる Element.requestFullscreen()
は、2018 年の Chrome 71 でプレフィックスなしでリリースされました。
次のプロパティとメソッドが HTMLVideoElement から削除されます。
webkitSupportsFullscreen
webkitDisplayingFullscreen
webkitEnterFullscreen()
webkitExitFullscreen()
webkitEnterFullScreen()
(FullScreen の「S」の大文字と小文字の違いに注意)webkitExitFullScreen()
サイトが現在もこの機能に依存していて、コードの更新にさらに時間が必要な場合は、この投稿に記載されている非推奨トライアルにご登録ください。
関連情報
さらに情報を探す場合は、以下の参考情報をご確認ください。
- Chrome 125 の新機能
- Chrome DevTools の新機能 125
- ChromeStatus.com の更新(Chrome 125)
- Chrome リリース カレンダー
- サポート終了の予定
- 今後の削除