2026 年 6 月 4 日にリリースされる Microsoft Edge 149 の新しい Web プラットフォームの機能と更新プログラムを次に示します。
最新の状態を維持し、最新の Web プラットフォーム機能を取得するには、Microsoft Edge (ベータ、開発、またはカナリア) のプレビュー チャネルをダウンロードします。 [Microsoft Edge Insider になる] に移動します。
詳細な内容:
- Edge DevTools
- WebView2
- CSS 機能
-
Web API
- クロスオリジン iframe とプラグインで SVG フィルターを無効にする
- Intl.Locale バリアント
-
OpaqueRangeフォーム コントロール テキストの場合 - PWA を新しい配信元に移行する
- 支払い要求で支払ハンドラーエラーを区別する
-
scrollByメソッドとscrollToメソッドが完了したときに通知を受け取る -
Request.isReloadNavigation属性 - リソース タイミングとナビゲーション タイミング API の Service Worker ルーターのタイミング フィールド
-
autocorrect="off"Windows タッチ キーボード - MIME の種類が指定されるまでクリップボード データの読み取りを延期する
- bfcache エントリで WebSocket 接続を閉じる
- 配信元の試用版
Edge DevTools
「Microsoft Edge DevTools の新機能」を参照してください。
WebView2
WebView2 SDK のリリース ノートを参照してください。
CSS 機能
Microsoft Edge には、次の新しいカスケード スタイル シート (CSS) 機能が含まれています。
CSS ギャップの装飾
複数列レイアウトの column-rule と同様に、Grid と Flexbox のコンテナー レイアウトでギャップのスタイルを設定します。 擬似要素や追加のラッパー要素などの回避策に頼らずに、ギャップ装飾を使用して項目を視覚的に分離します。
関連項目:
ユーザー操作時のテキスト オーバーフローをクリップする
ユーザーが (編集中やキャレット ナビゲーション中など) text-overflow: ellipsis 設定されているテキストと対話すると、テキストは省略記号からクリップに一時的に切り替えられます (文字の途中で切り捨てが発生する可能性があります)。 これにより、ユーザーは非表示のオーバーフロー コンテンツを表示して操作できます。
この動作は、編集可能要素と編集不可要素すべてに適用されます。 フォーム コントロール (<textarea>、 <input>) は既にこの動作をサポートしています。
関連項目:
- MDN での text-overflow。
image-rendering: crisp-edges
image-rendering プロパティで、crisp-edges値がサポートされるようになりました。
image-rendering: crisp-edgesを使用して、色をスムージングしたりぼかしを加えたりすることなく、コントラストとエッジを維持する方法でイメージをスケーリングします。
関連項目:
- MDN での image-rendering。
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()図形関数を使用して、float の除外図形を定義できるようになりました。
関連項目:
- MDN の path() CSS 関数 。
- MDN の shape() CSS 関数 。
- MDN の rect() CSS 関数。
- MDN の xywh() CSS 関数 。
- MDN の float CSS プロパティ。
のユーザー エージェント スタイルシートから border-color: gray を削除しました <table>
<table> 要素のブラウザーのユーザー エージェント スタイルシートから、誤ったborder-color: grayルールが削除されました。 テーブルの境界線が、HTML 仕様やその他のブラウザーと一致する currentColorに正しく既定で設定されるようになりました。
関連項目:
- table MDN の HTML テーブル要素。
インストールされている Web アプリに対するスコープ システムのアクセントカラー
フォーム コントロールの accent-color: auto CSS 値によって、オペレーティング システムのアクセントカラーが、インストールされている Web アプリ コンテキスト内でのみ適用されるようになりました。 通常の Web ページでは、フォーム コントロールでは、代わりにブラウザーの既定のアクセントカラーが使用されます。
この変更により、 accent-color: auto の動作が AccentColor と AccentColorText CSS システム カラー キーワードに合わせて調整されます。これは、インストールされている Web アプリ コンテキストにもスコープを設定して、フィンガープリントを減らします。
関連項目:
ユーザー アクション擬似クラスの最上位レイヤー境界
: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 での Popover API 。
Web API
Microsoft Edge には、次の新しい Web API 機能が含まれています。
クロスオリジン iframe とプラグインで SVG フィルターを無効にする
SVG フィルターは、次に適用されなくなりました。
- クロスオリジンまたは制限付き iframe (サンドボックス化された iframe など)。
- 埋め込みプラグイン (PDF など)。
これにより、SVG フィルター効果によってクロスオリジン コンテンツが処理される可能性のあるセキュリティの問題を防ぐことができます。
関連項目:
Intl.Locale バリアント
Intl.Locale オブジェクトは、variants プロパティを公開するようになりました。
Intl.Locale コンストラクターのオプションでvariants文字列を渡すこともできます。
ロケールのバリアントは、言語 ID の言語、地域、スクリプト フィールドでカバーされていない追加の言語設定を表します。
関連項目:
OpaqueRange フォーム コントロール テキストの場合
OpaqueRangeを使用して、<textarea>やテキストベースの<input>など、フォーム コントロールの値内のテキストの有効期間を表します。
OpaqueRange では、インラインの候補、強調表示、固定されたポップオーバーに対して次の機能を使用できます。
-
getBoundingClientRect()やgetClientRects()などの操作。 - CSS カスタム 強調表示 API との統合。
OpaqueRangeは値オフセットのみを公開してカプセル化を保持し、startContainerとendContainerのnullを返します。
関連項目:
- MicrosoftEdge/Demos の OpaqueRange。
- OpaqueRange API を試してください。 ミラー divs を使用して入力内のテキスト位置を測定するのをやめましょう。 YouTube で。
PWA を新しい配信元に移行する
インストールされているプログレッシブ Web アプリ (PWA) を新しい同じサイトの配信元にシームレスに移行し、ユーザーの信頼とアクセス許可を維持できるようになりました。
ユーザーが PWA をインストールすると、その ID は Web 配信元 (たとえば、 app.example.com) にバインドされます。 以前は、配信元を変更すると、ユーザーはアプリを手動でアンインストールして再インストールする必要があります。 この機能により、その中断が排除されます。
関連項目:
- MDN のプログレッシブ Web アプリ。
支払い要求で支払ハンドラーエラーを区別する
支払い要求 API を介してアクセスされる支払ハンドラーは、"ユーザーが取り消された" と "内部支払いアプリエラー" の個別のエラーを返すようになりました。
この違いを使用して、ユーザーにとってより良いフローを構築します。 たとえば、内部エラーが発生した場合は、ユーザーがキャンセルした場合にフローを適切に停止しながら、別の支払い方法を再試行またはフォールバックします。
-
PaymentRequestEvent.respondWithに渡された約束がOperationErrorで拒否された場合、PaymentRequest.show()の約束はOperationErrorを受け取ります。 -
PaymentRequestEvent.respondWithに渡された promise がOperationError以外の値で拒否された場合、PaymentRequest.show()promise はAbortError(ユーザーキャンセル) を受け取ります。
関連項目:
scrollByメソッドとscrollToメソッドが完了したときに通知を受け取る
scrollByやscrollToなどのプログラムによるスクロール メソッドは、スクロールが完了したときに解決されるPromise オブジェクトを返すようになりました。 タイマーまたはスクロール イベントのポーリングに依存せずに、スムーズスクロールが完了した後にコードを実行するには、この promise を使用します。
関連項目:
Request.isReloadNavigation 属性
isReloadNavigation属性は、Fetch API の Request インターフェイスで使用できるようになりました。 この属性は、ユーザーが [更新 ] ボタンをクリックしたときや、 location.reload() または history.go(0) メソッドの実行時など、ナビゲーション要求がユーザーによってトリガーされた再読み込みとして開始されたかどうかを示します。
isReloadNavigation属性は、読み取り専用のブール値です。
Service Worker の FetchEvent ハンドラーでこの属性を使用して、キャッシュをバイパスしたり、特に再読み込み中にネットワークファースト戦略を適用したりするなどのキャッシュ戦略を実装します。
関連項目:
- Request.isReloadNavigation in the Fetch Standard.
リソース タイミングとナビゲーション タイミング API の Service Worker ルーターのタイミング フィールド
workerMatchedRouterSource属性とworkerFinalRouterSource属性は、リソース タイミングとナビゲーション タイミング API で使用できるようになりました。
workerMatchedRouterSource属性を使用して、一致したサービス ワーカーの静的ルーター規則を特定します。workerFinalRouterSource属性を使用して、要求に使用された最終的なソースを識別します。
関連項目:
autocorrect="off" 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 接続を閉じる
開いている WebSocket 接続は、ページがキャッシュされないようにするのではなく、ページがバック/フォワード キャッシュ (bfcache) に入ったときに閉じられるようになりました。
以前は、アクティブな WebSocket 接続を持つページを bfcache に格納できませんでした。 この変更により、より多くのページが、すぐに前後に移動できるという利点があります。
ページが bfcache に入ると、影響を受ける各WebSocketでclose イベントがページに送信されます。
pageshow イベントをリッスンし、event.persistedがtrueされたときに再接続します。
関連項目:
- MDN の WebSocket 。
- MDN での bfcache の操作。
配信元の試用版
Microsoft Edge で利用できる新しい試験的 API の配信元試用版を次に示します。
配信元の試用版では、期間限定で、独自のライブ Web サイトで試験的な API を試すことができます。 配信元の試用版の詳細については、「 Microsoft Edge で配信元試用版を使用する」を参照してください。
使用可能な配信元試用版の完全な一覧については、「 Microsoft Edge 配信元試用版」を参照してください。
| 名前 | 説明 | 登録 |
|---|---|---|
| デスクトップ プラットフォーム上の分離されていないページの SharedArrayBuffers | クロスオリジン分離されていないページで SharedArrayBuffer オブジェクトを使用できるようにします。 |
登録 |
| 着信呼び出し通知 | インストールされている PWA が着信通知を着信音と承諾/拒否ボタンで送信できるようにします。 | 登録 |
| Proofreader API | 組み込みの言語モデルを使用して、テキストの文法、スペル、句読点のエラーを修正します。 「Proofreader API」も参照してください。 | 登録 |
| プロンプト API | Web サイトまたは拡張 JavaScript コードから組み込みの言語モデルをプロンプトします。 「プロンプト API」も参照してください。 | 登録 |
| API サンプリング パラメーターのプロンプト |
topK および temperature サンプリング パラメーターを使用すると、言語モデル セッションごとのモデル動作を最適化できます。 |
登録 |
| WebAssembly カスタム記述子 | ソース レベルの型に関連付けられたデータをより効率的に、カスタム記述子オブジェクトに格納します。 | 登録 |
<usermedia> HTML 要素 |
JavaScript ベースのアクセス許可要求を置き換えて、カメラまたはマイクへのアクセスを要求するためのブラウザー制御 HTML 要素。 | 登録 |
| ソフト ナビゲーション ヒューリスティック | シングルページ アプリでパフォーマンス メトリックを収集するためのソフト ナビゲーション ヒューリスティックを公開します。 | 登録 |
| 拡張キャンバス TextMetrics | 選択四角形、境界ボックス クエリ、グリフ クラスター操作を使用して TextMetrics Canvas API を展開します。 | 登録 |
| WebNN | ハードウェア高速化機械学習モデルを Web アプリで直接構築して実行します。 | 登録 |
focusgroup HTML 属性 |
ツールバー、タブ、メニュー、ラジオ グループなどの複合ウィジェットのキーボード ナビゲーションを標準化します。 | 登録 |
| CSP script-src の URL と eval ハッシュ | ホスト名ベースの許可リストとunsafe-evalを置き換えて、script-src CSP ディレクティブの URL ハッシュと eval- ハッシュを導入します。 |
登録 |
| Web インストール API | Web サイトで、 navigator.install()を使用して別の Web サイトを Web アプリとしてインストールできるようにします。 |
登録 |
<install> HTML 要素 |
<install>要素を使用して、他の Web サイトを Web アプリとして宣言的にインストールします。 |
登録 |
| キャンバス内の HTML | 新しい描画メソッドと paint イベントを使用して、キャンバスで HTML をレンダリングできるようにします。 |
登録 |
| デジタル資格情報 API - 発行サポート | 資格情報発行者サーバーからデジタル ウォレット アプリケーションへのユーザー資格情報の発行をトリガーします。 | 登録 |
prerender_until_script 投機ルール API アクション |
ページをプリレンダリングするが、スクリプトの実行時にプリフェッチに切り替える投機ルール API アクション。 | 登録 |
| WebAudio 構成可能なレンダー量子 |
AudioContextまたはOfflineAudioContextを作成するときに、カスタム レンダー量子サイズを指定できます。 |
登録 |
| フォーム送信による事前レンダリングのアクティブ化 | 憶測ルール API のプリレンダリング ルールをフォーム送信によってアクティブ化できるようにします。 | 登録 |
| CPU パフォーマンス API | Compute Pressure API で使用するために、ユーザーのデバイス機能に関する情報を公開します。 | 登録 |
| 接続許可リスト | ドキュメントまたはワーカーからエンドポイントのサーバー分散許可リストへの接続を制限します。 | 登録 |
| クロスオリジン iframe のプリレンダリング | ページのアクティブ化まで遅延させる代わりに、オプトイン応答ヘッダーを介してクロスオリジン iframe をプリレンダリングします。 | 登録 |
| コンテナーのタイミング | 注釈付き DOM コンテナーが表示され、初期描画が完了したことを監視します。 | 登録 |
| 長いアニメーション フレーム API でスタイルとレイアウトの期間を分離する |
layoutDuration、forcedStyleDuration、layoutDuration、forcedLayoutDurationの各プロパティを追加して、CSS のパフォーマンス分析を深めます。 |
登録 |
| 宣言型 CSS モジュール スクリプト | インライン スタイル モジュールを使用して、宣言型のスタイル シートを、宣言型のシャドウ ルートを含むシャドウ ルートと共有します。 | 登録 |
| オートフィル イベント | カスタム UI と検証を適応するために、ブラウザーのオートフィルがフォーム コントロールを更新するタイミングを検出します。 | 登録 |
注:
このページの一部は、Chromium.org によって作成および共有された作業に基づく変更であり、クリエイティブ・コモンズ帰属4.0国際ライセンスに記載されている条件に従って使用されます。