2024年04月11日Chrome 124 仕様変更発表まとめ

追加・拡張

CSS

• CSSImportRuleインターフェイスのstyleSheetプロパティ(@importでインポートした外部CSSファイル名を返す)について、ヌル値(ファイル名なし)が許可されるようになりました。関連付けられたCSSファイルがない場合、本プロパティはヌル値を返します。
• CSSKeyframesRuleインターフェイスでlengthプロパティ(キーフレームの数を示す)が使えるようになります。なお、添字つきプロパティを使用する際はlengthプロパティの値を整数型で定義しておく必要があります。

HTML

• writingsuggestions属性…テキスト入力枠等における入力サジェスト(候補表示)機能の有効化/無効化をWebサイト側から指定できるようになります。
  • <○○ writingsuggestions="true">…サジェストを有効化します。(デフォルトはこちら)
  • <○○ writingsuggestions="false">…サジェストを無効化します。

Web API

• Attribution Reporting APIの機能追加…デバッグ関連機能として、登録失敗時の解析レポートを出力する機能が追加されます。
  メリットとしては以下が挙げられます。
  • 登録プラットフォーム内の入力フィールドの好き嫌いを特定可能にし、人間工学的な改善に繋げられる
  • プライバシー保護が強化される
• disallowReturnToOpenerパラメーター…ドキュメントピクチャーインピクチャー表示時に、[Back to Tab(タブに戻す)]ボタンを非表示にできるようになります。
  例えばdocumentPictureInPicture.requestWindowメソッド内で該当パラメーター値をtrueに指定すると、変更が有効になります。

  const pipWindow = await window.documentPictureInPicture.requestWindow({
  　disallowReturnToOpener: true,
  });

• rel=expect属性によるレンダリングブロック…ページの解析・表示順位について、ページ内の指定要素の解析が完了するまで、画面表示処理(レンダリング)を一時的に待機する設定が使えるようになります。ページ間遷移でトランジション処理を行う場合等、読み込み・解析中の漸次レイアウト変更を避けたい場合に活用できます。

  <link rel=expect href="#○○">

  例えばlink要素で上記のようにページ内部のidを指定すると、ドキュメントツリー内でid="○○"属性を付与された要素の解析が完了するまで、画面表示処理が一時的にブロックされます。
• jitterBufferTarget属性…WebRTC(ブラウザ間ビデオ会議等)でRTCRtpReceiverインターフェイスがデータ受信を行う際、データ転送遅延バッファの対象時間をミリ秒単位で指定できるようになります。
  なお、バッファ確保(⇒通話の安定性)と再生遅延の低減はトレードオフの関係にあります。再生遅延を減らすためにバッファの時間を減らすと、通話不安定化のリスクを抱えることになるので注意が必要です。
• pageswapイベント…ナビゲーションによってドキュメント(ページ)の内容が新しいものに入れ替わる際に、ウィンドウ上で[pageswap]というイベントが発火するようになります。イベント発火時には変更の種類とナビゲーション履歴情報が一緒に渡され、それに基づいて表示のトランジション処理を行うのに役立ちます。
• Priority: HTTPリクエストヘッダー…優先度情報が含まれた全HTTPリクエストについて、リクエストヘッダー内に、RFC 9218で定義された優先度指定(u:緊急度(u=0～7, 0が最も高い)、i:逐次処理の可否)が組み込まれるようになります。HTTP/2やHTTP/3でデータの並列送受信を行う際に、重要な要素の優先度を高めたい場合等に役に立ちます。
• LAN内機器(プライベートIPアドレス等グローバルなホスト名やSSL/TLS証明書がないもの)へのアクセスを許可したい場合向けに、以下のコンテンツ混在に対する制限を緩和できるようになります。
  • fetch()メソッド使用時にLAN内機器へのアクセスを明示的に宣言
  • 元のサーバーのコンテンツからLAN内機器のコンテンツをfetchで取り込む際のセキュリティポリシーを緩和する
  • LAN内機器のアクセスに関するプリフライトリクエスト(ユーザー許可取得)を実施する
• Sec-CH-UA-Form-Factor…クライアントヒントの一種で、表示デバイスの種別(PC / モバイル端末 / タブレット / 車載機器 / XRデバイス / EInk書籍端末 / スマートウォッチ)を取得できるようになります。ここからデバイス種別を判別して表示を切り分けることも可能になります。
• setHTMLUnsafe・parseHTMLUnsafeメソッド…Declarative Shadow DOM^※が、JavaScriptからでも使用できるようになります。別HTMLを解析してDOMツリー内に組み込む方法としては、innerHTMLやDOMParserに比べて簡単な選択肢が増えます。

  ※Declarative Shadow DOM…Shadow DOM(他のHTMLをドキュメントツリー内の子ツリーとして埋め込む際に、ID・クラスの名称競合等の問題が起こらないようにする機能)を、JavaScriptを使わなくてもHTMLから直接サーバーサイドで実装できるようにする機能のこと。世代的にはShadow DOMより新しめです。

  参照：
  宣言型の Shadow DOM
  https://developer.chrome.com/docs/css-ui/declarative-shadow-dom?hl=ja
  シャドウDOMの使用
  https://developer.mozilla.org/ja/docs/Web/API/Web_components/Using_shadow_DOM

