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

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

Rachel Andrew

公開日: 2026 年 10 月 2 日

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

Chrome と Firefox の隔週リリースが開始される最初の月です。つまり、Chrome 153、Chrome 154、Firefox 155、Firefox 156、Firefox 157、Safari 27 は 2026 年 9 月に安定版としてリリースされます。この投稿では、ブラウザに導入された新機能について説明します。その多くは、Baseline Newly available に到達した機能です。

progress() CSS 関数が Baseline に

Firefox 155 で progress() CSS 数学関数がサポートされ、Baseline Newly Available になりました。

progress() 関数は、開始値と終了値の間の計算の位置を表す <number> を返します。通常、結果は 0 と 1 の間にクランプされます。これにより、コンテナまたはビューポートのサイズに基づいて、流動的なサイズ、不透明度、色を制御するのに役立ちます。Firefox 155 と Safari 27 の両方で no-clamp キーワード オプションのサポートも追加され、返される進行状況の値が 0 を下回ったり 1 を上回ったりできるようになりました。

.card {
  opacity: progress(100vw, 320px, 1200px);
}

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: 155.
  • Safari: 26.

Source

alpha() を含む相対アルファ カラーがベースラインになる

Firefox 155 と Safari 27 の両方で、CSS Color 5 の alpha() 相対色関数がサポートされるようになりました。

alpha() 関数は元の色を受け取り、その色チャンネルと色空間を保持しながら、アルファ（透明度）チャンネルを調整した色を返します。

.overlay {
  background-color: alpha(var(--brand-color) / 50%);
}

Chrome 151、Firefox 155、Safari 27 で alpha() がサポートされるようになったため、この関数は Baseline Newly available になりました。

Browser Support

  • Chrome: 151.
  • Edge: 151.
  • Firefox: 155.
  • Safari: 27.

Source

revert-rule CSS キーワードがベースラインになる

Safari 27 では、revert-rule CSS 全体キーワードのサポートが追加されました。

revert はカスケードをユーザーまたはユーザー エージェントのオリジンにロールバックし、revert-layer はカスケードの前のレイヤにロールバックしますが、revert-rule はプロパティの値を、現在のスタイルルールが存在しない場合の値にロールバックします。Chrome、Firefox、Safari 27 でサポートされるようになったため、revert-rule が Baseline で新たに利用可能になりました。

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: 150.
  • Safari: 27.

Source

light-dark() の <image> 値がベースラインになる

Safari 27 では、light-dark() CSS 関数内で <image> 値を使用できるようになりました。

以前は <color> 値に限定されていましたが、light-dark() は、アクティブなライトモードまたはダークモードの color-scheme に基づいて、2 つの画像（url() 画像や CSS グラデーションなど）を切り替えられるようになりました。Chrome、Firefox、Safari 27 でサポートされているため、light-dark() の <image> 値が Baseline で新たに利用可能になりました。

Browser Support

  • Chrome: 150.
  • Edge: 150.
  • Firefox: 150.
  • Safari: 27.

overflow-anchor を使用したスクロール アンカーがベースラインになる

Safari 27 では、スクロール アンカーが有効になり、overflow-anchor CSS プロパティのサポートが追加されました。

スクロール アンカーは、ユーザーがページを読んだり操作したりしているときに、表示されているビューポートの上で DOM が変更され、コンテンツがジャンプするのを防ぐために、スクロール位置を自動的に調整します。overflow-anchor: none を使用すると、特定の要素をアンカーノードとして機能しないようにオプトアウトできます。Safari 27 が Chrome と Firefox に加わったことで、スクロール アンカーが Baseline Newly available になりました。

Browser Support

  • Chrome: 56.
  • Edge: 79.
  • Firefox: 66.
  • Safari: 27.

Source

font-width プロパティと @font-face 記述子がベースラインになる

CSS Fonts 4 では、標準、縮小、拡大されたフォントフェイスを選択するための正規名として font-stretch が font-width に置き換えられ、font-stretch はレガシー エイリアスとして残されました。

Firefox 155 では、font-width CSS プロパティ、font-width @font-face ディスクリプタ、CSSStyleDeclaration.fontWidth のサポートが追加されています。Chrome 154 では、@font-face ルールに font-width ディスクリプタが追加され、FontFace オブジェクトに width プロパティが追加されました。Safari の既存のサポートと合わせて、font-width が Baseline Newly Available になりました。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 155.
  • Safari: 18.4.

Source

遅延読み込みされた画像の sizes="auto" がベースラインになる

Safari 27 では、loading="lazy" を使用する <img> 要素の sizes 属性で auto キーワードのサポートが追加されました。

sizes="auto"（または auto で始まる sizes リスト）を指定すると、ブラウザは遅延読み込みされた画像のレンダリングされたレイアウトの幅を使用して、srcset から最も適切な画像ソースを選択します。Chrome、Firefox、そして Safari 27 でのサポートにより、sizes="auto" が Baseline で新たに利用可能になりました。

Browser Support

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

Source

非同期イテレーションと転送可能な ReadableStream オブジェクトがベースラインに

