2025年03月31日Chrome 135 仕様変更発表まとめ

カルーセル等スクロールコンテナ内部用のスクロールボタンやマーカーをCSSで記述するための擬似要素が増えます。

(詳細はGoogleの記事もご参照ください)

• ::column擬似要素…カルーセル等の連続コンテンツの分割単位について、スクロールスナップ関連の一部プロパティ(scroll-margin / scroll-snap-align / scroll-snap-stop)を指定する際に使用します。
• ::scroll-button()疑似要素…スクロールコンテナに対して、クリックで次/前の要素に1つ移動する[スクロールボタン]の付与を行います。
  • カッコ内にはスクロール方向を論理方向もしくは物理方向の名称で指定します。
    • 論理方向指定…block-start / block-end / inline-start / inline-end (書字方向の影響を受ける)
    • 物理方向指定…up / down / left / right (書字方向の影響を受けない)
  • ボタンの中身は{ … }内にcontentプロパティで指定します。
    
  • :enabled / :disabledを擬似クラスとして擬似要素の後ろに付加すると、有効時・無効時のスタイル指定を切り分けることも可能です。
• ::scroll-marker-group / ::scroll-marker擬似要素…クリックで指定要素にジャンプする[スクロールマーカー]の表示に関する擬似要素が追加されます。
  カルーセルでよくある、下に記事枠/メインビジュアルの枚数だけ●が出て、クリックした●に応じた枠までスクロールが進んだりする部分を作るのに使います。
  • ::scroll-marker-group擬似要素…スクロールコンテナに隣接して表示させる、スクロールマーカー用領域のスタイル指定(高さ・幅・色等)を行います。スクロールコンテナ自体に付加します。
    

    スクロールマーカー領域の表示指定自体は、擬似要素とは別に、スクロールコンテナ本体にscroll-marker-groupプロパティの値指定を行う必要があります。

    • scroll-marker-group: none;…スクロールマーカー領域を表示しません。
    • scroll-marker-group: before;…スクロールマーカー領域をスクロールコンテナ本体の直前に表示します。
    • scroll-marker-group: after;…スクロールマーカー領域をスクロールコンテナ本体の直後に表示します。(カルーセルによくある、下に○を並べるスタイルの場合はこちら)
  • ::scroll-marker擬似要素…リンクマーカー単体のアンカー文字列(contentプロパティ)やスタイル(サイズや色等)を一括で指定します。スクロールコンテナ内の個々のジャンプ対象要素に付加します(カルーセル枠をliで列挙しているのであればli::scroll-markerのようになります)。
• 上記指定に必要な擬似要素のネストへの対応が追加されます。

以下の進行状況/範囲内位置取得の関数に新たに対応します。

• progress()関数…変化する値の進行状況を取得するのに使います。progress(現在値, 初期値, 完了値)の順に3つ引数を入れると、現在値での進捗率を数値で返します。
• media-progress()関数…メディアクエリの適用範囲指定に対して現在値がどのくらいの位置にあるかを取得するのに使います。media-progress(メディア特性名, 下限, 上限)と引数を入れると、現在値の範囲内位置を数値で返します。
• container-progress()関数…コンテナクエリの適用範囲指定に対して現在値がどのくらいの位置にあるかを取得するのに使います。container-progress(メディア特性名, 下限, 上限)と引数を入れると、現在値の範囲内位置を数値で返します。

以下の環境変数に新たに対応します。
(環境変数の指定はenv()関数で行います)

• safe-area-max-inset-○○…ブラウザのセーフエリアの上限値を、画面の上下左右端に対して設定できるようになります。(○○=top, right, bottom, leftのいずれか)
  safe-area-inset-○○が動的な値をとるのに対して、safe-area-max-inset-○○は静的な値をとります。

• Web Speech API(音声認識/合成関連)が、Media Stream API(ストリーミング/キャプチャー関連)のMediaStreamTrackインターフェイスと連携できるようになります。
  従来Web Speech APIの音声認識のデフォルト入力はデバイスのマイクでしたが、本変更により、使用できる音声入力の種類が拡張されます。
  活用例としては、外部からのストリーミング音声をWeb Speech APIの音声認識に流して字幕を生成・表示したりする、等が挙げられます。

コンテンツセキュリティポリシー関連で以下の機能に新たに対応します。

