ニュース

「Google Chrome 105」がベータ版に ～「:has()」疑似クラスなどをサポート

ハイライトやレスポンシブデザインのデザインが容易に

2022年8月8日 15:08

「Google Chrome 105」のベータ版

　米Googleは8月5日（現地時間）、「Google Chrome 105」のベータ版に追加された新機能と変更点を発表した。「Chrome 105」では「Custom Highlight API」や「:has()」、「Container Queries」（@container）といった開発者向け機能が導入されている。

　「Custom Highlight API」は「::selection」や「::inactive-selection」といった特定の箇所（たとえば選択範囲やエラー箇所）に特殊な文字装飾（スタイル）を適用するハイライト系疑似要素の概念を拡張し、任意のテキスト範囲にスタイルを設定できるようにしたもの。JavaScriptでテキスト範囲を選択し、CSSの「::highlight()」疑似要素でスタイルを設定できる。

　わざわざこうすることのメリットは、開発者がDOMツリーに手を加えることなくハイライトを実現できる点にある。独自の選択を実装する編集フレームワーク、仮想化されたドキュメントのページ内検索、オンラインコラボレーションを表す複数の選択、スペルチェックフレームワークなど、さまざまなシナリオで役立つという。「Chrome 105」ではまず色と背景色がサポートされる。

　一方、「:has()」と「@container」はレスポンシブデザインのために導入されたCSS機能だ。たとえば記事の一覧をカード形式でデザインするとき、「:has(img)」で記事カードに「画像が含まれる場合」「画像が含まれない場合」を分けてデザインできる。そこへさらに「@container」を組み合わせれば、画像タグのコンテナーであるカードの幅に応じたデザイン変更も可能。

　そのほかにも、「Fetch Upload Streaming」という技術がサポートされた。従来はコンテンツの準備が完了してからでないとデータを送信できなかったが、これを利用すれば完了前に送信を開始できるようになり、パフォーマンスの向上とメモリ使用量の削減が期待できる。

　加えて、以下の機能が「Origin Trials」を卒業し、安定版に組み込まれる。

　そのほかにも、以下の機能が追加される。

  • 「Multi-Screen Window Placement API」によって提供されるスクリーンラベル文字列が拡張され、より正確な情報を返すように
  • CSS：固定要素（position: fixed）で「overscroll-behavior」効果を抑止
  • DisplayMediaStreamConstraints.systemAudio（デスクトップのみ）
  • TransformStreamDefaultController：仕様に合わせてグローバルスコープで利用可能に
  • HTML Sanitizer API：サイバー攻撃につながりかねない文字を無効化。このリリースでは「Element.setHTML()」のみをサポート
  • import.meta.resolve()メソッド
  • Navigation APIの改善
  • onbeforeinputグローバル コンテンツ属性が「Chrome」でサポート
  • Opaque Response Blocking v0.1：クロスオリジン読み取りブロッキング（CORB）に代わる仕組み
  • Picture-in-Picture APIがAndroidに
  • Response.json() メソッド
  • ユーザーエージェント文字列の削減（「Chrome 100」で導入）によって失われたクライアントヒント情報を必要とするクライアント向けに用意されたHTML構文がわかりにくいとして、新しい構文を導入
  • File System Access APIで読み取り権限と書き込み権限の両方を持つディレクトリを1回のプロンプトで作成可能に（これまでは2回必要だった）

　「Google Chrome」ベータ版はWindows/Mac/Linux/Androidなどに対応するフリーソフトで、現在、同社のWebサイトからダウンロード可能。Windows版は64bit版を含むWindows 7/8/8.1/10/11で利用できる。