2025年01月28日Chrome 133 仕様変更発表まとめ

attr()関数(要素タグ内の属性名・属性値を拾ってCSSのプロパティ値指定に使用する)が、CSS Level5で拡張された新仕様に対応します。

• 本関数の使用可能範囲が、カスタムプロパティを含む任意のCSSプロパティに拡張されます。
• 属性値について、string(文字列)以外のデータ型を使用できるようになります。

詳細はGoogleの記事「CSS attr() のアップグレード」にて解説されています。

:open擬似クラス…Chrome 133から、以下の開閉要素について、「開いた」状態向けのCSS指定が可能になります。

• dialog要素(ダイアログボックス)＆details要素(詳細表示用開閉アコーディオン)…:openを付加する(dialog:open / details:open)ことで、ダイアログやアコーディオンが開いている場合向けのCSS指定が可能になります。
• select要素(項目選択)＆input要素(入力値指定)…:openを付加する(select:open / input:open)ことで、ピッカーが開いている場合向けのCSS指定が可能になります。何かしらピッカーが開く種類のselect/input要素に限り適用されます。

@container scroll-state(…) {…}…コンテナクエリで、該当コンテナ要素のスクロール状態・位置に応じたCSS適用条件の切り分けが可能になります。これにより、従来JavaScriptでの処理が必要だった部分をCSSに移行できる場合があります。

• scroll-state(stuck: ○○)…スティッキーアイテム(粘着位置指定要素…親要素の範囲内でのみスクロールし、それを超えると指定位置で固定される半固定要素)がスクロール限界に達して固定された状態向けのCSS指定を行います。
  ○○内に入れる上下指定(top＝上端粘着時、bottom＝下端粘着時)に応じて、該当状態の場合のCSSを{ }内に記載します。
  活用例としては、「メインビジュアル下に配置したヘッダーについて、スクロールによって上部固定されたタイミングで色や不透明度を変更させる」等が挙げられます。
  
• scroll-state(snapped: ○○)…CSSスクロールスナップ(スクロール位置を指定間隔でスナップさせる)を使用する際に、要素のスナップ移動に応じた追加のCSS指定ができます。
  ○○に入れる軸指定(x＝横、y＝縦、inline＝書字方向と平行、block＝書字方向と直交)に応じて、その方向に移動してスナップした場合のCSSを{ }内に記載します。
  活用例としては「記事リンク枠カルーセルで、サムネイルが横移動スナップで中央に止まったときのみ概要文を追加表示する」等が挙げられます。
• scroll-state(scrollable: ○○)^※…overflowプロパティ等によるコンテナ内スクロールが発生している場合、スクロールの上下左右端に到達した場合向けに追加のCSS指定ができます。
  ○○に入れる位置指定(top＝上端、bottom＝下端、left＝左端、right＝右端 etc.)に応じて、その位置に来た場合のCSSを{ }内に記載します。
  活用例としては「先にスクロール可能であることをシャドウやアイコンで可視化する」「上に戻るボタンを上端表示時のみ消す」等が挙げられます。

  ※2025/01/15時点のCSS条件規則 Lv5 Working Draft(2024/11/05版)では「overflowingという名称ですが、Chrome 133での実装は同時期のEditor's Draft(2024/12/19版)ベースの「scrollable」表記で行われています。

なお、これらのコンテナクエリを使用する場合、対象要素の親となるコンテナ要素にも、別途container-typeプロパティの値にcontainer-type: scroll-state;と指定する必要があります。

詳細はGoogleの記事「CSS scroll-state()」にて解説されています。

テキスト要素の領域の上下もしくは角を削ることが可能になります。

フォントデータ内に広いマージンが設定されていると、狭い領域に配置する際の妨げになる場合があります。そういうフォントでもマージンを詰めて狭い領域に入れたい場合に活用できます。

• text-box-trimプロパティ…テキスト要素の上下に余分な余白が発生している場合、余白を切り取って配置用領域を計算できます。
• text-box-edgeプロパティ…テキスト要素の角を丸めることができます。ギリギリまで余白を詰めた角丸でテキストボタン/見出しを作ったりできます。

なお、両プロパティの値指定をまとめてtext-boxプロパティにて対応することも可能です。

詳細はGoogleの記事「CSS text-box-trim」にて解説されています。

Popover API(ポップオーバー表示)関連で、popover属性が新たに以下の指定に対応します。

• popover=hint…主にヒント(ツールチップ)表示を想定したもので、開くと他のpopover=hint属性のポップオーバーを閉じます(排他表示)。popover=auto属性の他のポップオーバーの開閉には影響しません。

• popover.showPopover()メソッドで、カッコ内に引数として呼び出し元を指定することで、呼び出し元(親)とポップオーバー(子)の位置関係をCSSアンカーポジショニングで規定できるようになります。

