12 月にウェブ プラットフォームを利用

2025 年 12 月に安定版とベータ版のウェブブラウザに導入された興味深い機能をご紹介します。

Rachel Andrew

公開日: 2025 年 12 月 16 日

安定版ブラウザのリリース

Chrome 143、Firefox 146、Safari 26.2 が 12 月に安定版としてリリースされました。今回の投稿では、今月の多くの新機能を紹介します。そのうちのいくつかは、新たに Baseline で利用可能になります。

@scope CSS at-rule がベースラインになりました

Firefox 146 には、特定の DOM サブツリー内の要素を選択できる @scope CSS at-rule が含まれています。セレクタが要素をターゲットにできるスコープを定義することで、過度に具体的で長いセレクタを回避できます。たとえば、次の CSS は、クラス .card の要素内にある <img> 要素のみを対象とします。

@scope (.card) {
    img {
        border-color: green;
    }
}

Firefox 146 で、この便利な @ 規則が Baseline Newly available になりました。詳しくは、CSS の @scope at-rule を使用してセレクタの範囲を制限するをご覧ください。

contrast-color() CSS 関数

Firefox 146 には contrast-color() 関数も含まれています。この関数は、色の値を受け取り、WCAG AA の最小コントラストを確保することを目的としたコントラストのある色を返します。

その他の例については、WebKit ブログの How to have the browser pick a contrasting color in CSS をご覧ください。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 26.

Source

Firefox は、text-decoration-inset プロパティを最初に実装したブラウザです。このプロパティを使用すると、要素のテキスト装飾の開始点と終了点を調整して、レンダリングされたテキストに対して短縮、延長、位置のシフトを行うことができます。

font-language-override CSS プロパティ

Chrome 143 には font-language-override プロパティが含まれています。これにより、特定の言語の書体の動作をオーバーライドできます。これは、言語を適切にサポートしていない書体を使用している場合に便利です。サポートが充実している類似言語のグリフを使用できます。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 34.
  • Safari: not supported.

Source

CSS アンカー フォールバック コンテナクエリ

Chrome 143 では、position-try-fallbacks のどちらが適用されているかに基づいて、アンカー配置要素の子孫をスタイル設定する @container anchored(fallback) が導入されています。

このようなクエリを使用すると、アンカーとアンカー要素の相対的な位置関係に基づいて、アンカー要素のテザーやアニメーションのスタイルを設定できます。

background-position-x/y の一括指定のサイド相対構文

また、Chrome では、background-position の一括指定プロパティで、背景画像の端の 1 つに対する位置を定義できるようになりました。この機能は、すべてのブラウザで利用できます。次に例を示します。

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 49.
  • Safari: 15.4.

アニメーションの overallProgress プロパティ

Safari 26.2 には overallProgress が含まれています。Animation インターフェースのこの読み取り専用プロパティは、アニメーションの終了状態までの全体的な進行状況を示す 0 から 1 までの数値を返します。

このプロパティは、新たに Baseline で利用できるようになりました。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 142.
  • Safari Technology Preview: supported.

Source

LCP と INP が新たにベースラインで利用可能に

Largest Contentful Paint（LCP）と Interaction to Next Paint（INP）の指標が、新たにベースラインとして利用可能になりました。これらの指標の測定に必要な Contentful Paint API と Event Timing API が Safari 26.2 でサポートされています。

これらの機能は Interop 2025 に含まれており、すべての主要ブラウザの最新バージョンでこれらの指標を測定できるようになりました。

Largest Contentful Paint API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 89.
  • Safari: not supported.

Source

CHIPS がベースラインに到達 新たに利用可能

Safari 26.2 には、CHIPS（Cookies Having Independent Partitioned State）も含まれています。これにより、トップレベル サイトごとに個別の Cookie の格納場所を使用して、Cookie をパーティショニングされたストレージに取り込むことができます。

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 141.
  • Safari: not supported.

Source

hidden="until-found"

Safari 26.2 には hidden="until-found" のサポートが含まれており、これが新たに Baseline で利用可能になりました。

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 139.
  • Safari Technology Preview: supported.

Source

command 属性と commandfor 属性

また、Safari 26.2 の HTML では、ボタンの command と commandfor がサポートされています。これにより、ポップオーバーとダイアログを宣言的に制御できます。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 144.
  • Safari Technology Preview: supported.

Source

詳細については、command と commandfor の概要をご覧ください。

scrollend イベント

Safari 26.2 で新たにベースラインとなったもう一つの機能は、scrollend イベントです。スクロールが完了したときに発生します。詳しくは、Scrollend, a new JavaScript event をご覧ください。

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari Technology Preview: supported.

Source

scrollbar-color プロパティ

scrollbar-color プロパティを使用すると、スクロールバーの thumb とスクロールバーの track の色を変更できます。Safari 26.2 では、これもベースラインとして新たに利用できるようになります。

Browser Support

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 64.
  • Safari: not supported.

Source

ベータ版ブラウザのリリース

ブラウザのベータ版では、ブラウザの次の安定版で提供される予定の機能をプレビューできます。この期間は、サイトに影響する可能性のある新機能や削除を、世界にリリースされる前にテストする絶好の機会です。今月の新しいベータ版は Firefox 147 と Chrome 144 です。

Chrome 144 には、ページ内検索結果のスタイル設定用の ::search-text 疑似要素と、@scroll-state の scrolled サポートが含まれています。これにより、最新のスクロール方向に基づいてコンテナの子孫のスタイルを設定できます。日付と時刻を扱うための標準オブジェクトと関数を備えた Temporal API も含まれています。

Firefox 147 は、CSS アンカー ポジショニング、ビュー遷移タイプ、Navigation API を含むエキサイティングなリリースです。

今年リリースされたエキサイティングな CSS と UI の機能について詳しくは、CSS Wrapped 2025 をご覧ください。