Microsoft Edge 150 Web プラットフォームのリリース ノート (2026 年 7 月)

2026 年 7 月 2 日にリリースされる Microsoft Edge 150 の新しい Web プラットフォームの機能と更新プログラムを次に示します。

最新の状態を維持し、最新の Web プラットフォーム機能を取得するには、Microsoft Edge (ベータ、開発、またはカナリア) のプレビュー チャネルをダウンロードします。 [Microsoft Edge Insider になる] に移動します。

詳細な内容:

• Microsoft Edge DevTools
• WebView2
• CSS 機能
  • AccentColor および AccentColorText システムの色
  • の省略可能な丸めパラメーターを許可する polygon()
  • アニメーション化可能なズーム
  • CSS URL 要求修飾子
  • CSS text-fit プロパティ
  • Css background-clip: border-area
  • CSS image(<color>) 関数
  • 画像値を含む CSS light-dark()
  • コンマ区切りのコンテナー クエリ
  • CSS を使用して印刷できない領域を公開する
  • Media 要素擬似クラス
  • named-feature() function for CSS @supports
  • overscroll-behavior: chain
  • flex-wrap:balance
• HTML 機能
  • focusgroup 属性
  • popover="hint" 属性の動作の変更
  • カスタマイズ可能な <selectedcontent> 要素をすべて更新する <select>
  • 順序が整った HTML のストリーミング
• Web API
  • クロスオリジン iframe とプラグインで SVG フィルターを無効にする
  • MediaStreamTrackProcessor フレーム カウンター
  • data: URL の不透明な配信元
  • PWA 配信元の移行
  • scrollByメソッドとscrollToメソッドが完了したときに通知を受け取る
  • Web Speech API: デバイス上の認識品質
  • WebGPU: イミディエイト
• 配信元の試用版

Microsoft Edge DevTools

「Microsoft Edge DevTools の新機能」を参照してください。

WebView2

WebView2 SDK のリリース ノートを参照してください。

CSS 機能

Microsoft Edge には、次の新しいカスケード スタイル シート (CSS) 機能が含まれています。

AccentColor および AccentColorText システムの色

AccentColorとAccentColorTextシステムの色を CSS の色の値として使用して、ユーザーのデバイスで指定されているシステムアクセントカラーにアクセスできるようになりました。

関連項目:

• MDN <system-color>。
• CSS カラーモジュール レベル 4 のシステム色。

の省略可能な丸めパラメーターを許可する polygon()

polygon() CSS 図形関数で省略可能な round パラメーターを使用できます。 長さの値を指定すると、ベジェ曲線を手動で計算することなく、多角形の角を丸めることができます。

たとえば、丸みを帯びた三角形を作成するには、 polygon(round 50px, 50% 0%, 0% 100%, 100% 100%)

関連項目:

• CSS polygon() ラウンド プレイグラウンド - 対話型デモ。
• [css-shapes] polygon() #9843 - CSS ワーキング グループの問題に対して省略可能な丸めパラメーターを許可 します。

アニメーション化可能なズーム

CSS zoom プロパティはアニメーション化でき、 <number>として補間されます。 ズームを切り替えてアニメーション化して、要素とそのレイアウトをスムーズにスケーリングし、既存の変換ベースのスケーリングを補完できます。

関連項目:

• MDN で CSS プロパティをzoomします。

CSS URL 要求修飾子

次の CSS 関数を CSS url() 関数と共に使用して、参照先リソースのフェッチ動作を制御できます。

• cross-origin()
• integrity()
• referrer-policy()

たとえば、 background-image: url("image.png" cross-origin(anonymous)) は CORS 匿名モードを使用してイメージをフェッチします。

これにより、次のような CSS 読み込みリソースのクロスオリジン アクセス、サブリソースの整合性、参照元ポリシーをきめ細かく制御できます。

• 画像。
• フォント。
• SVG 参照。
• インポートされたスタイルシート。

関連項目:

• url CSS 型は MDN にあります。
• CSS 値とユニット モジュール レベル 5 の要求 URL 修飾子。

CSS text-fit プロパティ