Safari 27 には、ReadableStream に関するいくつかのアップデートが含まれています。

  • for await...of ループと ReadableStream.prototype.values() を使用した ReadableStream オブジェクトの非同期反復処理のサポート。
  • postMessage() を使用してコンテキスト間で ReadableStream オブジェクトを転送するためのサポート。
  • 反復可能オブジェクトまたは非同期反復可能オブジェクトから ReadableStream を作成する ReadableStream.from() 静的メソッドのサポート（Firefox でもサポートされています）。

Safari 27 では、非同期イテラブル ストリームと転送可能な ReadableStream オブジェクトが新たにベースラインで利用できるようになりました。

Browser Support

  • Chrome: 124.
  • Edge: 124.
  • Firefox: 110.
  • Safari: 27.

AnimationEvent.animation と TransitionEvent.animation がベースラインになる

Safari 27 では、AnimationEvent に animation プロパティが、TransitionEvent に animation プロパティが追加されています。

このプロパティは、CSS アニメーションまたはトランジション イベントに関連付けられた Animation オブジェクトを返します。これにより、イベント リスナーからアニメーションを直接検査または制御することが容易になります。Chrome、Firefox、Safari 27 でこのプロパティがサポートされるようになったため、Baseline Newly Available になりました。

Browser Support

  • Chrome: 151.
  • Edge: 151.
  • Firefox: 152.
  • Safari: 27.

Source

cookieStore.set() の maxAge オプションがベースラインになる

Safari 27 では、cookieStore.set() で Cookie を設定する際に maxAge オプションがサポートされるようになりました。これにより、絶対 expires タイムスタンプを計算するのではなく、Cookie の有効期間を秒単位で指定できます。Chrome、Firefox、Safari 27 でサポートされているため、maxAge オプションが Baseline Newly available になりました。

Browser Support

  • Chrome: 145.
  • Edge: 145.
  • Firefox: 148.
  • Safari: 27.

Safari 27 のカスタマイズ可能な <select>

Safari 27 では、appearance: base-select と <selectedcontent> 要素を使用してカスタマイズ可能な <select> メニューのサポートが追加され、Chrome に加わりました。

<select> とその ::picker(select) 疑似要素を appearance: base-select にオプトインすると、コントロールがスタイル設定可能なベースの外観に切り替わり、<option> 要素内のリッチ HTML コンテンツと、ボタンとドロップダウン ピッカーのカスタム スタイル設定が可能になります。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: behind a flag.
  • Safari: 27.

Chrome の宣言型 <camera> 要素と <microphone> 要素

Chrome 153 では、<camera> と <microphone> の HTML 機能要素が導入されます。

<usermedia> 要素を基盤として、<camera> と <microphone> は、ページ読み込み時にスクリプトで開始された権限プロンプトをトリガーせずに、単一の機能の動画または音声キャプチャ アクセスをリクエストするための、ユーザーが有効化する専用の宣言型コントロールを提供します。

Browser Support

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

JavaScript の Iterator と Promise の追加

Chrome 153 では、Iterator.zip() と Iterator.zipKeyed() を使用した共同イテレーションとともに Iterator.prototype.join() が追加されています。

Browser Support

  • Chrome: 153.
  • Edge: 153.
  • Firefox: 148.
  • Safari Technology Preview: supported.

Source

Firefox 155 では、Promise の辞書オブジェクトを受け取り、同じキーを持つオブジェクトに解決する Promise.allKeyed() と Promise.allSettledKeyed() が実装されています。

Browser Support

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

Source

Firefox 155 の WebTransport の更新

Firefox 155 では、WebTransport の実装が拡張されています。

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: 155.
  • Safari: 26.4.

Source

Safari 27 の Service Worker 静的ルーティング API

Safari 27 では、InstallEvent.addRoutes() を通じて Service Worker の静的ルーティング API のサポートが追加されました。

この API を使用すると、Service Worker はインストール時に宣言型ルーティング ルールを登録できるため、一致するリクエストは Service Worker の起動をバイパスして、ネットワークまたはキャッシュから直接フェッチできるようになり、ナビゲーションのパフォーマンスが向上します。

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: 27.

Source

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

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

Chrome 155 ベータ版には、CSS margin-trim、symbols()、text-decoration-skip-spaces、JPEG XL（image/jxl）デコードのサポート、テキスト モジュールのインポート（import ... with { type: "text" }）、Digital Credentials API の発行サポートが含まれています。

Chrome 156 ベータ版には、CSS random() 関数、CSS corner ショートハンド プロパティ、単一軸スクロール コンテナ、scroll-snap-type: pair、image-animation プロパティと :animated-image 疑似クラス、メディア要素の状態疑似クラス（:playing、:paused、:seeking、:buffering、:stalled、:muted、:volume-locked）、遅延モジュール評価（import defer）、HTML <install> 要素と Web Install API が含まれています。

Safari 27.2 ベータ版では、normal と組み合わせた場合の safe と unsafe のオーバーフロー配置のサポートが追加され、固定位置のボックスと ::picker(select) 要素での safe 配置が有効になり、display: grid-lanes の flow-tolerance が fit-tolerance に名前変更されました。