• Content-Security-Policy: require-sri-for script…コンテンツセキュリティポリシー(CSP)の設定で、スクリプトに対してサブリソース完全性を要求できるようになります。
  サーバー側がHTTPレスポンスヘッダーとして設定すると、スクリプト(JavaScriptライブラリ等)を外部CDN等から取得する場合に懸念される、外部取得スクリプトの第三者改竄等に対して、ブラウザがサブリソース完全性のチェックを行うようになります。
  • 使用時は、サブリソース完全性の照合に使うハッシュデータを別途生成し、script要素のintegrity属性の値に設定しておく必要があります。
  • チェックに失敗した場合は読み込み失敗になり、ブラウザからエラーを返します。

• インラインフレームのsrcdoc属性/プロパティ(外部URL読み込みの代わりにHTMLを直接流し込む)を取り扱うService Workerクライアントが作成されるようになります。また、このクライアントは親のService Workerコントローラーを継承し、差異の修正ができるようになります。

• Float16Array型(16ビット/半精度浮動小数点数)の配列がJavaScriptで扱えるようになります。
  他の型の数をFloat16Array型の配列に入れた場合、半精度浮動小数点数(IEEE fp16)の精度に合うよう数値が丸め込まれます。

ブラウザのキャッシュ情報管理(各ファイルのURLをキーとしてキャッシュ済みか等を記録していく)において、以下のブール値が追加されます。

• is-cross-site-main-frame-navigation…トップレベルナビゲーション(URL遷移)に関連するクロスサイト攻撃を軽減します。
  悪意ある攻撃者がサブリソースの読み込みタイミングで機密情報を推測したり、サブリソースのキャッシュ状態から特定サイトへのアクセス履歴の有無を判断したりする行為への対策として活用できます。

button要素(ボタン)に、以下の属性が追加されます。

• command属性…ボタンクリックで発動する動作を指定します。
  • command="show-modal" / "close" / "request-close"…モーダル扱いでダイアログの開閉を行います。commandfor属性(後述)でダイアログのIDを指定する必要があります。
  • command="show-popover" / "hide-popover" / "toggle-popover"…ポップオーバーの開閉を行います。commandfor属性(後述)でポップオーバーのIDを指定する必要があります。
  • command="--○○"…任意のコマンド名(冒頭ハイフン2つ)のコマンドイベントを発行する機能をボタンに持たせられます。受け取ったコマンド名に応じた具体的な処理は、自分でJavaScriptで実装する必要があります。
• commandfor属性…操作対象を指定します。属性値に、command属性の操作対象となる要素(ダイアログやポップオーバー等)のIDを入れると、そこに対するコマンドが実行されます。

link要素が以下の属性値に対応します。

• <link rel="facilitated-payment" href="(URL)">…保留中の支払いがある場合、そのことを登録済みの決済クライアントに通知するためのヒントとして活用できます。

NavigateEventインターフェイスのプロパティとして以下が追加されます。

• sourceElementプロパティ…ナビゲーションが発生した場合の遷移元の要素(a, area, form等)を返します。

• Web Speech APIの音声認識について、クラウド上での処理以外に、端末内での処理が選択できるようになります。
  ユーザー側で端末内のローカル処理を選択した場合、必要なリソースが端末内にインストールされます。
  インストール後は、音声入力をクラウド上の音声処理サーバーに送信する必要がなくなり、端末内で音声認識処理が完結するようになります。

• SVGAElementインターフェイス(SVG API経由でSVGのリンクを制御)で、relプロパティ・relListプロパティが使えるようになります。一般のHTMLのa要素と同様のセキュリティ設定が、SVGのリンクでも実装可能になります。

• WebRTC APIのRTCPeerConnectionインターフェイス(Webビデオ通話で、ローカル～リモート間の接続/管理/切断等を行う)で、以下のタイムスタンプが取得できるようになります。
  • フレームが最初にキャプチャされたときのタイムスタンプ
  • フレームが受信されたときのタイムスタンプ

• fetchLater()…fetch()メソッドの遅延処理対応版のようなもので、ページが閉じられたり別のページに移動したりしても、ブラウザ側で取得保留状態をキープし、あとから取得を再開する処理が可能になります。
  従来はpagehide・visibilitychange・keepalive等のイベント/プロパティを併用した複雑な処理が必要でしたが、これらが簡素化されます。

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

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

• 過去の各種ブラウザ仕様変更発表まとめ
  記事バックナンバー一覧
  バージョン・年月を選択して表示 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年2月のX(旧Twitter)規約改定・仕様変更発表まとめ
• 2025年2月のLINE仕様変更発表まとめ
• 2025年2月のInstagram/Threads仕様変更発表まとめ
• 2025年2月のFacebook規約改定・仕様変更発表まとめ
• 2025年2月のYouTube規約改定・仕様変更発表まとめ