CSS text-fit プロパティは、テキスト ノードのフォント サイズを、その格納ボックスの幅に完全に合わせてスケーリングします。

このプロパティを使用すると、手動のフォント サイズ計算や複雑な JavaScript の回避策なしで、見出しまたは動的コンテンツが使用可能な水平領域を埋めることができます。

このプロパティは、さまざまな画面サイズとさまざまなテキスト長にわたって視覚的な配置を維持する応答性の高い文字体裁のための堅牢な CSS ネイティブ ソリューションを提供します。

関連項目:

• テキストのフィッティング:CSS テキスト モジュール レベル 4 のtext-fit プロパティ。

Css background-clip: border-area

CSS background-clip: border-area プロパティは、要素の背景を境界線ストロークによって描画された領域にクリップし、border-colorからの透明度を無視しながら、border-widthとborder-styleを考慮します。

これにより、 border-imageなしでグラデーションの境界線が有効になります。

関連項目:

• MDN で CSS プロパティをbackground-clipします。

CSS image(<color>) 関数

CSS image() 機能を使用すると、任意の色から単色の画像を簡単に生成できます。

たとえば、単色の赤い背景画像を作成するには、 background: image(red);を使用します。

関連項目:

• image MDN の CSS 型。
• イメージ フォールバックと注釈:CSS イメージ モジュール レベル 4 のimage()表記。

画像値を含む CSS light-dark()

CSS light-dark() 関数は、イメージ値 (url()、 image-set()、 none) を受け入れるようになりました。

これにより、ユーザーの好みの配色に基づいて画像を自動的に切り替えることができます。

light-dark()関数は、次のプロパティの画像値と共に使用できます。

• background-image
• list-style-image
• border-image-source
• cursor
• content

関連項目:

• MDN で CSS 関数をlight-dark()します。

コンマ区切りのコンテナー クエリ

@container 規則では、コンマで区切られた複数のコンテナー クエリがサポートされるようになりました。 @containerルールは、少なくとも 1 つのクエリが一致する場合に適用されます。

これにより、すべてのブラウザーでサポートされていない機能に対するフォールバック クエリを使用できます。

例:

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

関連項目:

• MDN で CSS コンテナークエリ を実行します。

CSS を使用して印刷できない領域を公開する

用紙の印刷できない領域への印刷を避けるには、CSS page-margin-safety プロパティを使用します。

プリンターは通常、用紙の 4 つの端のそれぞれに小さな領域があり、通常はプリンターの用紙処理メカニズムが原因で、プリンターが確実にマーキングできません。

既定のページ余白は、これらのペーパー エッジ領域よりも大きくなると予想されますが、アプリで余白を設定し、(カスタム ヘッダーやフッターなど) @page 余白ボックスを追加する場合は、 page-margin-safety プロパティを使用して、印刷が安全な場所を検出する方法を提供します。

関連項目:

• 印刷可能な領域内に留まる:CSS ページ メディア モジュール レベル 3 の page-margin-safety プロパティ。

Media 要素擬似クラス

次の CSS 擬似クラスは、 <audio> と <video> 要素の状態に基づいて一致します。

• :playing
• :paused
• :seeking
• :buffering
• :stalled
• :muted
• :volume-locked

関連項目:

• MDN で CSS 擬似クラスを:playingします。
• MDN で CSS 擬似クラスを:pausedします。
• MDN で CSS 擬似クラスを:seekingします。
• MDN で CSS 擬似クラスを:bufferingします。
• MDN で CSS 擬似クラスを:stalledします。
• MDN で CSS 擬似クラスを:mutedします。
• MDN で CSS 擬似クラスを:volume-lockedします。

named-feature() CSS の関数 @supports

named-feature()関数を使用すると、CSS @supports ルールは、他の@supportsメカニズムを使用してテストすることはできませんが、テストに価値がある特定の名前付き機能の小さなセットを照会できます。

関連項目:

• CSS 条件付きルール モジュール レベル 5 の@supportsルールの拡張機能。

overscroll-behavior: chain

overscroll-behavior CSS プロパティで、chain値がサポートされるようになりました。

