CSSの進化は止まらない！コンテナクエリとif()関数がさらに便利になり、興味を示したときに反応する新属性など、Chrome 142で新しく追加された9個のCSSの機能

Post on:2025年10月30日

sponsorsr

10/29にアップデートされたChrome 142に追加された、CSSとUIに関する新しい機能を紹介します。

今回のアップデートで注目すべきは、コンテナクエリとif()関数の範囲構文、ビジターが興味を示したときに反応するinterestfor属性、:target-before疑似クラスと:target-after疑似クラスなど、Web制作者は要チェックです！

New in Chrome 142
Chrome 142 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

はじめに
:target-before疑似クラスと:target-after疑似クラス
::view-transition要素の絶対位置指定
activeViewTransitionプロパティ
コンテナクエリとif()関数の範囲構文
interestfor属性
font-language-overrideプロパティ
SVG<a>要素のdownload属性
select要素のレンダリングモードの統一
同一オリジン間でのユーザー操作状態の保持

はじめに

10/29にリリースされたChrome 142で9つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 142は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その9つの新しいCSSとUIに関する機能を紹介します。

:target-before疑似クラスと:target-after疑似クラス

:target-before疑似クラスと:target-after疑似クラスはフラットツリーの順序に基づいて、同一スクロールマーカーグループ内でアクティブなマーカー（:target-currentに一致）の前または後に位置するスクロールマーカーに一致します。

:target-before疑似クラス: グループ内のフラットツリーの順序においてアクティブなマーカーの前に位置するすべてのスクロールマーカーに一致します。
:target-after疑似クラス: グループ内のフラットツリーの順序においてアクティブなマーカーの後に位置するすべてのスクロールマーカーに一致します。

::view-transition要素の絶対位置指定

ビュー遷移は要素の疑似サブツリーを使用して、::view-transitionがその遷移のルートになります。これまでは::view-transition要素はposition: fixed;で指定されていました。CSSワーキンググループはこれをposition: absolute;に変更することを決定し、Chrome 142ではこの変更を採用しています。

absoluteでもfixedの場合でもこの要素の包括ブロックがスナップショットの包括ブロックのままであるため、この変更には目立った影響はないと思います。唯一目に見える違いはgetComputedStyleです。

activeViewTransitionプロパティ

View Transitions APIを使用すると、デベロッパーは異なる状態面の視覚的遷移を開始できます。SPAの主要なエントリポイントはstartViewTransition()で、これは遷移オブジェクトを返します。このオブジェクトには遷移の進捗を追跡するための複数のプロセスと機能が含まれており、遷移をスキップしたり、遷移の種類を変更したりなど、遷移を操作することができます。

Chrome 142+では、デベロッパーはこのオブジェクトを保存する必要がなくなりました。このオブジェクトはdocument.activeViewTransitionプロパティで表され、遷移が進行中でない場合はnullを返します。

これはMPA遷移にも適用され、オブジェクトはpageswapおよびpagerevealイベントを通じてのみ利用できます。今回のアップデートでは、遷移の継続時間中にdocument.activeViewTransitionがこのオブジェクトに設定されます。

コンテナクエリとif()関数の範囲構文

Chromeは範囲構文のサポートを追加することで、CSSのスタイルクエリとif()関数を強化しました。

範囲構文はスタイルクエリで値の完全一致（例: style(--theme: dark)）以外にも拡張します。デベロッパーは比較演算子（>や<など）を使用してカスタムプロパティ、リテラル値（10pxや25%など）、およびattr()やenv()などの置換関数の値を比較できます。有効な比較をおこなうには両方の辺が同じデータ型に解決される必要があります。使用できる数値型は<length<>, <number<>, <percentage<>, <angle<>, <time<>, <frequenity<>, <resolution<>です。

たとえば、カスタムプロパティとリテラル値の長さを比較してみます。

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

@container style(--inner-padding > 1em) {

.card {

border: 2px solid;

}

2つのリテラル値を比較します。

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

@container style(1em < 20px) {

/* ... */

}

if()関数でスタイル範囲を使用します。

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

.item-grid {

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

}

interestfor属性

Chromeはbutton要素およびa要素にinterestfor属性を追加しました。

interestfor属性は、要素に「興味」を示す動作を追加する属性です。ユーザーが要素に「興味を示す」と、ターゲット要素でアクションがトリガーされます。たとえば、ポップオーバーを表示できます。ユーザーエージェントはポイントを要素上に合わせたり、キーボードのホットキーを押したり、タッチスクリーンで要素を長押しするなどの方法を通じて、ユーザーが要素に「興味を示した」ことを検出します。興味が示されたり、失われたりすると、対象要素にInterestEventが発生します。このイベントにはポップオーバーの表示や非常時といったポップオーバー用のデフォルトアクションが設定されています。

font-language-overrideプロパティ

Chroemはfont-language-overrideプロパティをサポートしました。このプロパティにより、デベロッパーはCSSで4文字の言語タグを設定することで、OpneTypeグリフの置換に使用されるシステム言語を上書きできます。

これにより、繊細なタイポグラフィ制御が可能になり、特に多言語コンテンツや言語固有のグリフバリアントを持つフォントで特に役立ちます。

SVG<a>要素のdownload属性

ChromeはSVG 2の仕様に準拠し、SVGAElementインターフェイスにおけるdownload属性をサポートしました。download属性を使用することで、SVG杯バーリンクのターゲットを移動先として表示する代わりにダウンロードができるように設定できます。これはHTMLAnchorElementですでにサポートされている動作を反映したものです。このことにより主要ブラウザ間の相互運用性が促進され、HTMLとSVG<a>要素間の一貫した動作が保証されるほか、デベロッパーエクスペリエンスとユーザーの期待値が向上します。

select要素のレンダリングモードの統一

select要素にsize属性とmultiple属性を使用することで、ページ内のリストボックスまたはポップアップ付きボタンとしてレンダリングできます。ただし、これらのモードはスマホ版とデスクトップ版のChromeで常に同じではありません。ページ内リストボックスのレンダリングはスマホでは利用できず、multiple属性が設定されている場合はポップアップ付きボタンはデスクトップでは利用できません。

今回のアップデートで、スマホにリストボックス、デスクトップに複数選択可能なポップアップが追加されました。また、size属性とmultiple属性を設定した場合のスマホとデスクトップで同じレンダリングモードが適用されるようになりました。
変更点は、下記の通りです。

size属性の値が1より大きい場合、常にページ内レンダリングが使用されます。以前はスマホではこれが無視されていました。
multiple属性がsize属性なしで設定されている場合、ページ内レンダリングが使用されます。以前はスマホではページ内リストボックスではなくポップアップを使用していました。
multiple属性が設定され、かつsize=1が設定されている場合、ポップアップが使用されます。以前はデスクトップではページ内リストボックスを使用していました。