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

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

Rachel Andrew

公開日: 2026 年 10 月 29 日

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

Chrome 155、Chrome 156、Firefox 158、Firefox 159、Safari 27.1、Safari 27.2 が 2026 年 10 月に安定版としてリリースされました。この投稿では、今月ブラウザに導入される新機能について説明します。いくつかの主要な機能が Baseline の「新たに利用可能」に到達しています。

スクロールドリブン アニメーションがベースラインに

Firefox 159 では、スクロールドリブン アニメーションがデフォルトで有効になっています。

スクロール駆動型アニメーションを使用すると、CSS アニメーションまたは Web Animations API アニメーションの進行状況を、scroll-timeline と scroll() 関数を使用してスクロール コンテナのスクロール オフセットにリンクできます。また、view-timeline と view() 関数を使用して、animation-timeline で割り当てられたスクロールポート内の要素の可視性にリンクすることもできます。

Chrome、Safari、そして Firefox 159 でのサポートにより、スクロールドリブン アニメーションは Baseline の「新しく利用可能」になりました。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 159.
  • Safari: 26.

Source

スクロールドリブン アニメーション: Baseline Newly available への道を参照し、タイムラインをスクロールして、スクロールドリブン アニメーションが 2014 年初頭の提案から、すべてのコア ブラウザ エンジンに搭載された相互運用可能なウェブ標準へとどのように進化したかを確認してください。

スコープ付きカスタム要素レジストリが Baseline に

Firefox 159 で、スコープ付きカスタム要素レジストリのサポートが追加されました。

以前は、すべてのカスタム要素を 1 つのグローバル window.customElements レジストリに登録する必要がありました。そのため、異なるライブラリやチームのコンポーネントを組み合わせると、名前の競合が発生する可能性がありました。CustomElementRegistry() コンストラクタを使用して独立した CustomElementRegistry インスタンスを作成し、その定義を特定のシャドウツリーにスコープできるようになりました。customElementRegistry プロパティは、Document、Element、ShadowRoot でも使用できます。

Chrome、Safari、Firefox 159 でのサポートにより、スコープ付きカスタム要素レジストリが Baseline Newly available になりました。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 159.
  • Safari: 26.

Source

JPEG XL 画像のサポート

Chrome 155 と Firefox 158 の両方で、JPEG XL（image/jxl）画像形式のサポートがデフォルトで有効になります。

JPEG XL は、ISO/IEC 18181 として標準化されたロイヤリティフリーのラスター画像形式です。非可逆圧縮と可逆圧縮、プログレッシブ デコード、広色域、ハイ ダイナミック レンジ（HDR）、高ビット深度、透明度、アニメーション、既存の JPEG ファイルの可逆コード変換をサポートしています。Firefox 158 では、画像リクエストのデフォルトの HTTP Accept ヘッダーも更新され、image/jxl が含まれるようになります。

詳しくは、Chrome での JPEG XL のリリースをご覧ください。

Browser Support

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

Source

CSS 型付き演算が Baseline に

Firefox 158 では、calc() などの数学関数で CSS 型付き算術のサポートが追加されています。

CSS 型付き算術を使用すると、同じデータ型の 2 つの値を、異なる単位を使用している場合でも、単位なしの <number> 商を生成できます。この単位のない結果を、数値を受け入れるプロパティ（opacity や line-height など）で直接使用することも、別の単位を掛けて型を変換することもできます。

Firefox 158 で、Chrome と Safari の既存のサポートに加えて、CSS 型付き算術が Baseline で新たに利用可能になりました。

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: 158.
  • Safari: 26.

PerformanceResourceTiming.deliveryType

Firefox 158 では、PerformanceResourceTiming.deliveryType プロパティのサポートが追加されています。

このプロパティは、リソースがどのように配信されたかを示します。たとえば、リソースがキャッシュから提供された場合は "cache" を返します。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 158.
  • Safari: 26.4.

Source

random() CSS 関数

Chrome 156 では、random() CSS 関数のサポートが追加されました。

random() 関数は、指定された最小値と最大値の範囲内で、オプションのステップ間隔を使用してランダムな数値を生成します。デフォルトでは、random() 呼び出しごとに異なるランダムな値に解決されます。また、<random-key> を最初の引数として渡して、プロパティまたは要素間でランダムな値を共有することもできます。

Smashing Magazine の記事 Embracing playful imperfection with the CSS random() function の例をご覧ください。

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox Technology Preview: supported.
  • Safari: 26.2.

Source

margin-trim CSS プロパティ

Chrome 155 では、ブロック コンテナと複数列コンテナの margin-trim CSS プロパティのサポートが追加されました。

コンテナで margin-trim を使用すると、コンテナの端に接する子要素のマージンを省略できます。これにより、:first-child や :last-child のオーバーライドを必要とせずに、最初の子要素の前や最後の子要素の後に余分なスペースが生じるのを防ぐことができます。

詳しくは、margin-trim プロパティを使用して開始マージンと終了マージンを削除するをご覧ください。

Browser Support

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

Source

symbols() CSS 関数を使用したインライン カウンタ スタイル

Chrome 155 では、symbols() CSS 関数のサポートが導入されています。

