2024年10月29日Chrome 131 仕様変更発表まとめ

CSS Anchor Positioningの有効範囲制限

• anchor-scopeプロパティ…CSS Anchor Positioning(CSSで複数の要素を連結配置する際に、特定の要素を「アンカー」に指定して、他の要素の配置をアンカー要素に従属させたり、表示上不都合が発生する場合に従属要素を非表示にする条件を宣言したりする機能)について、アンカー名(anchor-nameプロパティ)の有効範囲を指定要素内に特定できるようになります。
  • anchor-scope: none;…アンカー名の有効範囲を変更しません。
  • anchor-scope: all;…全てのアンカー名(該当要素やその子孫要素が定義するもの)の有効範囲を、該当要素とその子孫要素の範囲内に限定します。
  • anchor-scope: --○○;…指定にマッチするアンカー名(該当要素やその子孫要素が定義するもの)の有効範囲を、該当要素とその子孫要素の範囲内に限定します。
    ※--○○…ハイフン2つで始まる項目名(カスタムプロパティ等)

CSS：絵文字の表示方式選択

• font-variant-emojiプロパティ…Unicodeで文字コードが定義されている絵文字の表示方法について、テキスト扱い(フォント側で用意している字形が使用され、色も通常のテキストと同じ)か、画像絵文字扱い(各ブラウザ/アプリ側で用意する多色画像が使用される)かを指定できます。
  • font-variant-emoji: normal;…ブラウザの仕様に従います。無指定時はこれがデフォルト値となります。
  • font-variant-emoji: text;…テキスト扱いで絵文字を表示します。(U+FE0E使用時と同じ)
  • font-variant-emoji: emoji;…画像扱いで絵文字を表示します。(U+FE0F使用時と同じ)
  • font-variant-emoji: unicode;…Unicode側絵文字表示プロパティでの、文字ごとのテキスト指定・画像絵文字指定に準じて絵文字を表示します。異体字セレクタが使用された場合はそちらを優先させます。
  従来はテキストデータ内に異体字セレクタ(テキスト：U+FE0E、画像絵文字：U+FE0F)を挿入することで切り替えが実装されていましたが、これがCSSプロパティでも指定できるようになります。

CSS：印刷/PDF出力時のマージン調整

• @pageルール…印刷出力用にレイアウト調整関連のスタイル指定(マージン調整等)を入れられるようになります。
  擬似クラスで適用対象のページ種別を限定し、スタイルを使い分けることも可能です。
  • :blank…空の入力要素に適用
  • :first…最初のページのみ適用
  • :left…見開きの左側のページのみ適用
    ※左綴じ左開き(左→右書き)の場合偶数ページ、右綴じ右開き(右→左書き)の場合奇数ページ
  • :right…見開きの右側のページのみ適用
    ※左綴じ左開き(左→右書き)の場合奇数ページ、右綴じ右開き(右→左書き)の場合偶数ページ

CSS：カスタムプロパティの対応データ型拡張

• @propertyルール(CSSカスタムプロパティ)内のsyntaxプロパティ(カスタムプロパティで値の指定時に許容されるデータ型)について、syntax: "<string>";(文字列型)の指定が可能になります。

CSS：「現在の色」をベースにした相対色指定

• 色指定の相対値演算で、演算元のベース色を取得する「from ○○」に、from currentcolor(現在の色をベースとして取得)が使用できるようになります。

CSS：SVG関連の参照対応拡大

以下のプロパティの値指定について、SVGファイルの参照機能が強化されます。

• clip-path(切り抜き)…シェイプやパスを直接記述する代わりに、
  clip-path: url("○○.svg#△△");
  のようにファイル名・id属性を指定すると、該当ファイル(○○.svg)内の該当パス(△△)をクリッピングに使用できます。
• fill(塗りつぶし色指定)…SVG内シェイプの塗りつぶしに使う色(グラデ可)について、
  fill: url("#△△");
  のように同ファイル内のid属性を指定すると、該当id(△△)のパスの色指定を塗りつぶし色に使用します。
• stroke(枠線色指定)…SVG内シェイプの枠線に使う色(グラデ可)について、
  fill: url("#△△");
  のように同ファイル内のid属性を指定すると、該当id(△△)のパスの色指定を枠線色に使用します。
• marker-start / marker-mid / marker-end(折れ線マーカー表示)…SVG内図形パスの頂点(開始地点、途中の各頂点、終了地点)へのマーカー画像表示時に、
  marker-end: url("○○.svg#△△");
  のようにファイル名・id属性を指定すると、該当ファイル(○○.svg)内の該当パス(△△)を指定・参照できます。

Web API：Isolated Web AppsのTCP・UDP外部通信機能強化

• Direct Sockets API(ブラウザから直接TCP・UDPで通信を行う技術)について、Isolated Web Apps(Web技術を使用した単体アプリ)から外部ネットワーク機器に対してTCP・UDPによる通信を確立させることが可能になります。

Web API：Speculation Rules APIのCSP制限緩和

