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

Chrome 121 仕様変更発表まとめ

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

Google Chrome 121の主要な仕様変更発表のまとめです。(ベータ版時点での情報です)

記事バックナンバー一覧

要点

メルマガでも情報を配信中です！　ぜひご登録ください。

追加・拡張

CSS

  • ::selectionや::highlight等の選択・ハイライト系擬似クラスに付与したプロパティ設定が、親→子方向のハイライトにも継承されていくようになります。
  • スクロールバーの色・幅を変更するCSSプロパティが追加されます。
    • scrollbar-colorプロパティ…スクロールバーの色を変更します。
    • scrollbar-widthプロパティ…スクロールバーの幅を変更します。
    これにより、指定した要素のみ、個別にスクロールバーの色や幅を調整したりできるようになります。
  • font-paletteでカラーフォントのパレットを切り替える際に、トランジション処理(フェード等のスムーズな時間変化)を行えるようになりまます。
  • CSSのハイライト用擬似要素について、新たにスペルミスや文法ミスをハイライトする擬似要素が追加されます。これにより、テキスト入力受付後にスペルミスや文法ミスと思われる部分をハイライトして修正を促す処理を分かりやすく示せるようになります。
  • SVGベクター画像にマスキング(切り抜き)をかけるプロパティが拡充されます。例としては以下です。
    • mask-mode…マスク画像を、輝度マスクと不透明度マスクのどちらとして扱うかを指定します。
    • mask-composite…複数のマスク画像を合成する際の処理方法を指定します。
    • mask-position…マスクの位置指定を行います。上下左右・中央揃えやパーセンテージ・ピクセル数等での座標指定が可能です。
    • mask-repeat…マスクの繰り返し・引き延ばしの有無を指定します。
    そのほか、外部のマスク画像ファイルをURLで呼び出せるようになります。
  • ルビ/ふりがなを扱うCSSプロパティ値が追加されます。従来ルビを扱う際はrubyやrt等ルビ専用要素(タグ)を使う必要がありましたが、div等の汎用要素をCSSでルビ扱いにできるようになります。
    • ruby…ruby要素を代替
    • ruby-text…rt要素を代替

