「Google Chrome 105」安定版リリース、ウェブUI開発に便利な機能が続々搭載

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン104.0.5112.81(Windows版、macOS版/Linux版は105.0.5195.52)がリリースされました。新たなCSS疑似クラスの実装など、ウェブUIの開発を容易にするであろうさまざまな機能が追加されています。

◆CSS疑似クラスの追加
今回、新たに二つのCSS疑似クラスが追加されています。:has()は引数で渡された相対セレクター要素を1つ以上持っている場合に有効となります。

/* <div> 要素のうち直接 <img> を含んでいるもの */
div:has(> img) {
  background-color: black;
}

:modalは、それが存在している間は外部の要素とのすべての相互作用を排除する状態にある要素(つまりダイアログ的な要素)に対して有効となります。

:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}

◆onbeforeinputグローバルコンテンツ属性の追加
beforeinputイベントは、<input>・<select>・<textarea>といった要素の値が変更されようとしているときに発生するイベントで、従来からaddEventListener()メソッドを用いることで検出することができました。今回新たに

element.onbeforeinput = ...

といったスタイルでも使える様になり、使用の難度が下がったといえます。ちなみに、

document.documentElement.onbeforeinput === null

をチェックすることで「beforeinput」をブラウザーがサポートしているかをテストすることも可能となります。

◆@containerクエリー
コンテナー要素のサイズに応じたスタイル指定を可能とする@containerクエリーが追加されました。これと類似するものとして@mediaクエリーがありますが、@mediaクエリーがビューポートのサイズを評価するのに対して@containerクエリーは前述の通りコンテナーのサイズを評価する点が異なります。

◆'blocking=rendering'属性
<script>・<style>・<link>といったタグに'blocking=render'を属性および値として配置することで、レンダリングのブロックを指定できるようになりました。これにより、開発者が明示的にFlash of Unstyled Contents(FOUC)を防止するといった使い方が可能となります。

◆fetch() upload streaming
fetch() upload streamingを用いることで、バイト配列のアップロードをWebSocketによる複雑なコーディングをせずに実装可能となりました。

◆Sanitizer API MVP
使いやすく安全なHTML Sanitizer APIがデフォルトで提供されるようになります。開発者はこのAPIを使用することにより、任意のHTMLコンテンツからスクリプトを実行する可能性のあるユーザー入力を削除できます。HTML Sanitizer APIの実装は今回提供される「Sanitizer API MVP」と将来的に提供予定である「Sanitizer API」に分割され、MVPで実装されたのは最も基本的なElement.setHTML()のみとなります。

◆navigateEventの改良
実用性に問題があったnavigateEventの既存メソッドに代わり、二つのメソッドが追加されます。Intercept()はナビゲーション後の状態を開発者が制御できるようにするもので、既存の transitionWhile()メソッドと非常によく似た動作をしますが、必須のPromiseを受け取る代わりに、オプションのハンドラー関数を受け取るようになり、使い勝手が向上しナビゲーション終了の遅延が解消されています。scroll()はURLで指定されたアンカーにスクロールするもので、既存のrestoreScroll()と非常によく似た動作をしますがナビゲーションがトラバーサルでない場合に呼び出すことができます。また、手動スクロールモードでない場合でも手動でスクロールを実行できます。なお、置き換え対象となったtransitionWhile()とrestoreScroll()は今回のリリースから非推奨扱いとなり、Chrome 108で削除される予定になっています。

◆デスクトップウェブアプリに対するウィンドウコントロールのオーバーレイ
インストールされたデスクトップウェブアプリに対してウィンドウコントロールのオーバーレイが有効になっている場合に、アプリのクライアント領域が拡張されてタイトルバー領域を含むウィンドウ全体をカバーし、ウィンドウコントロールボタン(閉じる・最大化/復元・最小化)がオーバーレイされます。開発者はこの機能を使用して、インストールしたデスクトップウェブアプリをネイティブアプリのように見せることができます。

◆その他
・DisplayMediaStreamConstraints.systemAudioヒント
・TransformStreamDefaultControllerクラスの公開
・import.meta.resolve()メソッドの追加
・ワーカーコンテキストからのMedia Source Extensions(MSE) API使用が可能に
・Multi-Screen Window Placement APIによって提供されるスクリーンラベル文字列をより正確に
・固定要素のオーバースクロールを防止
・Response.json()メソッドの追加
・マークアップベースのクライアントヒントの委任に関する構文の変更
・Viewport-heightクライアントヒント
・ファイルシステムアクセスAPIの一回の呼び出しで読み取りと書き込みの両方のアクセス許可を持つディレクトリを返せるよう変更


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

なお、次期安定版の「Google Chrome 106」は現地時間の2022年9月27日にリリース予定です。