「Google Chrome 112」安定版リリース、CSSがネストに対応

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン112.0.5615.49(Linux版・Mac版)・112.0.5615.49/50(Windows版)がリリースされました。この更新からCSSがルールのネスト(入れ子)に対応するようになりました。

New in Chrome 112 - Chrome Developers
https://developer.chrome.com/blog/new-in-chrome-112/

New in Chrome 112: CSS nesting rules, no-op fetch handlers skipped, and more! - YouTube


◆CSSのネスト
CSSのスタイルルールを他のスタイルルール内にネストさせ、外側のセレクターを内側のルールと組み合わせることが可能になりました。これにより、スタイルシートのモジュール性および保守性の向上、ならびにファイルサイズ削減が期待できます。例えば、よくあるCSSの記述例として以下のコードを考えてみます。

ここでは3つのスタイルが定義されていますが、よく読んでみるといずれも「.nesting」セレクタに関するものであることがわかります。また、「.nesting > .is」・「.nesting > .is > .awsome」はそれぞれその直系の子・孫にあたります。これをネスト化を念頭に置いて書き改めると、以下のようにスッキリと、かつ関係性が一目瞭然な記述になります。

◆CSS animation-compositionプロパティ
animation-compositionプロパティを実装します。これにより、複数のアニメーションが同じプロパティに同時に影響する場合の複合操作を指定できるようになります。

CSS Animations Level 2
https://w3c.github.io/csswg-drafts/css-animations-2/#animation-composition

例えば、以下のようなスタイルシートを考えてみます。

@keyframes heartbeat {
  from {
    scale: 1;
    animation-timing-function: ease-out;
  }
  30% {
    scale: 1.3;
  }
}
.heartbeat {
  animation: heartbeat 0.3s 2s infinite;
}

@keyframes throb {
  50% {
    scale: 1.8;
  }
}
.icon:mouseover {
  animation: throb 0.4s add;
}

ここでは、scaleプロパティを対象とする2つの異なるアニメーションを定義しています。この場合、従来ならば1つのアニメーションのみが適用されるところ、2つ目のアニメーションのanimation-compositionプロパティに「add」を指定することにより2つのアニメーションが結合されて適用されます。

◆dialog要素の初期フォーカスに関する変更
HTML dialog要素はダイアログのような全面にポップアップ表示して入力・操作を促すユーザーインターフェースを共通化する目的で導入されたものですが、ダイアログが開かれたときにどの要素がフォーカスされるかについて、いくつかのアルゴリズム的な変更が行われています。

・dialog要素のフォーカス手順では、あらゆるフォーカス可能な要素ではなく、キーボード操作によりフォーカス可能な要素を対象にする
・dialog要素にautofocus属性が設定されている場合は、ダイアログ要素自体がフォーカスされるようにする
・フォーカスがbody要素に「リセット」されるのではなく、dialog要素自体がフォールバックとしてフォーカスされるようにする

◆FormDataコンストラクターに「送信ボタン」のオプションパラメーターを追加
送信ボタンをFormDataコンストラクターに渡すことができるようになりました。ボタンに名前がある場合、もしくはイメージボタンである場合、フォームデータセットに提供します。

XMLHttpRequest Standard
https://xhr.spec.whatwg.org/#dom-formdata

これにより、ボタンによってトリガーされる通常のフォーム送信と同じデータセットを持つFormDataオブジェクトを作成できます。

constructor(optional HTMLFormElement form, optional HTMLElement? submitter = null);

◆Service Workerのno-op fetchハンドラをスキップ

ユーザーエージェントがすべてのService Workerのfetchリスナーがno-op(no-operation)であることを識別した場合、Service Workerの開始とナビゲーションクリティカルパスからのリスナーのディスパッチは省略されます。これにより、これらのページのナビゲーションが高速になります。

スキップの対象となるコードは、例えば以下のようなものが該当します。

onfetch = () => {}

fetchハンドラーを定義することはウェブアプリをインストール可能にするためのPWAの一要件ですが、これの影響を受けてか一部のサイトで空のfetchハンドラーが定義されています。ただ、そのようなサイトを表示する際にService Workerを開始してno-opリスナーを実行すると、呼び出しのオーバーヘッドが発生するだけでメリットは何ひとつありません。それを回避するため今回の変更がおこなわれました。

またこの対応の一環として、Service Workerのすべてのfetchリスナーがno-opである場合、コンソール警告を表示して開発者にそのようなfetchリスナーを削除するよう促すようになりました。

◆RegExp vフラグ
JavaScriptがサポートする正規表現文字クラスRegExpに、以下の機能を持つ「vフラグ」を追加します。

・セット表記 + 文字列リテラル構文
・ネストされたクラス
・文字列のUnicodeプロパティ

文字列の集合演算とUnicodeプロパティを使用することで、開発者は特定のUnicode文字と文字列を照合する正規表現を簡単に作成できます。例えば、以下の例はすべてのギリシャ文字に一致します。

const re = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;

◆「このページを再読み込み」情報バーの非表示化
最上位フレームがPermissionStatus.onchangeイベントによって監視されているとき、「このページを再読み込み」情報バーが表示されなくなりました。この場合、アプリケーションがページ情報ダイアログを通じて開始されたカメラ・マイクのアクセス権限の変更に動的に反応することを望んでいるものと見なされるからです。ただし、イベントリスナーの有無にかかわらず権限が取り消されるとすぐにメディアストリームが終了する、という既存の動作はそのままです。

◆WebAssemblyの末尾再帰
明示的な末尾再帰と間接的な末尾再帰のオペコードをWebAssemblyに追加します。末尾再帰のコードはコンパイラ最適化できることが知られていますが、これまでのWebAssemblyでは末尾再帰の最適化が禁止されていました。この制約を解消するため、以下の追加実装が必要になります。

・return_call <funcidx>：callの末尾再帰呼び出し版
・return_call_indirect <tableidx> <typeidx>：call_indirectの末尾再帰呼び出し版

これを用いて階乗を求める関数を定義すると、以下のようになります。

(func $fac (param $x i64) (result i64)
  (return_call $fac-aux (get_local $x) (i64.const 1))
)

(func $fac-aux (param $x i64) (param $r i64) (result i64)
  (if (i64.eqz (get_local $x))
    (then (return (get_local $r)))
    (else
      (return_call $fac-aux
        (i64.sub (get_local $x) (i64.const 1))
        (i64.mul (get_local $x) (get_local $r))
      )
    )
  )
)

◆Web WorkerのWebGLContextEvent
WebGLContextEvent型は以前からWebGL仕様に定義されていましたが、Blinkではこの型がWeb Workerに公開されていませんでした。今回の仕様変更はこれをWeb Workerに公開するというものです。

◆オリジントライアル
今回の更新から、以下の機能がオリジントライアル入りしています。

・WebAssemblyガベージコレクション(WasmGC)：WasmをターゲットとするコンパイラをホストVMのガベージコレクタと統合可能にする仕組み
・WebRTCのRTCPeerConnection.getStats()の返す統計オブジェクトのうち、タイプが"track"・"stream"のもの

◆非推奨化される機能
セキュリティ維持の観点から、以下の機能は非推奨となりました。

・document.domainセッター

また、Google Chrome 112には16件のセキュリティバグフィックスが含まれています。

なお、次期安定版の「Google Chrome 113」は現地時間の2023年5月2日にリリース予定です。