symbols() 関数を使用すると、別の名前付き @counter-style at-rule を宣言することなく、list-style-type、list-style 略語、counter()、counters() 内で直接、匿名のカウンタ スタイルを定義できます。

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 35.
  • Safari Technology Preview: supported.

Source

text-decoration-skip-spaces CSS プロパティ

Chrome 155 では、text-decoration-skip-spaces CSS プロパティが追加されました。このプロパティは、テキスト装飾線（下線、上線、取り消し線など）が空白文字をスキップするかどうかを制御します。これにより、先頭、末尾、単語間のスペースに装飾が描画されるのを防ぐことができます。

Browser Support

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

:navigation-source CSS 疑似クラス

Chrome 156 では、:navigation-source CSS 疑似クラスが導入されます。ナビゲーションを開始したリンク、ボタン、フォーム要素と一致し、ナビゲーション全体でその要素が選択されたままになります。

Browser Support

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

JavaScript テキスト モジュールのインポートと、失敗したモジュール読み込みの再試行

Chrome 155 では、import ... with { type: "text" } を使用したテキスト モジュールのインポートがサポートされるようになり、Firefox に加わりました。type: "text" インポート属性は、ターゲット モジュールのコンテンツを JavaScript 文字列として読み込みます。

Browser Support

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

Source

Chrome 156 では、モジュールの読み込み動作も更新され、失敗したモジュールの読み込みが永続的にキャッシュされなくなりました。アプリケーションは、失敗したモジュールの読み込みを再試行できるようになりました。たとえば、一時的なネットワーク障害の後に import() を再度呼び出すことができます。

Chrome と Firefox での WebTransport の更新

thought Firefox 158 と Chrome 156 の両方で WebTransport が拡張されます。

Firefox 158 では、接続とデータグラムの統計情報を取得する WebTransport.getStats() メソッドと、ブラウザが信頼性の高いトランスポートのみで WebTransport セッションをサポートしているかどうかを示す静的 WebTransport.supportsReliableOnly プロパティが追加されています。

Browser Support

  • Chrome: 157.
  • Edge: 157.
  • Firefox: 158.
  • Safari: 26.4.

Source

Chrome 156 では、最初の CONNECT handshake 中に WebTransportOptions でカスタム HTTP リクエスト ヘッダーを渡し、WebTransport インスタンスからサーバー レスポンス ヘッダーを読み取る機能が追加されました。

Firefox の Notification navigate オプション

Firefox 158 では、Notification() コンストラクタと ServiceWorkerRegistration.showNotification() の navigate オプション、および Notification.navigate プロパティのサポートが追加され、Safari に加わりました。このオプションでは、ユーザーがシステム通知をクリックしたときにブラウザが移動する URL を指定します。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 18.5.

Source

Firefox での HTML Sanitizer API の更新

Firefox 158 では、javascriptURLs 設定オプションと Sanitizer.setJavascriptURLs() が HTML サニタイザー API に追加され、javascript: URL を含む属性が Element.setHTMLUnsafe() のような安全でない HTML 挿入方法を使用する際に削除されるかどうかを制御します。

Browser Support

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

Firefox 159 では、Element.setHTML() などの安全なサニタイザー メソッドも更新され、DOM ツリーの構築後ではなく、解析中に不要な要素と属性が削除されるようになりました。これにより、隣接するテキストが単一のテキストノードに保持されます。

Safari で flow-tolerance を fit-tolerance に名前変更

Safari 27.2 では、グリッドレーン レイアウト（display: grid-lanes）の flow-tolerance プロパティの名前が fit-tolerance に変更され、flow-tolerance は非推奨のエイリアスとして保持されます。

Browser Support

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

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

ベータ版のブラウザ バージョンでは、ブラウザの次の安定版に搭載される機能をプレビューできます。この段階は、サイトに影響を与える可能性のある新機能や削除された機能を、一般公開前にテストする絶好の機会です。今月の新しいベータ版は、Chrome 157、Chrome 158、Firefox 160 です。

Chrome 157 ベータ版には、border-radius と corner-shape、text-decoration-inset、text-overflow: <string>、position-visibility: anchor-valid、anchor-visible をまとめて設定する CSS corner 略記法とエッジ サブ略記法が含まれています。また、HTML-in-canvas レンダリングのサポートと、<camera>、<microphone>、<geolocation> の機能要素のアイコンのみの displaymode 属性も含まれています。

Chrome 158 ベータ版では、クロスオリジンのウェブアプリ インストール用に、宣言型 HTML <install> 要素と Web Install API（navigator.install()）が導入されています。CSS と SVG の追加には、::highlight(*) ユニバーサル カスタム ハイライト セレクタ、メディア要素状態疑似クラス（:playing、:paused、:seeking、:buffering、:stalled、:muted、:volume-locked）、flow-start と flow-end の配置キーワード、circle() と ellipse() の基本形状の closest-corner と farthest-corner の半径が含まれます。

Firefox 160 ベータ版では、ARM64 プラットフォームで WebExtensions runtime.PlatformInfo API が arch を aarch64 ではなく arm64 として返すように更新され、Chrome と整合性が取られるようになりました。