2024年03月29日Chrome 123 仕様変更発表まとめ

追加・拡張

CSS

• light-dark()色関数…ライトモード・ダークモードでの色指定(従来はメディアクエリで分岐処理)を1つのプロパティ指定にまとめる関数が使えるようになります。例えば

  blockquote {
    color-scheme: light dark;
  }
  
  blockquote.lightdarkblue {
    color: light-dark(#111133, #ccccee);
    background-color: light-dark(#ccccee, #111133);
  }

  のようにカンマ区切りでライトモード用・ダークモード用の順に色指定を列記すると、指定した要素・クラス(上記の例では<blockquote class="lightdarkblue">…</blockquote>)において、OSのカラーモード指定に基づいて自動的に色が選択されます(color-scheme: light dark;でOS側の指定を受け付けます)。
• メディア特性のうち、display-mode(フルスクリーンモード等を判別)の値として「picture-in-picture」が使えるようになります。
  @media (display-mode: picture-in-picture) { (ここにスタイル指定を入れる) }
  のように指定することで、ピクチャーインピクチャー表示の間だけ適用される指定を作ることができます。
• align-contentプロパティ(対象領域内の要素の配置方法を指定)について、従来グリッドアイテムとフレックスアイテムにのみ有効だったのが、ブロックコンテナと表のセルに対しても有効になります。
• field-sizingプロパティ…フォームコントロール要素のサイズについて、従来通りの固定値か、コンテンツに合わせて自動調整するかを選べるようになります。
  • field-sizing: fixed; …サイズ固定(デフォルト)
  • field-sizing: content; …コンテンツ量に応じてサイズが延びる
• text-spacing-trimプロパティ…全角文字を使う言語(具体的には日本語・中国語・韓国語)で、記号(句読点・引用符・カッコ等)に関する文字間の余白処理(カーニング)を指定できるようになります。
  影響を受ける箇所は以下の3種類です。
  1. 行頭に開き記号がある場合
  2. 記号が複数連続する場合
  3. 行末に閉じ記号・句読点(感嘆符・疑問符等含む)がある場合
  Chrome 123で対応する値は4つで、それぞれ上記3種類について、全角記号の余白を半角相当に詰めるか否かが変わってきます。

  値指定	行頭	連続時	行末
  text-spacing-trim: normal;	全角のまま	字間詰める	通常は全角 両端揃えがギリギリはみ出る場合のみ全角→半角
  text-spacing-trim: space-all;	全角のまま	全角のまま	全角のまま
  text-spacing-trim: trim-start;	全角→半角	字間詰める	通常は全角 両端揃えがギリギリはみ出る場合のみ全角→半角
  text-spacing-trim: space-first;	全角→半角 ただし1行目or改行直後の行頭は全角のまま	字間詰める	通常は全角 両端揃えがギリギリはみ出る場合のみ全角→半角

Web API

• クロスオリジンiframeでのWebAuthn資格情報(パスキー等)作成が可能になります。以下の条件が必要です。
  • iframeにpublickey-credentials-create-featureアクセス許可ポリシーがあること
  • iframeに一時的なユーザーアクティベーションがあること
• Attribution Reporting APIで、以下のフィルターが強化されます。
  • イベントレベルのレポートの構成が追加され、トリガーデータの基数と値のカスタマイズに対応
  • 集計レポートの構成が追加され、集計可能な値のフィルター機能に対応
• Attribution Reporting APIが拡張され、Webサイト上で発生したイベントを、Webサイト外(他のアプリ等)にまたいでコンバージョンまで追跡できるようになります。
• <script blocking="render" type="module">(モジュールスクリプトの取得中にレンダリング処理をブロック)について、従来はsrc属性で外部URI指定がある場合に限られていましたが、インラインのモジュールスクリプトに対しても有効になります。
• ドキュメントピクチャーインピクチャー(子ページ表示)について、opener.focus()で呼び出し元(親ページ)にフォーカスを戻せるようになります。
• JavaScriptのimport属性(import宣言に形式を明示する注釈をつける)について、
  import ○○ from "△△" with { type: "◇◇" }
  という形式(assertの代わりにwithを使う)が有効になります。
• jitterBufferTarget属性…WebRTC(ブラウザ間ビデオ会議等)でRTCRtpReceiverインターフェイスがデータ受信を行う際、データ転送遅延バッファの対象時間をミリ秒単位で指定できるようになります。
  　なお、バッファ確保(⇒通話の安定性)と再生遅延の低減はトレードオフの関係にあります。再生遅延を減らすためにバッファの時間を減らすと、通話不安定化のリスクを抱えることになるので注意が必要です。
• Long Animation Frames API…Long Tasks APIの発展形で、長時間かかるアニメーション(「ウェブに関する主な指標」に新たに加わるINPの値に悪影響を及ぼす場合がある)の発生を検出できます。
• navigation.activation…現在のドキュメントが何らかの操作でアクティブ化された場合に、そのときの状態(新規表示なのか、一度表示したあと戻る/進むボタンを押してそのページに戻ったのか等)を保存しておくことができます。これによって表示演出処理を切り分けたりするのに活用できます。
• pagerevealイベント…ページ表示(新規表示 / 進む・戻るボタンでの再表示 / プリレンダリング表示)時に、最初のウィンドウオブジェクトがレンダリングされる際にイベントが発火するようになります。本イベントをトリガーとしたページ表示のトランジション処理を仕込んだりするのに活用可能です。
• PointerEvent.deviceId…タッチスクリーンを複数のペンデバイスで操作する場合、各ペンにそれぞれIDを振り分け、個別にポインティングを認識できるようになります。
• 公開サイトからLAN内サイトへリンクで移動する際、安全かどうかを確認しつつ遮断はしない(対応をプリフライトリクエストの送信・確認にとどめる)「警告のみ」モードが使えるようになります。
• 自分のLAN内のプライベートIPアドレスで動くWebサーバーのコンテンツを、別のサーバーにあるサイトから呼び出して表示できるよう、アクセス許可ポリシー等が整備されます。
• Sec-CH-UA-Form-Factor…クライアントヒントの一種で、表示デバイスの種別(PC / モバイル端末 / タブレット / 車載機器 / XRデバイス / EInk書籍端末 / スマートウォッチ)を取得できるようになります。ここからデバイス種別を判別して表示を切り分けることも可能になります。
• Service Worker Static Routing API…条件指定等によりService Workerの起動の有無を切り替え、Service Workerに起因するパフォーマンス低下を回避できるようになります。
• Shared Storage API更新…オリジンをまたいでワークレットを動作させる際に、iframeを作る必要がなくなります。
• Zstandard(zstd)形式のデータ圧縮・展開に対応します。Zstandardは比較的新しい可逆圧縮アルゴリズムで、圧縮・展開の速度に優れています。サーバー側のHTTPレスポンスヘッダー(Content-Encoding: zstd)が対応していれば、ページ読み込み・表示の高速化に活用できます。

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

• WebAssembly JavaScript Promise Integration API…WebAssembly形式のプログラムがJavaScript等非同期I/0のAPIを使用する際、動作を一時停止できるようになります。
  メリットとしては、WebAssemblyから各種非同期I/OのAPIを制御しやすくなります。
  非同期I/Oでの動作完了後は、一時停止を解除しWebAssemblyの動作を再開できます。

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

廃止・削除

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

関連ページ

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

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