Web Animations API(アニメーション制御)関連で、以下の機能に新たに対応します。

• Animation.overallProgressプロパティ…反復するアニメーションについて、現在の状態がサイクル内のどの位置にあるかを取得できるようになります。

Atomicsオブジェクト(不可分操作^※でデータ処理に使用するオブジェクト)について、新たに以下の機能に対応します。
※不可分操作…途中で他プロセスに割り込まれず完了する必要のある一連の操作(外からは単一の操作のように見える)

• Atomics.pause()メソッド…現在の処理がスピンロック(リソース解放チェックのループ)状態の場合、CPUやOSにそのことを通知する信号を送信します。

• コンテンツセキュリティポリシー (CSP)とReporting APIを組み合わせて、読み込んだ全外部リソースのURLとハッシュをまとめたレポートを出力できるようになります。
  CSPの都合上、外部からダウンロード・実行するリソースの記録を残していく必要がある場合に活用できます。

Nodeインターフェイスが新たに以下のメソッドに対応します。

• moveBeforeメソッド…指定ノード(要素)のDOMツリー内配置転換(親ノードの切り替え)を行う際に、アニメーション等の各種状態を維持したまま移動させられるようになります。
  類似するinsertBeforeメソッド(削除→再挿入)との違いは、moveBeforeでは配置転換時に対象の状態がリセットされず維持されることです。活用例は以下の通りです。
  • YouTube等の動画をインラインフレームで埋め込み再生させている場合、移動させても再生がリセットされず継続されます。
  • ボタンのアクティブフォーカス保有、ポップオーバー/モーダル表示、全画面表示等の状態が、移動先でもそのまま維持されます。
  • 要素をアニメーションさせている途中で配置転換が発生した場合、アニメーションが始点からやり直しにならず、移動先でそのまま継続されます。

Attribution Reporting API(広告等のコンバージョン貢献度計測)関連の機能強化です。

• area要素でクリッカブル(リンク)領域を定義する際に、attributionsrc属性指定(HTTPリクエストヘッダー経由で、レスポンスヘッダー内にアトリビューションソース＆トリガーの情報を発行させる)がarea要素内にあれば、area要素側の属性指定を受け付けるようになります。
  従来はa要素やwindow.openメソッドのattributionsrc属性がareaにも自動適用されていましたが、area要素側でも指定が可能になります。

• FileSystemObserverインターフェイス…ファイルやディレクトリの変更を監視し、変更が発生した場合に通知を行う処理が作れるようになります。
  (オリジントライアルから標準機能に昇格)

• JavaScriptのインポートマップについて、従来は1ドキュメントあたり1つしか使用できませんでしたが、133から複数のインポートマップを指定して読み込めるようになります。
  ページごとにインポートマップをそれぞれ1つにまとめる不便が解消され、開発時の利便性が向上します。

Storage Access API(サードパーティCookie/ストレージアクセス)関連の機能強化です。

• Sec-Fetch-Storage-Accessリクエストヘッダー / Activate-Storage-Accessレスポンスヘッダー…ページ内に埋め込まれた認証つき(≒Cookie等を使う)外部要素がパーティション化(ドメイン別隔離)されていないCookieにアクセスする際のstorage-access許可付与について、HTTPリクエストヘッダー/レスポンスヘッダーを使った方法が新たに追加されます。
  従来の許可付与はJavaScriptを使ったもので、「埋め込み要素側からrequestStorageAccess()メソッドでリクエストを出してCookieへのアクセス許可を付与してもらう」という仕組みでした。
  が、この方法には、
  (1)処理が遅延発生のもとになる
  (2)埋め込み手段がiframeに限定される
  という問題点がありました。新しく追加された方法はこれらの問題の解決に役立ちます。

• Clipboard APIの非同期クリップボードで、ClipboardItemインターフェイスが、Blob形式のほかに文字列形式にも対応するようになります。

• WebAssemblyで、既存の命令が拡張され、メモリとテーブルで64ビットのインデックスが許可されます。これにより、従来上限であった2³²ビット(約4ギガビット)を超えるメモリ領域の確保が可能になります。

Web Authentication API(WebAuthn)(パスキー認証等)の機能追加です。

• getClientCapabilities()メソッド…PublicKeyCredentialインターフェイスで、クライアント(端末)側が対応しているWebAuthnの機能を特定できるようになります。これにより、クライアントの対応機能の有無に応じた認証処理の切り替えが実装可能になります。

• WebGPUで、1コンポーネントの頂点形式が扱えるようになります。8ビット/16ビットのデータ型に対して必要なデータを要求しやすくなります。
  また、unorm8x4-bgra形式を使用すると、BGRA形式の頂点色データの読み込みが便利になります。

