Microsoft Edge 150 網頁平台發布說明 2026 年 7 月 ()

以下是 Microsoft Edge 150 中將於 2026 年 7 月 2 日發布的新網頁平台功能與更新。

想隨時掌握最新網頁平台功能，請下載Microsoft Edge (Beta、Dev 或 Canary) 的預覽頻道;前往 成為 Microsoft Edge 內部人士。

詳細內容：

Microsoft Edge DevTools

看看 Microsoft Edge DevTools 有哪些新功能。

WebView2

請參閱 WebView2 SDK 的發布說明。

CSS 功能

以下新的層疊樣式表 (CSS) 功能已包含於 Microsoft Edge 中。

AccentColor 以及 AccentColorText 系統顏色

AccentColor AccentColorText系統顏色現在可以用來作為 CSS 色彩值，以存取使用者裝置上指定的系統重音色。

另請參閱:

允許可選的四捨五入參數 polygon()

允許在 CSS shape 函式中polygon()加入可選round參數。 你可以為圓形多邊形角設定長度值，而不必手動計算貝茲曲線。

例如，要建立一個圓角三角形： polygon(round 50px, 50% 0%, 0% 100%, 100% 100%)

另請參閱:

可變焦

CSS zoom 屬性可以被動畫化，並以 <number>. 你可以透過轉換和動畫縮放，讓元素及其佈局變得平滑，這與現有的變換縮放方式相輔相成。

另請參閱:

CSS URL 請求修飾符

以下 CSS 函式可與 CSS url() 函式搭配使用，以控制所參考資源的擷取行為：

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

例如， background-image: url("image.png" cross-origin(anonymous)) 透過 CORS 匿名模式擷取影像。

這讓你能細緻控制交叉來源存取、子資源完整性，以及針對 CSS 載入資源的引用政策，包括：

  • 影像。
  • 字體。
  • SVG 參考。
  • 匯入樣式表。

另請參閱:

CSS text-fit 性質

CSS text-fit 特性會將文字節點的字型大小縮放到完美符合其包含方框的寬度。

此特性讓您能確保標題或動態內容填滿可用橫向空間，無需手動計算字體大小或複雜的 JavaScript 變通方法。

此特性提供一個穩健且原生的 CSS 回應式排版解決方案，能在不同螢幕尺寸與不同文字長度下維持視覺對齊。

另請參閱:

CSS background-clip: border-area

CSS background-clip: border-area 屬性會將元素的背景剪裁到其邊框筆觸所繪製的區域， border-width 考慮 和 border-style ，同時忽略來自 border-color的透明度。

這使得梯度邊界不需 border-image。

另請參閱:

CSS image(<color>) 函式

CSS image() 功能讓你能輕鬆從任何顏色生成純色圖片。

例如，要建立實心紅色背景圖片，請使用 background: image(red);。

另請參閱:

帶有影像值的 CSS light-dark()

CSS light-dark() 函數現在接受影像值 (url()、、 image-set()) none 。

這使得使用者能根據偏好的配色方案自動切換圖片。

你可以使用帶有以下屬性的影像值函 light-dark() 數：

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

另請參閱:

逗號分隔容器查詢

此 @container 規則現在支援多個容器查詢，並以逗號分隔。 只要至少有一項查詢相符，規則即 @container 適用。

這使得對於並非所有瀏覽器都支援的功能，可以有備援查詢。

例如:

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

另請參閱:

透過 CSS 顯示無法列印的區域

使用 CSS page-margin-safety 屬性避免列印到紙張上無法列印的區域。

印表機在紙張的四個邊緣各有一小塊區域，無法可靠地標記，通常是因為印表機的紙張處理機制所致。

預設的頁面邊距預期會比這些紙張邊緣區域大，但如果你在應用程式中設定邊距，並想 (新增 @page 邊界框，例如自訂標題和頁腳) ，這個 page-margin-safety 屬性提供了一種偵測安全列印位置的方法。

另請參閱:

媒體元素偽類

以下 CSS 偽類別根據其狀態與元素相匹配<audio><video>：

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

另請參閱:

named-feature() CSS 函式 @supports

此 named-feature() 函式允許 CSS @supports 規則查詢一小組特定命名特徵，這些特徵無法用其他 @supports 機制測試，但對測試具有價值。

另請參閱:

overscroll-behavior: chain

overscroll-behavior CSS 屬性現在支持該chain值。

此特性影響兩個獨立效應：

  • 卷軸傳播。
  • 局部邊界效果 (像是過度捲動拉伸) 。

之前， overscroll-behavior 有三個數值：

  • none：沒有傳播，沒有局部效應。
  • auto：傳播與局部效應。
  • contain：無傳播，局部效應。

此功能為整套遊戲增添了新價值：

  • chain：傳播，無局部效應。

另請參閱:

flex-wrap:balance