• Shared Storage API機能強化…クロスオリジン(別ドメイン)のワークレットで処理を行う際に、iframeを作成しなくてもワークレットを動作させられるようになります。
• Streams API機能強化…本APIを使ったJavaScriptでのストリーミングデータ処理について、ReadableStream APIでの非同期反復処理が可能になります。for awaitループ内のソースとしてストリームを扱うことで実装できます。
• context-fill / context-stroke…SVG形式のベクター図形で塗りつぶし(fill)や線(stroke)を使う際、以下のような場合に、context-fillやcontext-strokeの値をfillプロパティやstrokeプロパティの値として使用できるようになります。
  • SVGサブツリーをuse要素で指示
  • marker要素をpath要素のmarkerプロパティで指示
• WebGPUのサービスワーカー対応強化…WebGPUがServiceWorker/SharedWorkerインターフェイス)の取り扱いに対応し、WebGLとの連携性が強化されました。
  オフライン処理やバックグラウンド処理が強化されるので、ユーザーの操作中以外での継続的な処理を行いやすくなります。
  また、共有ワーカーへの対応により、複数のタブによるGPUリソースの調整・共有が可能になる点も、パフォーマンス向上に活用できます。
• WebSocketStream API…WebSocket用の新APIが利用可能になります。従来のWebSocket APIでの弱点になっている、データ処理時のバックプレッシャー(システム処理がデータ送受信に追いつかないときの速度調整)を、ストリームデータ処理によって解決できます。
• TLSの鍵カプセル化アルゴリズムについて、X25519とKyber768のハイブリッド方式(IETF標準準拠)に対応します。

仕様変更

• Tabキーでのフォーカス移動(アクセシビリティ対応時に重要)について、スクロールコンテナ(枠のサイズ指定に収まらないコンテンツをスクロール表示させる要素)が移動対象になるかどうかの条件が変更されます。デフォルトの動作は[Tabキー移動対象外(拾われない)]から[Tabキー移動対象(拾われる)]に変更されます。
  • 変更前…tabindex属性の値が0または正の数で明示的に指定されている場合のみ対象
    (<○○ tabindex="0">等0以上の属性値があればTabキーを打ってフォーカスが該当領域に止まるが、それ以外は基本的に素通りする)
    　↓
  • 変更後…tabindex属性の値が負の数で明示的に指定されている場合のみ対象外で、それ以外は対象
    (<○○ tabindex="-1">等マイナス属性値があればTabキーを打ってもフォーカスが該当領域を素通りするが、それ以外は基本的に止まる)
  例外として、スクロール要素内にフォーカス可能な子要素(ボタン等)が含まれている場合は、スクロールコンテナ要素をtabindex="0"等で明示的に移動対象に指定しないと、スクロール要素への移動がスキップされ、子要素に直接フォーカスが飛びます。
  なお、本変更は124のリリース中順次適用範囲が拡大され、全ユーザーへの適用完了は次版Chrome 125リリース時になる予定です。

デプリケーショントライアル(廃止猶予)

• DOMツリーの変更監視に使われていた(現在既に非推奨化)MutationEventインターフェイスの諸機能が、Chrome 127(2024年7月30日ごろリリース予定)で廃止されます。オリジン単位でデプリケーショントライアルを申請すると、該当サイトに限り機能をChrome 134(2025年3月)まで継続できます。
  廃止対象の例は以下の通りです。
  • DOMSubtreeModified
  • DOMNodeInserted
  • DOMNodeRemoved
  • DOMNodeRemovedFromDocument
  • DOMNodeInsertedIntoDocument
  • DOMCharacterDataModified 等
  代替・後継機能としてはMutation Observer APIが対象です。デプリケーショントライアルを行わない場合、該当機能を実装するサイトは、Chrome 127公開までにMutation Observer APIで処理を置き換える必要があります。

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

廃止・削除

• Window Management API(旧称Multi-Screen Window Placement API、マルチウィンドウWebシステム制御用のAPI)を使う際に必要な「window-management」権限について、旧称「window-placement」を別名として残す移行期間が終了し、旧称への対応が全廃されます。
  コード内に「window-placement」が残っている場合は、「window-management」への移行を済ませる必要があります。

関連ページ

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

マックスマウスからのお知らせ