11月1日、Google Chromeが「Chrome 120 beta」と題した記事を公開した。この記事では、Chrome 120のベータ版に関する詳細が紹介されている。

Chrome 120 betaの注目ポイント：HTMLとWeb APIの新機能の導入

Chrome 120 betaでは、CSSにおいて7つの新しい機能が追加されている。まず、<image>構文を使用したカスタムプロパティのサポートが追加された。これにより、カスタムプロパティの値をurl()やグラデーションなどの画像に制限することができる。

また、<transform-function>と<transform-list>構文を使用したカスタムプロパティのサポートも追加された。これにより、カスタムプロパティの値を変換として表現することができる。さらに、これにより登録されたカスタムプロパティに対して直接的にトランジションやアニメーションを使用することも可能になる。

さらに、CSSには:dir()疑似クラスセレクタが追加された。このセレクタは、HTMLのdir属性に基づいて要素を方向性に基づいてマッチングする。例えば、:dir(ltr)は左から右へのテキスト方向性にマッチングし、:dir(rtl)は右から左へのテキスト方向性にマッチングする。

また、CSSには指数関数も追加された。pow()、sqrt()、hypot()、log()、exp()の指数関数が利用できるようになった。

Chrome 120 betaの新機能：CSSの拡張と改善

さらに、CSSのマスキングにも改善が加えられた。mask、mask-image、mask-modeなどのプロパティが導入され、要素を一部または完全にマスキングすることができるようになった。これにより、-webkit-mask*プロパティが非推奨となり、仕様に合わせたプロパティが導入された。

CSSのネストにも改善が加えられた。ネストされたスタイルルールは、&記号を前に付ける必要がなくなった。例えば、以下のようなネストが可能になった。

.card {
  h1 {
    /* スタイルの定義 */
  }
}

HTMLにおいては、<details>要素を使用したアコーディオンパターンの構築が可能になった。<details>要素にname属性が追加され、同じ名前の<details>要素がグループを形成し、一度に1つの要素のみが展開されるようになった。

さらに、Web APIにもいくつかの新機能が追加された。例えば、VideoFrameやAudioDataなどのコンストラクタにArrayBufferを転送することが可能になった。また、FontFaceSetのcheck()メソッドやCloseWatcherなどの新しいAPIも導入された。

詳細はChrome 120 betaを参照していただきたい。