flex-wrap:balance 允許你在每個 flex-line之間分配內容，讓版面看起來更平衡。

這與 text-wrap:balance類似。

另請參閱:

HTML 功能

以下新增的 HTML 功能已包含在 Microsoft Edge 中。

focusgroup 屬性

HTML focusgroup 屬性標準化了複合元件（如工具列、分頁、選單和無線電群組）的鍵盤導航。

該 focusgroup 屬性自動處理以下事項，無需自訂 JavaScript 程式碼：

  • 流動tabindex行為。
  • 透過方向鍵進行導航。
  • 專注記憶;重新進入焦點小組時，恢復最後聚焦的元素。

例如:

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

另請參閱:

popover="hint" 屬性行為變更

帶有屬性 popover="hint" 的元素行為已改變，以改善與元素的 popover="auto" 互動：開啟元素 popover="hint" 不再會無意中關閉無關 popover="auto" 元素。

過去，這兩種彈出元素之間的互動在某些情況下可能相當複雜，例如將 popover="auto" 元素嵌套在元素中 popover="hint" 。

popover="hint" 元素現在只有在其祖先 popover="auto" 元素被隱藏，或開啟新的無關 popover="auto" 元素時才會被隱藏。

此外，你現在可以安全地將元素嵌套 popover="auto" 在元素 popover="hint" 中。 巢 popover="auto" 狀元素會以元素的形式運作 popover="hint" 。 這允許在元素popover="hint"中放置可<select>自訂元素等使用情境。

另請參閱:

在可自訂的環境中更新所有 <selectedcontent> 元素 <select>

當可自訂<select>元素定義多個<selectedcontent>元素時，所有元素都會依目前選擇的選項保持最新，而不再只是 DOM 順序中的第一個。

另請參閱:

串流非順序 HTML

使用 <template for> HTML 元素和 <?start> 處理 <?end> 指令範圍來更新文件中既有部分，無需使用 JavaScript。

此功能是更大計畫的一部分，旨在加入對網頁上相同文件更新的內建支援。

另請參閱:

Web API

以下 Microsoft Edge 包含了新的 Web API 功能。

請在交叉來源的 iframe 和插件中關閉 SVG 濾鏡

SVG 濾波器不再適用於以下項目：

  • 交叉來源或受限 iframe (如沙盒 iframes) 。
  • 嵌入式外掛 (如 PDF) 。

這可防止跨來源內容透過 SVG 濾鏡效果處理時產生潛在的安全問題。

另請參閱:

MediaStreamTrackProcessor 幀計數器

discardedFrames和totalFrames屬性現在已經在MediaStreamTrackProcessor介面上可用了。

這些計數器讓你能透過追蹤以下方式監控媒體處理流程的健康狀況：

  • 收到的幀數。
  • 因系統資源限制而被丟棄的幀數。

另請參閱:

URL 的 data: 不透明來源

由 data: 網址建立的專用工作者和共享工作者現在會被分配一個獨特的不透明來源，而不是繼承創作者的來源。

這使得 Edge 與 HTML Standard 保持一致，並透過將這些工作者與同源狀態（如 BroadcastChannel、 localStorage、 IndexedDB和 ）隔離來提升安全性。

為了保持隔離邊界，這些工作者會與其創建者 (在同一儲存分區，例如透過頂層網站或一次性) 。

另請參閱:

PWA 起源遷移