このプロパティは、次の 2 つの独立した効果に影響します。

• スクロール伝達。
• ローカル境界線効果 (オーバースクロール ストレッチなど)。

以前は、 overscroll-behavior には 3 つの値がありました。

• none: 伝達なし、ローカル効果なし。
• auto: 伝達、ローカル効果。
• contain: 伝播なし、ローカル効果。

この機能は、セットを完了するために新しい値を追加します。

• chain: 伝達、ローカル効果なし。

関連項目:

• MDN で CSS プロパティをoverscroll-behaviorします。
• CSS オーバースクロール動作モジュール レベル 1 のオーバースクロール動作プロパティ。

flex-wrap:balance

flex-wrap:balance では、各 flex-line間でコンテンツを配布して、レイアウトのバランスが取れたようにすることができます。

これは text-wrap:balanceに似ています。

関連項目:

• MDN で CSS プロパティをflex-wrapします。
• フレックス ライン ラッピング:CSS フレキシブル ボックス レイアウト モジュール レベル 2 の flex-wrap プロパティ。

HTML 機能

Microsoft Edge には、次の新しい HTML 機能が含まれています。

focusgroup 属性

HTML focusgroup 属性は、ツールバー、タブ、メニュー、ラジオ グループなどの複合ウィジェットのキーボード ナビゲーションを標準化します。

focusgroup属性は、カスタム JavaScript コードを必要とせずに、次の処理を自動的に処理します。

• roving tabindex の動作。
• 方向キーを使用したナビゲーション。
• フォーカス メモリ。は、フォーカス グループを再入力するときに、最後にフォーカスされた要素を復元します。

例:

<div focusgroup="toolbar wrap" aria-label="Formatting">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

関連項目:

• キーボード ナビゲーションを簡単にします。
• 開発者フィードバックの要求: focusgroup。

popover="hint" 属性の動作の変更

popover="hint"属性を持つ要素の動作が変更され、popover="auto"要素との相互作用が改善されました。popover="hint"要素を開くと、関連のないpopover="auto"要素が誤って閉じなくなります。

以前は、これらの 2 種類のポップオーバー要素間の相互作用は、popover="hint"要素内の要素popover="auto"入れ子にするなど、状況によっては複雑になる可能性があります。

popover="hint" 要素が非表示になるのは、ancester popover="auto" 要素が非表示になっている場合、または新しい無関係な popover="auto" が開かれた場合のみです。

さらに、popover="hint"要素内のpopover="auto"要素を安全に入れ子にできるようになりました。 入れ子になった popover="auto" 要素は、 popover="hint" 要素として動作します。 これにより、カスタマイズ可能な <select> 要素を popover="hint" 要素内に配置するなどのユース ケースが可能になります。

関連項目:

• MDN での Popover API 。
• MDN で HTML グローバル属性をpopoverします。

カスタマイズ可能な <selectedcontent> 要素をすべて更新する <select>

カスタマイズ可能な<select>要素で複数の<selectedcontent>要素が定義されている場合、それらの要素はすべて、DOM 順の最初の要素ではなく、現在選択されているオプションで最新の状態に保たれます。

関連項目:

• MDN でカスタマイズ可能な選択要素。
• selectedcontent MDN で選択された HTML オプション表示要素。

順序が整った HTML のストリーミング

<template for> HTML 要素と<?start>と<?end>処理命令範囲を使用して、JavaScript を使用せずにドキュメントの既存の部分を更新します。

この機能は、Web 上の同じドキュメント更新プログラムの組み込みサポートを追加するための、より大きなイニシアチブの一部です。

関連項目:

• MDN <テンプレート> HTML コンテンツ テンプレート要素。
• インターリーブされた HTML ストリーミング (パッチ適用) - この機能が一部である広範なイニシアチブの説明。

Web API

Microsoft Edge には、次の新しい Web API 機能が含まれています。

クロスオリジン iframe とプラグインで SVG フィルターを無効にする

SVG フィルターは、次に適用されなくなりました。

• クロスオリジンまたは制限付き iframe (サンドボックス化された iframe など)。
• 埋め込みプラグイン (PDF など)。

