「Google Chrome 142」安定版リリース、CSSの範囲構文サポートによりスタイルクエリーやif()関数が強化

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン142がリリースされました。CSSが範囲構文をサポートし、スタイルクエリーやif()関数の機能が強化されたほか、<select>要素のレンダリングがモバイル版とPC版で統一されるなど、複数の新機能と改善が含まれています。

Chrome 142  |  Release notes  |  Chrome for Developers
https://developer.chrome.com/release-notes/142

◆CSSの範囲構文サポート
CSSにおいて範囲構文のサポートが追加され、スタイルクエリーやif()関数の機能が強化されました。これまでは、スタイルクエリーやif()関数は条件が完全一致することが前提でした。

@container style(--theme: dark) {
  background-color: black;
  color: white;
}

これについて今回の更新で、範囲構文を使用することにより条件が範囲内に含まれる場合にもスタイルを適用できるようになりました。範囲の指定については、比較演算子を使用して、「カスタムプロパティ」「10pxや25%などのリテラル値」「attr()やenv()などの置換関数」を組み合わせて指定できます。ただし、有効な比較を行うには比較演算子の両辺が同じデータ型に解決可能である必要があります。また、比較対象は以下の数値型に限定されます。
・長さ
・数量
・パーセント
・角度
・時間
・頻度
・解像度

以下は、カスタムプロパティとリテラル値とを比較するコード例です。

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

以下は、2つのリテラル値を比較するコード例です。

@container style(1em < 20px) {
  /* ... */
}

以下は、if()関数で範囲構文を使用するコード例です。

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

◆<select>要素のレンダリングをモバイルとPCで統一
size属性とmultiple属性を使用すると、<select>要素をリストボックスまたはポップアップ付きのボタンとしてレンダリングできます。これまでは、モバイル版とPC版とでレンダリング結果が異なっており、モバイル版ではリストボックスが利用できず、PC版ではmultiple属性が存在する場合にポップアップ付きボタンが利用できませんでした。今回の更新により、モバイル版にはリストボックスが、PC版にはポップアップ付きボタンがそれぞれ導入され、両者のレンダリングが統一されました。

具体的な更新内容は以下のとおりです。
・size属性の値が1より大きい場合、常にリストボックスが表示されるようになりました。
・size属性なしでmultiple属性が設定されている場合、リストボックスが表示されるようになりました。
・size属性の値が1でmultiple属性が設定されている場合、ポップアップ付きボタンが表示されるようになりました。

◆同一オリジンで開始されたナビゲーション全体でユーザーアクティベーションを維持
これまで、ナビゲーション後のページではユーザーのアクティベーション状態が維持されておらず、自動フォーカスで仮想キーボードを表示するなどのユースケースが一部機能しませんでした。そのため、SPAではなくMPAでウェブアプリを構築したいとき、この仕様が実装上の障害点となっていました。

今回の更新により、ページが同じオリジンの別のページに移動した後も、同一オリジンで開始されたナビゲーション全体でユーザーアクティベーションが維持されるようになるため、前述のユースケースがサポートされるようになります。ただし、「リロード」「履歴ナビゲーション」「URLバーからの直接入力」といったブラウザで開始されたナビゲーションリクエストでは、引き続きユーザーアクティベーションはリセットされます。

◆:target-before疑似クラスと:target-after疑似クラス
:target-currentが示すアクティブマーカー要素と同じスクロールマーカーグループ内の、アクティブマーカーの前後にある要素を示す新しい疑似クラスとして、:target-before疑似クラスと:target-after疑似クラスが追加されました。
・:target-before：グループ内のフラットツリー順でアクティブマーカーより前のすべてのスクロールマーカーを示す
・:target-after：グループ内のフラットツリー順でアクティブマーカーの後に続くすべてのスクロールマーカーを示す

これらの疑似クラスを使用すると、アクティブマーカー要素の前もしくは後にある要素に共通のスタイルを適用できるようになります。

◆その他の更新
・::view-transition要素の絶対位置指定：「position: fixed」から「position: absolute」への変更
・document.activeViewTransition：View Transitions APIの遷移オブジェクトを常に参照できるプロパティ
・interestfor属性：ユーザーが要素に「関心を示す」ことでターゲット要素に対してアクションがトリガーされる
・SVG <a>要素：download属性をサポート
・WebGPU：primitive_index機能の追加
・WebGPU：テクスチャ形式tier1・tier2のサポート
・FedCM：サードパーティのiframeについて、iframeのオリジンをUI上に表示するサポートを追加
・JSONモジュール：*+json MIMEトークン検証を厳格化
・Web Speech API：認識フレーズのリストを追加することで音声認識にバイアスをかける機能の追加
・Media Session API：enterpictureinpictureアクションで送信される詳細情報にトリガーされた理由(enterPictureInPictureReason)を追加
・ローカルネットワークアクセスの制限

◆オリジントライアル
・セッション認証情報を特定デバイスにバインドする

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

なお、次期安定版の「Google Chrome 143」は現地時間の2025年12月2日(火)にリリース予定です。