網頁應用程式起源遷移使 PWA) (漸進式網頁應用程式能夠遷移到新的來源，同時保留信任、安裝狀態及適用權限。

這幫助團隊安全地跨域移動應用程式，而不必強迫使用者重新安裝。

另請參閱:

當所有scrollByscrollTo方法完成時，會收到通知

程式化捲動方法，如 scrollBy 和 scrollTo，現在回傳 Promise 一個物件，當捲動完成時會被解析。 利用此承諾在平滑捲動結束後執行程式碼，無需依賴計時器或捲動事件輪詢。

另請參閱:

網頁語音 API：裝置辨識品質

SpeechRecognition介面現在支援了這個quality屬性。

這個 quality 屬性允許你指定使用裝置識別所需的語意能力，也 processLocally: true就是裝置 上識別。

屬性所支援 quality 的值對應到任務複雜度增加及硬體需求的增加：

  • command
  • dictation
  • conversation

利用這個 quality 特性，你可以判斷裝置是否能透過裝置上辨識來處理你的使用情境，或是應該退回雲端辨識服務。

另請參閱:

WebGPU：即時

WebGPU 現在支援即時運算。

此功能在 immediate WGSL 中新增位址空間，並 setImmediateData() 針對渲染通行、計算通行與渲染束編碼器進行方法。 你可以利用這些 API 將小型且頻繁更新的值傳給著色器，而不必建立 GPU 緩衝區或綁定群組。

這對於每次繪製的資料非常有用，例如物件索引、材質索引和轉換值。

另請參閱:

起源試驗

以下是 Microsoft Edge 中可用的新實驗性 API 的原始試驗。

Origin 試用讓你在自己上線的網站上有限時間試用實驗性 API。 欲了解更多關於起源試用的資訊，請參閱「在 Microsoft Edge 中使用起源試用」。

欲了解完整的可用起源試用清單，請參見 Microsoft Edge 起源試用。

名稱 描述 登錄
提示詞 API 提示您網站內建語言模型或擴充功能的 JavaScript 程式碼。 另見 提示 API。 登錄
WebAssembly 自訂描述符 能更有效率地將與來源層級類型相關的資料儲存在自訂描述符物件中。 登錄
軟導航啟發式 揭露單頁應用程式中收集效能指標的軟導覽啟發式方法。 登錄
WebNN 直接在您的網頁應用程式中建構並執行硬體加速的機器學習模型。 登錄
CSP 腳本中的 URL 與評估雜湊值 引入 URL 與 eval- 雜湊值用於 script-src CSP 指令，取代基於主機名稱的允許清單與 unsafe-eval。 登錄
網頁安裝 API 允許網站透過使用 navigator.install()。 登錄
OpaqueRange 能在文字內 <input> 建立即時範圍，並 <textarea> 隨著使用者編輯自動更新元素。 這些範圍支援幾何方法， getBoundingClientRect() 例如 CSS 自訂高亮 API，該 API 允許使用場景，例如插入點位置的彈出視窗及內嵌拼字檢查高亮，直接在表單控制項上高亮，無需複製元素或暴露內部 DOM 結構。 登錄
畫布中的 HTML 啟用 Canvas 中以新的繪圖方法和 paint 事件來渲染 HTML。 登錄
數位憑證 API - 發行支援 觸發憑證發行伺服器向數位錢包應用程式發出使用者憑證。 登錄
prerender_until_script 投機規則 API 動作 一個 Speculation Rules API 動作，會預先渲染頁面，但當腳本執行時會切換成預取。 登錄
WebAudio 可配置渲染量子 讓你在建立或AudioContextOfflineAudioContext 登錄
透過表單提交進行預渲染啟動 允許在 Speculation Rules API 中透過表單提交啟動預渲染規則。 登錄
CPU 效能 API 揭露使用者裝置能力的資訊，供 Compute Pressure API 使用。 登錄
連線允許清單 限制文件或工作者與伺服器分散端點允許清單的連線。 登錄
focus-without-user-activation 權限政策 透過權限政策，嵌入者對嵌入內容 focus-without-user-activation 的程式焦點進行控制。 當該政策在某一幀被拒絕時，程式化的焦點呼叫 (element.focus()、 autofocus、 window.focus()、 dialog.showModal()及彈出焦點焦點) 會被阻擋，除非由使用者啟動或被委派。 登錄
增強版畫布文字度量 擴充了 TextMetrics Canvas API，加入選取矩形、邊界框查詢及字形叢集操作。 登錄
<usermedia> HTML 元素 一個由瀏覽器控制的 HTML 元素，用於請求攝影機或麥克風存取，取代基於 JavaScript 的權限請求。 登錄
預渲染跨來源 iframe 透過選擇加入的回應標頭預先渲染跨來源 iframe，而不是延遲到頁面啟用。 登錄
貨櫃時序 當標註的 DOM 容器顯示並完成初始塗裝時，會監控。 登錄
長動畫幀 API 中分開樣式與版面長度 新增 styleDuration、 forcedStyleDuration、 layoutDuration及 forcedLayoutDuration 屬性，以進行更深入的 CSS 效能分析。 登錄
提示 API 取樣參數 topK和 temperature 取樣參數讓你能優化每個語言模型會話的行為。 登錄
<install> HTML 元素 使用 <install> 該元素宣告式安裝其他網站作為網頁應用程式。 登錄
宣告式 CSS 模組腳本 與陰影根共享宣告式樣式表，包括宣告式陰影根，使用內嵌樣式模組。 登錄
Gamepad 原始輸入事件 網頁不再依賴頻繁的投票 navigator.getGamepads()，而是可以收聽 gamepadrawinputchanged 活動。 每當偵測到同一裝置輸入幀間的變化時，這些事件就會觸發。 登錄
自動填充事件 偵測瀏覽器自動填充何時更新表單控制項，以適應自訂介面與驗證。 登錄
WebAssembly 自訂描述符 V2 能更有效率地將與來源層級類型相關的資料儲存在自訂描述符物件中。 登錄
WebMCP 讓你的網站能註冊工具，讓瀏覽器內的代理代表使用者完成任務。 登錄

注意事項

本頁部分內容基於 Chromium.org 創作與分享的作品，並依據創用CC 姓名標示 4.0 國際授權條款進行修改。

  • Last updated on