これにより、SVG フィルター効果によってクロスオリジン コンテンツが処理される可能性のあるセキュリティの問題を防ぐことができます。

関連項目:

• MDN での SVG フィルター 。
• MDN で HTML インライン フレーム要素を<iframe>します。

MediaStreamTrackProcessor フレーム カウンター

MediaStreamTrackProcessor インターフェイスでdiscardedFrames属性とtotalFrames属性を使用できるようになりました。

これらのカウンターを使用すると、次の追跡によってメディア処理パイプラインの正常性を監視できます。

• 受信したフレームの数。
• システム リソースの制約が原因で削除されたフレームの数。

関連項目:

• MDN の MediaStreamTrackProcessor 。

data: URL の不透明な配信元

data: URL から作成された専用 Worker と Shared Worker に、作成者の配信元を継承するのではなく、一意の不透明な配信元が割り当てられるようになりました。

これにより、Edge が HTML Standardに合わせられ、BroadcastChannel、localStorage、IndexedDBなどの同じ配信元の状態からこれらのワーカーを分離することで、セキュリティが向上します。

分離境界を保持するために、これらのワーカーは作成者と同じストレージ パーティションに保持されます (たとえば、最上位サイトや nonce など)。

関連項目:

• RFC 2397: "data" URL スキーム。
• HTML Living Standardのワーカーのスクリプト設定の手順 3。

PWA 配信元の移行

Web App Origin Migration を使用すると、プログレッシブ Web アプリ (PWA) は、信頼、インストール状態、および適用可能なアクセス許可を維持しながら、新しい配信元に移行できます。

これにより、チームはユーザーに再インストールを強制することなく、ドメイン間でアプリを安全に移動できます。

関連項目:

• MDN の Web アプリ マニフェスト。

scrollByメソッドとscrollToメソッドが完了したときに通知を受け取る

scrollByやscrollToなどのプログラムによるスクロール メソッドは、スクロールが完了したときに解決されるPromise オブジェクトを返すようになりました。 タイマーまたはスクロール イベントのポーリングに依存せずに、スムーズスクロールが完了した後にコードを実行するには、この promise を使用します。

関連項目:

• ウィンドウ: MDN の scrollBy() メソッド 。
• ウィンドウ: MDN の scrollTo() メソッド 。

Web Speech API: デバイス上の認識品質

SpeechRecognition インターフェイスで quality プロパティがサポートされるようになりました。

quality プロパティを使用すると、processLocally: trueを使用する認識に必要なセマンティック機能 (デバイス上認識とも呼ばれます) を指定できます。

quality プロパティでサポートされる値は、タスクの複雑さとハードウェア要件の増加に対応します。

• command
• dictation
• conversation

quality プロパティを使用すると、デバイスがデバイス上の認識を使用してユース ケースを処理できるか、クラウド認識サービスにフォールバックする必要があるかどうかを判断できます。

関連項目:

• MDN での SpeechRecognition 。
• SpeechRecognition API を使用して音声をテキストに変換します。

WebGPU: イミディエイト

WebGPU でイミディエイトがサポートされるようになりました。

この機能は、WGSL に immediate アドレス空間を追加し、レンダー パス、コンピューティング パス、レンダー バンドル エンコーダーに setImmediateData() メソッドを追加します。 これらの API を使用すると、GPU バッファーを作成したりグループをバインドしたりすることなく、頻繁に更新される小さな値をシェーダーに渡すことができます。

これは、オブジェクト インデックス、マテリアル インデックス、変換値などの描画ごとのデータに役立ちます。

関連項目:

• MDN の WebGPU API 。
• WebGPU 仕様。
• WebGPU シェーディング言語 (WGSL) 仕様。

配信元の試用版

Microsoft Edge で利用できる新しい試験的 API の配信元試用版を次に示します。

配信元の試用版では、期間限定で、独自のライブ Web サイトで試験的な API を試すことができます。 配信元の試用版の詳細については、「 Microsoft Edge で配信元試用版を使用する」を参照してください。

使用可能な配信元試用版の完全な一覧については、「 Microsoft Edge 配信元試用版」を参照してください。