Microsoft Edge 149 Web プラットフォーム リリース ノート (2026 年 6 月)

以下は、2026 年 6 月 4 日にリリースされる Microsoft Edge 149 の新しい Web プラットフォーム機能と更新プログラムです。

最新の状態を維持し、最新の Web プラットフォーム機能を入手するには、Microsoft Edge のプレビュー チャネル (Beta、Dev、または Canary) をダウンロードします。[ Microsoft Edge Insider になる] に移動します。

詳細な内容:

• Microsoft Edge DevTools
• WebView2
• CSS 機能
  • CSS ギャップデコレーション
  • ユーザーの操作でのクリップ テキスト オーバーフロー
  • image-rendering: crisp-edges
  • path-length SVG 要素の CSS プロパティ
  • path()、shape()、rect()、xywh()shape-outside
  • border-color: grayが削除されました ( のユーザー エージェント スタイルシート<table>
  • システム アクセント カラーを、インストール済みの Web アプリにスコープ設定する
  • ユーザー アクション擬似クラスの最上位層の境界
• Web API
  • Intl.Locale variants
  • PWA を新しいオリジンに移行する
  • 支払い要求で支払いハンドラー エラーを区別する
  • Request.isReloadNavigation 属性
  • リソース タイミングおよびナビゲーション タイミング API のサービス ワーカー ルーターのタイミング フィールド
  • autocorrect="off" on Windows タッチ キーボード
  • MIME の種類が指定されるまでクリップボード データの読み取りを延期する
  • bfcache エントリで WebSocket 接続を閉じる
• 元の試用版

Microsoft Edge DevTools

DevTools (Microsoft Edge 149) の新機能をご覧ください。

WebView2

WebView2 SDK のリリース ノートのランタイム 149 (2026 年 6 月 9 日) のリリース SDK 1.0.4022.49 を参照してください。

CSS 機能

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

CSS ギャップデコレーション

複数列レイアウトの column-rule と同様に、グリッド コンテナー レイアウトと Flexbox コンテナー レイアウトのギャップのスタイルを設定します。 ギャップ装飾を使用して、擬似要素や余分なラッパー要素などの回避策に頼らずに項目を視覚的に分離します。

関連項目:

• CSS のギャップのスタイルを設定する新しい方法
• MDN での複数列レイアウト。

ユーザーの操作でのクリップ テキスト オーバーフロー

ユーザーが text-overflow: ellipsis が設定されているテキストを操作すると (編集中やキャレット ナビゲーション中など)、テキストは省略記号からクリップに一時的に切り替わります (切り捨ては文字の途中で発生する可能性があります)。 これにより、ユーザーは非表示のオーバーフロー コンテンツを表示して操作できます。

この動作は、すべての編集可能な要素と編集不可能な要素に適用されます。 フォーム コントロール (<textarea>、 <input>) では、この動作が既にサポートされています。

関連項目:

• text-overflow at MDN.

image-rendering: crisp-edges

image-rendering プロパティで crisp-edges 値がサポートされるようになりました。

image-rendering: crisp-edges を使用して、色を滑らかにしたりぼかしたりせずに、コントラストとエッジを維持する方法で画像を拡大縮小します。

関連項目:

• MDN でのイメージレンダリング。

path-length SVG 要素の CSS プロパティ

新しい path-length CSS プロパティを使用して、次のような SVG ジオメトリ要素の pathLength 属性値を設定します。

• <path>
• <circle>
• <rect>
• <line>
• <polyline>
• <polygon>
• <ellipse>

path-length CSS プロパティを使用すると、スタイルシート、インライン スタイル、アニメーションを介して SVG の pathLength 属性値を操作できます。

CSS 宣言は、標準の CSS 優先順位規則に従って、SVG プレゼンテーション属性をオーバーライドします。 初期値は none です。

関連項目:

• pathLength at MDN.

path()、shape()、rect()、xywh()shape-outside

CSS shape-outside プロパティで path()、shape()、rect()、および xywh() 図形関数を使用して、浮動小数点排除図形を定義できるようになりました。

関連項目:

• path() MDN の CSS 関数 。
• shape() MDN の CSS 関数 。
• rect() MDN の CSS 関数 。
• xywh() MDN の CSS 関数 。
• float CSS プロパティを MDN に配置します。

border-color: gray のユーザー エージェント スタイルシートから<table>

誤った border-color: gray ルールは、 <table> 要素のブラウザーのユーザーエージェントスタイルシートから削除されました。 表の罫線が正しく既定で currentColor になり、HTML 仕様および他のブラウザーと一致するようになりました。

関連項目:

• <table> HTML テーブル要素 (MDN)。

システム アクセント カラーを、インストール済みの Web アプリにスコープ設定する

フォーム コントロールの accent-color: auto CSS 値は、インストールされた Web アプリ コンテキスト内でのみオペレーティング システムのアクセント カラーを適用するようになりました。 通常の Web ページでは、フォーム コントロールは代わりにブラウザーの既定のアクセント カラーを使用します。

この変更により、 accent-color: auto の動作が AccentColor および AccentColorText CSS システム カラー キーワード (インストールされた Web アプリ コンテキストも対象) に合わせて調整され、フィンガープリンティングが減少します。

関連項目:

• accent-color at MDN.

ユーザー アクション擬似クラスの最上位層の境界

:hover、:active、および :focus-within 擬似クラスは、親要素のチェーンの最初の最上位要素までのみ親要素で一致するようになりました。

たとえば、次の HTML について考えてみましょう。

<main>
  <div popover>
    <button></button>
  </div>
</main>
<script>document.querySelector('[popover]').showPopover();</script>

ユーザーが <button> 要素にカーソルを合わせると、:hover擬似クラスは <button> 要素および <div popover> 要素と一致しますが、<div popover>は最上位レイヤーの要素であるため、<main>要素には一致しません。

最上位レイヤー要素は、その親コンテキストの外部で視覚的にレンダリングされるため、最上位レイヤーの要素にカーソルを合わせたりアクティブ化したりするときに親スタイルを変更することは望ましくありません。

関連項目:

• ユーザー アクション セレクター レベル 4 の擬似クラス。
• MDN のポップオーバー API。

Web API

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

Intl.Locale variants

Intl.Locale オブジェクトは variants プロパティを公開するようになりました。 Intl.Locale コンストラクターのオプションでvariants文字列を渡すこともできるようになりました。

ロケールのバリアントは、言語 ID の言語、地域、スクリプト フィールドではカバーされない追加の言語設定を表します。

関連項目:

• Intl.Locale at MDN.

PWA を新しいオリジンに移行する

インストールされたプログレッシブ Web アプリ (PWA) を、ユーザーの信頼とアクセス許可を維持しながら、新しい同一サイト配信元にシームレスに移行できるようになりました。

ユーザーが PWA をインストールすると、その ID が Web オリジン ( app.example.com など) にバインドされます。 以前は、配信元を変更すると、ユーザーはアプリを手動でアンインストールして再インストールする必要がありました。 この機能によって、その中断が解消されます。

関連項目:

• MDN のプログレッシブ Web アプリ。

支払い要求で支払いハンドラー エラーを区別する

支払い要求 API を介してアクセスされる支払いハンドラーは、"ユーザーがキャンセルされました" と "内部支払いアプリ エラー" の個別のエラーを返すようになりました。

この区別を使用して、ユーザーにとってより良いフローを構築します。 たとえば、内部エラーが発生した場合は、ユーザーがキャンセルした場合はフローを適切に停止しながら、再試行するか別の支払い方法にフォールバックします。

• PaymentRequestEvent.respondWith に渡された Promise が OperationError で拒否された場合、PaymentRequest.show() Promise はOperationErrorを受け取ります。
• PaymentRequestEvent.respondWith に渡された Promise が OperationError 以外の値で拒否された場合、PaymentRequest.show() Promise はAbortError (ユーザーによるキャンセル) を受け取ります。

関連項目:

• MDN の支払い要求 API。

Request.isReloadNavigation 属性

isReloadNavigation 属性は、Fetch API の Request インターフェイスで使用できるようになりました。 この属性は、ユーザーが [更新 ] ボタンをクリックしたとき、 location.reload() メソッドまたは history.go(0) メソッドが実行されたときなど、ナビゲーション要求がユーザーによってトリガーされた再読み込みとして開始されたかどうかを示します。

isReloadNavigation 属性は読み取り専用のブール値です。

サービスワーカーの FetchEvent ハンドラーでこの属性を使用して、キャッシュのバイパスや特にリロード中にネットワーク優先戦略の強制など、キャッシュ戦略を実装します。

関連項目:

• request.isReloadNavigation in the fetch Standard.

リソース タイミングおよびナビゲーション タイミング API のサービス ワーカー ルーターのタイミング フィールド

workerMatchedRouterSource 属性と workerFinalRouterSource 属性をリソース タイミング API とナビゲーション タイミング API で使用できるようになりました。

• workerMatchedRouterSource 属性を使用して、一致したサービス ワーカー静的ルーター ルールを特定します。

• workerFinalRouterSource 属性を使用して、要求に使用された最終的なソースを識別します。

関連項目:

• MDN のサービス ワーカー API。
• サービス ワーカー静的ルーティング API を使用して、特定のパスでサービス ワーカーをバイパスします。

autocorrect="off" on Windows タッチ キーボード

autocorrect 属性が Windows タッチ キーボードで正しく動作するようになりました。 以前は、タッチ キーボードは autocorrect="off" 属性値を無視し、常に自動修正された単語を無視していました。

タッチ キーボードが入力したテキストを置き換えないようにするには、 autocorrect="off" 属性値を次のように設定します。

• <input>要素。
• <textarea>要素。
• contenteditable 属性が設定されているすべての要素。

関連項目:

• MDN でのオートコレクト。

MIME の種類が指定されるまでクリップボード データの読み取りを延期する

非同期クリップボード API では、 getType() を呼び出すまでオペレーティング システムからのクリップボード データの読み取りを延期するようになりました。 navigator.clipboard.read() を呼び出すと、ブラウザーは ClipboardItem オブジェクトの配列を返します。各オブジェクトは使用可能な MIME タイプを持ちますが、基礎となるデータは含まれていません。 実際のデータは、特定の形式を要求した場合にのみ読み取られます。

const items = await navigator.clipboard.read(); // No data is read yet.
const text = await items[0].getType('text/plain'); // Only the 'text/plain' data is read here.

これにより、CPU 使用率が軽減され、API 呼び出しの応答性が向上します。

関連項目:

• MDN のクリップボード API。

bfcache エントリで WebSocket 接続を閉じる

ページがバック/フォワード キャッシュ (bfcache) に入ると、開いている WebSocket 接続が、ページのキャッシュを防ぐのではなく閉じられるようになりました。

以前は、アクティブな WebSocket 接続があったページを bfcache に保存できませんでした。 この変更により、より多くのページで、元へとすぐに移動できるようになりました。

ページが bfcache に入ると、ページは影響を受ける各WebSocketでcloseイベントを受け取ります。 pageshow イベントをリッスンし、event.persistedがtrueになったら再接続します。

関連項目:

• WebSocket at MDN.
• MDN で bfcache を操作します。

元の試用版

Microsoft Edge で使用できる新しい実験的 API のオリジン試用版を次に示します。

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

利用可能なオリジン試用版の完全な一覧については、「 Microsoft Edge オリジン試用版」を参照してください。