デジタルマーケティングTips

Chrome 124 仕様変更発表まとめ

記事タイトル画像：Chrome 124 仕様変更発表まとめ

Google 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 124 beta - Chrome for Developers (2024/03/20)
　https://developer.chrome.com/blog/chrome-124-beta新しいウィンドウで開きます

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

Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け！

WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。

いますぐご登録ください！

その他のサービス