Chrome 142 の新機能

Rachel Andrew

公開日: 2025 年 10 月 28 日

Chrome 142 がリリースされました。この投稿では、このリリースにおける主な機能の一部をご紹介します。Chrome 142 のリリースノートの全文をご覧ください。

このリリースのハイライトは次のとおりです。

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

これらの疑似クラスは、フラット ツリーの順序で決定される、同じスクロール マーカー グループ内のアクティブ マーカー（:target-current に一致）の前後のスクロール マーカーに一致します。

  • :target-before: グループ内のフラット ツリー順でアクティブなマーカーより前のすべてのスクロール マーカーに一致します。
  • :target-after: グループ内のフラット ツリー順でアクティブなマーカーの後に続くすべてのスクロール マーカーと一致します。

スタイル コンテナ クエリと if() の範囲構文

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

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

例:

カスタム プロパティをリテラル長と比較します。

@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);
}

インタレスト起動元（interestfor 属性）

Chrome は <button> 要素と <a> 要素に interestfor 属性を追加します。この属性は、要素に「関心」の動作を追加します。ユーザーが要素に関心を示すと、ターゲット要素でアクションがトリガーされます（ポップオーバーの表示など）。

ユーザー エージェントは、ユーザーが要素にカーソルを合わせる、キーボードの特別なホットキーを押す、タッチスクリーンの要素を長押しするなどの方法で要素に関心を示したことを検出します。関心が示された場合や失われた場合、ターゲットで InterestEvent が発生します。このターゲットには、ポップオーバーの表示や非表示など、ポップオーバーのデフォルトのアクションが設定されています。

関連情報

ここでは、主なハイライトの一部のみを取り上げます。Chrome 141 のその他の変更については、以下のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびにメール通知が届きます。X または LinkedIn で Google をフォローして、新しい記事やブログ投稿を入手することもできます。

Chrome 143 がリリースされ次第、Chrome の新機能についてお知らせします。