2025 年 10 月に安定版とベータ版のウェブブラウザに搭載された興味深い機能をご紹介します。
公開日: 2025 年 10 月 30 日
安定版ブラウザのリリース
Chrome 142 と Firefox 144 が 10 月に安定版としてリリースされました。この投稿では、これがウェブ プラットフォームにどのような影響を与えるかについて説明します。
シングルページ アプリ用の View Transitions API
Firefox 144 には、同一ドキュメントのビュー遷移のサポートが含まれています。これには、次のサポートが含まれます。
:active-view-transition疑似クラスview-transition-classプロパティview-transition-nameプロパティ::view-transition疑似要素::view-transition-group()疑似要素::view-transition-image-pair()疑似要素::view-transition-new()疑似要素::view-transition-old()疑似要素
これにより、同じドキュメント内のビューの切り替えが Baseline で新たに利用可能になります。
<button> 要素の command 属性と commandfor 属性
Firefox 144 は command と commandfor をサポートしています。これらの属性の詳細については、command と commandfor の概要をご覧ください。
Browser Support
moveBefore() メソッド
moveBefore() メソッドが Element、DocumentFragment、Document インターフェースで Firefox でサポートされるようになりました。これにより、オブジェクトの直下の子要素を、別の直下の子要素の前に移動できます。このとき、両方の要素の状態は保持されます。
詳しくは、moveBefore() を使用して DOM 変更時に状態を保持するをご覧ください。
:target-before 疑似クラスと :target-after 疑似クラス
Chrome 142 では、同じスクロール マーカー グループ内のアクティブ マーカーの前後のスクロール マーカー(:target-current に一致)に一致する疑似クラスが追加されました。これは、フラット ツリーの順序によって決定されます。
:target-before: グループ内のフラット ツリー順でアクティブなマーカーより前のすべてのスクロール マーカーに一致します。:target-after: グループ内のフラット ツリー順でアクティブなマーカーの後に続くすべてのスクロール マーカーと一致します。
スタイル コンテナ クエリと if() の範囲構文
Chrome 142 では、範囲構文のサポートを追加することで、CSS スタイルクエリと if() 関数が強化されています。
これにより、スタイルクエリが完全一致(style(--theme: dark) など)を超えて拡張されます。デベロッパーは、比較演算子(> や < など)を使用して、カスタム プロパティ、リテラル値(10px や 25% など)、置換関数(attr() や env() など)の値を比較できます。有効な比較を行うには、両側が同じデータ型に解決される必要があります。次の数値型に限定されます: <length>、<number>、<percentage>、<angle>、<time>、<frequency>、<resolution>。
インタレスト起動元(interestfor 属性)
Chrome 142 では、<button> 要素と <a> 要素に interestfor 属性も追加されています。この属性は、要素に「関心」の動作を追加します。ユーザーが要素に関心を示すと、ターゲット要素でアクションがトリガーされます(ポップオーバーの表示など)。
ユーザー エージェントは、ユーザーが要素にカーソルを合わせる、キーボードの特別なホットキーを押す、タッチスクリーンの要素を長押しするなどの方法で要素に関心を示したことを検出します。関心が示された場合や失われた場合、ターゲットで InterestEvent が発生します。このターゲットには、ポップオーバーの表示や非表示など、ポップオーバーのデフォルトのアクションが設定されています。
ベータ版ブラウザのリリース
ブラウザのベータ版では、ブラウザの次の安定版で提供される予定の機能をプレビューできます。この期間は、サイトに影響する可能性のある新機能や削除を、世界にリリースされる前にテストする絶好の機会です。今月の新しいベータ版は Firefox 145 と Chrome 143 で、Safari 26.1 は継続中です。
Firefox 145 には、ToggleEvent インターフェースの source プロパティと Atomics.waitAsync() 静的メソッドが含まれています。
Chrome 145 には、CSS アンカー フォールバック コンテナ クエリが含まれています。これにより、適用される position-try-fallbacks 値に基づいて、アンカー配置要素の子孫をスタイル設定する @container anchored(fallback) が導入されます。