Web Cryptography API(暗号化関連)の機能強化です。

• SubtleCryptoインターフェイス用メソッドのうち、generateKey()(鍵生成) / importKey()(インポート) / exportKey()(エクスポート) / deriveKey()(秘密鍵導出) / deriveBits()(ビット配列導出) で、X25519アルゴリズムによる暗号化が使用可能になります。

• ポップオーバーで呼び出される要素が構造上呼び出し元の内部にある場合、表示されたポップオーバーをクリックしたときに閉じるようになってしまっていたのが修正されます。

Performance API(パフォーマンス測定)内のリソースタイミング計測・分析に関する仕様変更です。

要素描画時間の取得に使用するrenderTimeプロパティについて、クロスオリジン(ドメイン越境)要素の描画時間情報漏洩対策として設定されていた制限が一部変更になります。

• 従来、クロスドメインで計測を行うには、提供元(外部ドメイン)側サーバーのTiming-Allow-Originレスポンスヘッダーで越境計測許可(指定したドメインからのみ越境計測が許可される)を出してもらう必要がありましたが、これが不要になります。(回避手段があり意味がなくなっていたので)
• 一方で、クロスオリジン分離されていない場合、越境計測される数値の精度が4ミリ秒単位に粗くなり、それより細かい時間の計測ができなくなります。

HTTPステータスコード「103 Early Hints」^※を使用する場合、サーバー応答時間計測用プロパティ(ページ表示速度指標の一つ「Time to First Byte (TTFB)」が参考にする)に仕様変更があります。
※103 Early Hints…サーバー側からブラウザ側に最終的なレスポンス(200 OK等)を返すまでのサーバー処理待ち中に、関連リソースの並行先読みに関するヒントを先行提供するステータスコードです。うまく処理すれば表示時間短縮に役立ちます

レスポンスヘッダーが[103 Early Hints]→[最終レスポンス(200 OK等)]の2段階になる場合、関連プロパティの仕様が以下のとおり変更されます。

• responseStartプロパティ(ブラウザ側のデータ先頭受信時のタイムスタンプを返す)の対象が、Chrome115での変更より前の状態(1xx/2xx/4xx/5xxの種類を問わず、リダイレクト後の最初の応答を対象とする)に戻ります。
  (Chromeが115で仕様変更したのち、結局各ブラウザ/ツールの足並みが揃わなかったため)
• finalResponseHeadersStartプロパティ…1xx(103等)の有無を問わず最終レスポンス(2xx/4xx/5xx)を返します。
• firstInterimResponseStartプロパティ…1xx(103等)のレスポンスを対象としたプロパティとして、変更なく維持されます。

非表示・沈黙状態で5分以上経過したタブ(ブラウジングコンテキストグループ)のCPU使用率が一定の閾値(基本的に10%)を超えた場合、該当タブの動作を停止するようになります。

なお以下の場合は停止対象外です。

• 音声/動画会議中である(録音録画デバイスやWebRTC関連機能の使用状況で検出)
• 外部デバイスを制御中である(WebUSB・Web Bluetooth・WebHID・Web Serialの使用状況で検出)
• Webロック保持もしくはIndexedDB接続によって、他の接続によるバージョン更新やトランザクションをブロックしている

• 前述の省エネモード(5分以上非表示で放置された、CPU使用率の高いタブを停止)の仕様変更適用を猶予したい場合、オリジン(≒ドメイン)単位でGoogleに申請すると、適用を2025年9月16日(Chrome 138)まで期間限定でオプトアウトできます。

• maxInterStageShaderComponents制限(ステージ間で渡されるシェーダーコンポーネントの上限設定)が非推奨化されます。Chrome 135で削除される予定です。
  類似機能であるmaxInterStageShaderVariables制限に移行することで、同様の機能が維持できます。

<link rel=prefetch>(および<link rel=prerender>)による別リソースの先行読み込みに関する仕様変更です。

• Chromeの独自仕様として、従来はリソースプリフェッチ後5分以内にリソースを再フェッチしようとした場合に、キャッシュ設定のmax-ageとno-cacheを無視するようになっていました。これが撤廃され、他ブラウザと同様にmax-age・no-cacheを記載通りに処理するようになります。
  これに伴い、Chromeでのプリフェッチの挙動によっては、Cache-ControlやExpiresヘッダーの設定見直しが必要になる場合があります。

企業管理PC等でChrome初回起動時設定の一括変更に使うinitial_preferencesファイルについて、以下の変更が行われます。

• 設定項目のうち、first_run_tabs(初回起動時に開くタブ群のURLを指定)に「chrome://welcome」(初回起動時に出るウェルカムページ)を指定しても無視されるようになります。
  (ウェルカムページはもともと標準で初回起動時に出る仕様になっており、設定としては冗長であるため)