3 月にウェブ プラットフォームを導入

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

Rachel Andrew

公開日: 2026 年 3 月 31 日

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

Chrome 146、Firefox 149、Safari 26.4 が 3 月に安定版としてリリースされました。この投稿では、今月プラットフォームに導入される新機能を紹介します。

省略可能なコンテナ クエリ条件

Firefox 149 と Safari 26.4 の両方で、条件のない名前のみの @container クエリのサポートが含まれています。これにより、名前のみに基づいてコンテナを照合できるため、サイズやスタイルの制約を指定しなくても、コンテナのコンテキストに基づいて要素のスタイルを簡単に設定できます。

スクロールでトリガーされるアニメーション

Chrome 146 では、スクロール位置に基づくアニメーションの制御が追加されています。この機能を使用すると、CSS で宣言的にインタラクションを作成し、ワークロードをワーカー スレッドにオフロードして、パフォーマンスを向上させることができます。また、ウェブ アニメーション用の JavaScript インターフェースも含まれています。詳しくは、CSS スクロール トリガー アニメーションの登場をご覧ください。

Browser Support

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

trigger-scope プロパティ

Chrome 146 では、スクロール トリガー アニメーションに加えて、trigger-scope プロパティが導入されています。これにより、アニメーション トリガー名の可視性を制限し、アニメーションとトリガーのインタラクションを分離して、グローバル名の競合を回避できます。

Browser Support

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

ポップオーバーの hint 値

Firefox 149 で、popover グローバル属性の hint 値がサポートされるようになりました。hint 値を持つポップオーバーは、表示時に auto ポップオーバーを閉じませんが、他の hint ポップオーバーは閉じます。これにより、ポップオーバーの動作をよりきめ細かく制御できます。

Browser Support

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

グリッドレーン

Safari 16.4 は display: grid-lanes をサポートしています。これは、組積造スタイルのレイアウトをオンにする display の値です。

Browser Support

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

sizes 属性の数学関数

Safari 26.4 では、<img> 要素の sizes 属性で min()、max()、clamp() の数学関数を使用できるようになりました。これにより、レスポンシブ画像の読み込みの柔軟性が向上します。

JavaScript イテレータのシーケンス

Chrome 146 と Safari 26.4 の両方で、イテレータのシーケンスがサポートされるようになりました。既存のイテレータをシーケンスしてイテレータを作成する Iterator.concat(...items) が導入されています。この機能は、Baseline Newly でご利用いただけるようになりました。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 147.
  • Safari: 26.4.

Source

CloseWatcher インターフェース

Firefox 149 では、CloseWatcher インターフェースのサポートが追加されました。これにより、デベロッパーは、Windows の Esc キーや Android の戻るキーなどのデバイス ネイティブのメカニズムを使用して閉じることができるコンポーネントを、組み込みのダイアログやポップオーバーと同じように実装できます。

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox Technology Preview: supported.
  • Safari: not supported.

Source

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

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

Chrome 147 ベータ版

Chrome 147 ベータ版には、引数の色に対して最も高いコントラストを提供する黒または白のいずれかを返す CSS 関数 contrast-color() が含まれています。border-shape と要素スコープのビュー遷移も含まれます。

Firefox 150 ベータ版では、CSS の revert-rule キーワード、要素と DocumentOrShadowRoot の customeElementRegistry、画像の light-dark() が追加されています。