Web API

  • Attribution Reporting API(プライバシーサンドボックスで広告の効果測定を行うAPI)について、以下が改善されます。
    • 情報まとめレポートの遅延が減り、伝達時のロスが削減されます。
    • イプシロンフィールドのイベントレベルでレポートが可能になり、API設定が拡充されます。
    • 予約済みのキーを使用した場合に登録が失敗するようになることで、APIの拡張性が向上します。
  • バックフォワードキャッシュ(bfcache)について、PerformanceNavigationTiming API利用時にbfcacheがページに提供されなかった場合、notRestoredReason APIが理由をリスト化して返してくれるようになります。
  • ドキュメントの子窓表示(ピクチャーインピクチャー)のサイズ変更用に、以下のメソッドが新たに利用可能になります。
    • resizeBy()メソッド…子窓の縦横サイズ(ピクセル数)の変化を相対値で指定
    • resizeTo()メソッド…子窓の縦横サイズ(ピクセル数)の絶対値を指定
    なお、これらを利用する場合は、何らかのユーザージェスチャーを発動条件とすることが必須になります。
  • EditContext API…Webアプリ上で各種テキスト入力手段(キーボード入力変換のほか、手書き認識・音声認識等を含む)を統合的に扱うAPIが新たに利用できるようになります。アクセシビリティ対応の強化等に向いています。
  • Async Clipboard API(クリップボードデータの各種操作を非同期で行うAPI)で、supports()関数にMIMEタイプ('image/png'等)を入れると、指定した種類のデータにAPIが対応するかを確認できるようになります。
  • showPicker()メソッド…指定した要素に指定すると、select要素のオプションピッカーをプログラムから開けるようになります。
  • Media Capabilities APIで、HDR検出用の映像設定に以下を記述できるようになります。
    • hdrMetadataType…HDRメタデータの種類を記述
    • colorGamut…色空間の種類を記述
    • transferFunction…伝達方式の種類を記述
  • Private Aggregation API(サイトをまたいだデータ収集/集計を行うAPI)について、ペイロードを暗号化するコーディネーターを、指定された許可リストから選択できるようになります。
  • メディアのリモート再生制御機能(AndroidではChrome 56から対応)について、デスクトップOSでもChrome 121から利用できるようになります。
  • Speculation Rules API(表示高速化策として一部ファイルの投機的先読みを指定するAPI)について、以下の機能に追加対応します。
    • eagernessフィールドに優先度の高いリンクを指定しておくと、ホバーもしくはボタン押下時点でリンク先のページのプリフェッチ・プリレンダリングができるようになります。
    • HTML内のscript要素でルールを呼び出す代わりに、HTTPレスポンスヘッダー(Speculation-Rules:)でルールを指定できるようになります(タイミング的にはレスポンスヘッダーから指定する方がHTML読み込み・評価後より早くなります)。なお、ヘッダーから指定するURLのMIMEタイプは、「application/speculationrules+json」に指定されている必要があります。
    • No-Vary-Searchヒント…投機先読みルールを含むURLにクエリパラメーター(?以降)が付加されている場合に、その有無や内容を判別しないで評価対象にできるようになります。これにより、クエリパラメーターつきURLを前提としたサイト構成であっても投機先読みルールを効果的に制御しやすくなります。
  • SpeechSynthesisVoice.prototype…音声合成/テキスト読み上げ関連のインターフェイス(SpeechSynthesis / SpeechSynthesisVoice)で、音声の特徴検出が可能になります。
  • Storage Buckets API…デバイスストレージ内に分割された保存領域(を複数のバケツに例えたもの)を設置できます。各バケツはIndexedDBやCacheStorage等のストレージ制御APIを使ってデータを処理できます。
  • WebGPUのレンダリング処理において、パイプライン作成時に、シェーダーモジュールに渡すエントリーポイント情報を省略できるようになります。なお、デフォルトのエントリーポイントが見つからない場合、通常通りGPUValidationErrorが発生します。
  • WebGPUタイムスタンプクエリ…パスの開始時と終了時に、GPUコマンドの実行時間をナノ秒単位で計測できるようになります。なお、タイミング攻撃の懸念から本機能はオプション扱いとなっていますが、精度を100マイクロ秒(0.1ミリ秒 = 0.0001秒)単位に粗くする等の折衷案をとることも可能です。
  • TLSの鍵カプセル化アルゴリズムについて、X25519とKyber768のハイブリッド方式(IETF標準準拠)に対応します。

オリジントライアル(先行試験実装)

  • Element Capture API…静止画/動画キャプチャー用APIの一種で、指定したDOMのサブツリーをキャプチャーします。
    部分キャプチャーとしてはRegion Capture APIに近い機能ですが、違いとしてElement Capture APIでは、重ね合わせで要素が後ろに隠れる現象(オクルージョン)があった場合、オクルージョン対象になった前面・背面双方のコンテンツがキャプチャー対象から除外されます。
  • scope_extensions…Webアプリのスコープを拡張できる機能です。通常Webアプリのスコープは、単一オリジンの単一パスを基点として定義されます。が、scope_extensionsを使用すると、他の関連オリジンにスコープを広げることが可能になります。

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

仕様変更

  • URL Pattern APIで、ベースURLやコンストラクタ文字列を使用した場合、一部動作が変更されます。
    • 前の方のコンポーネントを明示した場合…コンポーネントはベースURLから継承されなくなります。
    • 文字列中で後ろの方のコンポーネントを明示しなかった場合…暗黙のうちにワイルドカード化されます。
    これにより、ワイルドカードが望まれる場合に、パターンが以前よりも拡張されるようになります。
    ベースURLを使用せずコンポーネントを個別に明示するパターンについては変更はありません。また、ユーザー名・パスワードは暗黙的な継承から除外されます。
  • URL Pattern APIの正規表現処理方式がuフラグからvフラグに移行し、Unicodeの処理が改善されます。
  • クロスオリジンiframeが埋め込み先ページ内で移動した場合、そのiframeを対象する入力イベントが破棄されます。 以前2019年に交差オブザーバー(Intersection Observer)のうちオクルージョンとエフェクト検出を使用したiframeに限って同様の変更が実装されていましたが、これがすべてのiframeに拡大されます。

※参照：Chrome 121 beta - Chrome for Developers (2023/12/07)
　https://developer.chrome.com/blog/chrome-121-beta新しいウィンドウで開きます

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

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

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

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

その他のサービス