2025年05月30日Chrome 137 仕様変更発表まとめ

• if()関数…CSS値に条件分岐を起こす関数が使えるようになります。
  • 値の部分でカッコ内に条件を記載すると、条件に合致する場合にのみ適用されるCSS値が記述できます。
  • 他言語のif文/関数でおなじみのelseにも対応します。カッコ内を;で区切ってelse:○○と記述すると、ifの条件に合致しなかった場合のCSS値が指定できます。

フレックス/グリッドコンテナが複雑に配置された場合に音声読み上げの順序を制御するプロパティが使用可能になります。

詳細はGoogleの記事「論理的な連続フォーカス ナビゲーションに CSS 読み上げフローを利用する」および読み上げフローの例でも説明されています。

reading-flowプロパティ

• 文書内の基本的な読み上げの流れ方を指定します。
  • reading-flow: normal;…DOM内の要素の順序に従って読み上げを行います。デフォルト値はこれです。
  • reading-flow: source-order;…基本的にDOM内の順序に沿って読み上げを行います。ただし後述するreading-orderプロパティの指定があるものはそちらが優先されます。
  • reading-flow: flex-visual;…フレックスアイテムの表示上の順序に応じて読み上げを行います。書字方向の指定がある場合はそれも考慮に入れます。(フレックスコンテナにのみ適用)
  • reading-flow: flex-flow;…flex-flowプロパティ(コンテナ領域内のフレックスアイテム配置方向)の指定に沿って読み上げを行います。(フレックスコンテナにのみ適用)
  • reading-flow: grid-rows;…行方向の並び順(左→右の横書きの場合は左上から行単位に右方向)に読み上げを行います。(グリッドコンテナにのみ適用)
  • reading-flow: grid-columns;…列方向の並び順(左→右の横書きの場合は左上から列単位に下方向)に読み上げを行います。(グリッドコンテナにのみ適用)
  • reading-flow: grid-order;…基本的にDOM内の順序に沿って読み上げを行います。ただしアイテムにorderプロパティによる順序指定が行われている場合はそちらが優先されます。(グリッドコンテナにのみ適用)

reading-orderプロパティ

• 読み上げ順/優先度を要素ごとに個別に指定したい場合用のプロパティです。
• 要素ごとに整数でプロパティ値を指定し、値の小さい方から大きい方へ順に読み上げを行います。デフォルト値は0です。よって、読み上げ順を先にしたいものはマイナスの値、あとにしたいものはプラスの値を付与していきます。

• offset-pathプロパティ(要素が移動するアニメーションで使用する移動経路を指定する)で、値にshape()関数を使用した複雑なパスを指定できるようになります。

• SVG APIのSVGSVGElementインターフェイス(SVG要素のプロパティ/属性にアクセスするのに使用する)で、新たにtransform属性(座標変換/回転/変形)が制御できるようになります。

• SVG内の(別のシェイプを参照して複製・転用する)について、従来はhref属性参照先SVGの中のシェイプをフラグメントID(#○○)で指定する必要があったのですが、条件により省略が可能になります。
  • 変更前：フラグメントIDが指定されていない場合は参照が失敗し、何も出ない
    　↓
  • 変更後：フラグメントIDが指定されていない場合は、代わりにSVG内のルート要素を参照する(ルート要素でシェイプの参照が成立すればシェイプが転用できる)
  これにより、href属性に外部SVGファイル名・URLのみを入れても、参照が成立すればuseで呼び出せるようになり、参照時の煩雑さ解消・利便性向上に繋がります。

• view-transition-nameプロパティ(ビュートランジションの識別名を指定)について、以下の自動指定が可能になります。個別にプロパティ値を手動設定する必要がなくなり、煩雑さが緩和されます。
  • view-transition-name: match-element;…要素の識別名に基づいて一意の識別名を生成します。
  • view-transition-name: auto;…要素のid属性に基づいて一意の識別名を生成します。

• 無限ループ等の長い計算でWebページが応答なしになった場合、処理中の関数等の呼び出しスタック状況をキャプチャーして保存する機能が追加されます。
  キャプチャー内容はChromeのクラッシュレポート用API(Reports API)に渡されます。
  開発者が原因調査・デバッグを行う際に活用できます。

• Canvas APIのインターフェイスのうち、CanvasRenderingContext2D・OffscreenCanvasRenderingContext2D・ImageDataの色指定が、浮動小数点ピクセル形式に対応します。RGBAの色パラメーターを、整数ではなく浮動小数点数で記載することで、より広く細かい色が表現可能になります。

• Document-Isolation-Policy… クロスオリジン分離用の従来の設定(COOP・COEPレスポンスヘッダー)とは別のポリシーです。COOP・COEPに依存せず、crossOriginIsolationをドキュメント自身から有効にする実装が可能になります。
  COOP・COEPの影響でSharedArrayBufferの処理がパフォーマンス不足になる場合等に活用の余地があります。

サイト管理者がオリジントライアル登録することで、以下の機能が先行利用可能になります。

※オリジントライアルは、サイト管理者がオリジントライアル管理画面から対象オリジン(ドメイン)を登録し、発行されたトークンをHTMLにmetaタグとして設置した場合のみ、期間限定で有効になります。(詳細はGoogleの解説を参照)

• 過去の各種ブラウザ仕様変更発表まとめ
  記事バックナンバー一覧
  バージョン・年月を選択して表示 Chrome 137(2025年5月) Chrome 136(2025年4月) Safari 18.5(2025年4月) Chrome 135(2025年3月) Safari 18.4(2025年2月) Chrome 134(2025年2月) Chrome 133(2025年1月) Safari 18.3(2024年12月) Chrome 132(2024年11月) Safari 18.2(2024年10月) Safari 18.1(2024年10月) Chrome 131(2024年10月) Chrome 130(2024年9月) Safari 18.0(2024年9月) Chrome 129(2024年8月) Safari 17.6(2024年7月) Chrome 128(2024年7月) Chrome 127(2024年6月) Safari 18 beta(2024年6月) Chrome 126(2024年5月) Safari 17.5(2024年5月) Chrome 125(2024年4月) Chrome 124(2024年3月) Safari 17.4(2024年3月) Chrome 123(2024年2月) Safari 17.3(2024年1月) Chrome 122(2024年1月) Safari 17.2(2023年12月) Chrome 121(2023年12月) Chrome 120(2023年11月) Safari 17.1(2023年10月) Chrome 119(2023年10月) Safari 17.0(2023年9月) Chrome 118(2023年9月) Chrome 117(2023年8月) Chrome 116(2023年7月) 2023年6月 2023年5月 2023年4月 2023年3月 2023年2月 2023年1月 2022年12月 2022年11月 2022年10月 2022年9月 2022年8月 2022年7月 2022年6月 2022年5月 2022年4月 2022年3月 2022年2月 2022年1月 2021年12月 2021年11月 2021年10月 2021年9月 2021年8月 2021年7月 2021年6月 2021年5月 2021年4月 2021年3月 2021年2月 2021年1月 2020年12月 2020年11月 2020年10月 2020年9月 2020年8月 2020年7月 2020年6月 2020年5月 2020年4月 2020年3月 2020年2月 2020年1月 2019年12月
• 2025年4月のX(旧Twitter)規約改定・仕様変更発表まとめ
• 2025年4月のLINE仕様変更発表まとめ
• 2025年4月のInstagram/Threads仕様変更発表まとめ
• 2025年4月のFacebook規約改定・仕様変更発表まとめ
• 2025年4月のYouTube/Google広告規約改定・仕様変更発表まとめ