• Speculation Rules API(投機ルールAPI…条件指定に基づく投機的先行読み込みによって、Webページの読み込み・表示を高速化する技術)について、コンテンツセキュリティポリシー(CSP…クロスサイトスクリプティング等の攻撃を防ぐための外部読み込み制限ポリシー)との兼ね合いで制限を受けていた部分が一部緩和されました。
  • 変更前：<script type=speculationrules>タグ、Speculation-Rules: HTTPヘッダーともCSPの制限対象
    　↓
  • 変更後：<script type=speculationrules>タグのみCSPの制限対象となり、Speculation-Rules: HTTPヘッダーは制限対象から外れる

Web API：FedCM認証時のストレージアクセス許可自動化

• Federated Credential Management API(FedCM、サーバー間ユーザー認証連携)利用時に、Storage Access APIによるストレージアクセス許可(IdP側から端末サードパーティCookieにアクセスする必要があるため)のチェック処理・許可付与を自動化できるようになります。
  実施するには認証委託側(RP)がFedCM許可ポリシーで条件を設定する必要があります。条件設定時には、IdPがFedCMの許可範囲を超えてRPを受動的に監視するのを適切に防止できているか注意する必要があります。

Web API：COOPの設定選択肢追加

• Cross-Origin-Opener-Policyレスポンスヘッダー(COOP、ポップアップ表示等のオリジン越境を制限するポリシー設定)について、Cross-Origin-Opener-Policy: noopener-allow-popups (元ページとの関係を問わず、ポップアップをトップレベルの独立ドキュメントとして開く)が設定できるようになります。
  1つのオリジン(≒ドメイン)に異なったセキュリティ要件を持つサイトが混在していたりすると、場合によっては同一オリジンであっても呼び出し元・呼び出し先のスクリプト連携実行許可を与えない方がよく、そういったケースで有益になる場合があります。

Web API：Private Aggregation APIのProtected Audience呼び出し制限緩和

• Private Aggregation API(プライベート保護に配慮したクロスサイトデータ集計・レポート生成)でProtected Audienceを呼び出す際の呼び出し数制限が20件→100件に緩和されます。

select要素解析の制限緩和

• select要素内部の子要素として、option / optgroup / hr以外の要素も解析時に許容されるようになります。

WebGPU：頂点シェーダーの設定追加

• 頂点シェーダー用の設定値として、clip-distances(頂点～平面間の距離を指定する配列)が使用できるようになります。
  32bit浮動小数点型の値をを8つまで格納でき、0で頂点が平面と接触し、正の値だと頂点が内側、負の値だと外側にあることを示します。
  CADのような状況でシーン内の頂点がユーザー定義平面の向こうにある場合に有用です。

WebGPU：canvas描画をGPUで行う場合の設定取得

• GPUCanvasContext: configure()メソッドでGPUレンダリング用の設定を行った場合、設定した内容をgetConfiguration()メソッドで取得できるようになります。

WebAPI：WebHIDが専用ワーカーに対応

• WebHID API(外部入力デバイス制御)が、専用ワーカー(WebWorker)内で使用できるようになります。WebHIDは処理が重くなることがありますが、WebWorkerで処理する場合はメインスレッドから分離されて並行処理されるため、メインスレッドのパフォーマンス低下を低減させるのに役立ちます。

WebRTC：入力映像が大きすぎる場合向けの縮小指定

• RTCRtpEncodingParameters.scaleResolutionDownTo…WebRTC(ビデオ通話等)で、縦横サイズの上限設定(maxWidth / maxHeight)を超える入力があった場合、サイズを指定値まで縮小できるようになります。「640x360」のように絶対値で指定します。

WebAudioの再生統計

• AudioContext.playoutStats…Web Audio APIで音声を再生した場合、遅延やフォールバック発生等の統計が取れるようになります。

文章自動要約機能

• Summarizer API…AI言語モデルを使って、テキスト入力から自動で要約を出力してくれるJavaScript APIが使用できるようになります。

ハイライト指定対象のCSS適用継承の変更

• ::selection(ドラッグ選択)や::target-text(テキストフラグメント)といったハイライト系の擬似要素へのCSS適用について、継承方式が変更されます。 擬似要素のスタイルを指定された要素の一部が入れ子で別要素になった場合、入れ子になった子要素部分を選択した場合のスタイル適用が変更されます。
  ・変更前(Chrome 130まで)…入れ子で入っている子要素は、親要素に指定されたスタイルの適用対象外になります。擬似要素全体への指定等がある場合はそちらが適用されます。
  　↓
  ・変更後(Chrome 131から)…入れ子で入っている子要素にも、親要素に指定されたスタイルが適用されます。擬似要素全体への指定があっても、親要素のスタイルが優先されます。
  

CSS：位置指定プロパティの名称変更・旧称廃止

• エリア内相対位置指定に使うプロパティの名称が、inset-area→position-areaに変更されるのに伴い、旧称への対応が廃止されます。inset-areaが残存している場合は置換等による対応が必要です。

アンロードイベントをキャンセルする機能がエンタープライズポリシーで無効化不可能になる

• beforeunloadイベントをpreventDefault()メソッドでキャンセルする機能について、従来はエンタープライズポリシーによって強制的に無効化させることが可能でしたが、このエンタープライズポリシーがChrome 131から削除され、強制無効化ができなくなります。

WebGPU：requestAdapterInfo()メソッド廃止

• WebGPUで、GPU情報取得に用いられていたrequestAdapterInfo()非同期メソッドのサポートが廃止されます。代替機能としてはGPUAdapterInfoで同期取得が可能になっています。