4 月にウェブ プラットフォームを初めて導入

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

Rachel Andrew

公開日: 2026 年 4 月 24 日

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

Chrome 147 と Firefox 150 が 4 月に安定版としてリリースされます。今月は Safari の安定版リリースはありませんでした。この記事では、今月の多くの新機能について説明します。

contrast-color() CSS 関数が Baseline に

Chrome 147 で contrast-color() 関数がリリースされたことで、この便利なユーザー補助機能がすべての主要なエンジンで利用できるようになり、Baseline Newly available になりました。

この関数は、色値を受け取り、指定された色に対して最もコントラストの高い黒または白を返します。これにより、テキストがアクセシビリティのコントラスト要件を満たしていることを確認できます。

Browser Support

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

Source

スクロール ドリブン アニメーションの範囲プロパティがベースラインになりました

Firefox 150 では、animation-range-start プロパティと animation-range-end プロパティ、および animation-range ショートハンドがサポートされています。これにより、これらのプロパティが Baseline Newly available になります。

これらのプロパティを使用すると、スクロール ドリブン アニメーションのタイムラインのどこでアニメーションを開始して終了するかを制御できます。

Browser Support

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

Source

ariaNotify() メソッド

Firefox 150 では、Document と Element で ariaNotify() メソッドのサポートが導入されました。このメソッドを使用すると、コンテンツ作成者はスクリーン リーダーで読み上げられるテキスト文字列をキューに追加できます。

これにより、特に DOM の更新に関連付けられていないアナウンスの場合に、ARIA ライブ リージョンよりも信頼性が高く人間工学に基づいた代替手段が提供されます。

Browser Support

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

Source

遅延読み込みされる画像の自動サイズ設定

Firefox 150 では、<img> 要素の sizes 属性の "auto" キーワードがサポートされるようになりました。これにより、遅延読み込みされた画像は、計算された画像レイアウト サイズを使用して srcset から最適なソースを選択できるため、レスポンシブ画像のセットアップが簡素化されます。

Browser Support

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

Source

要素スコープのビュー遷移

Chrome 147 では、任意の HTML 要素で element.startViewTransition() が公開されます。これにより、特定の要素にスコープ設定されたトランジションが可能になります。つまり、疑似要素は祖先のクリップと変換の影響を受け、複数のトランジションを同時に実行できます。

CSS border-shape プロパティ

Chrome 147 では border-shape プロパティが導入され、多角形や円などの形状で長方形以外の境界線を作成できるようになりました。

SVG <textPath> パス属性

Chrome 147 では、SVG の <textPath> 要素の path 属性のサポートが追加され、テキストパスのジオメトリをインラインで定義できるようになりました。

Browser Support

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

JSON とスタイルの Modulepreload サポート

Chrome 147 では、JSON とスタイル モジュール型が <link rel="modulepreload"> の宛先としてサポートされます。

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: 26.2.

Math.sumPrecise

Chrome 147 では、Math.sumPrecise の TC39 提案が実装され、イテラブル内の値の正確な合計が返されます。このメソッドは Baseline Newly available になりました。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 137.
  • Safari: 26.2.

Source

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

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

Chrome 148 ベータ版には、CSS の名前のみのコンテナ クエリ、動画と音声要素の遅延読み込み、@supports のフィーチャー検出用の at-rule() 関数が含まれています。

Firefox 151 ベータ版には CSS コンテナ スタイル クエリが含まれています。

Safari 26.5 ベータ版には、<details>、<dialog>、<select>、<input> 要素での :open 疑似クラスのサポートに加えて、多数の問題の解決が含まれています。