共用方式為

Microsoft Edge 140 網頁平台發布說明 2025 年 9 月 ()

以下是 Microsoft Edge 140 中新增的網頁平台功能與更新，該版本將於 2025 年 9 月 4 日發布。

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

詳細內容：

Edge 開發工具

看看 DevTools (Microsoft Edge 140) 的最新內容。

WebView2

請參閱 WebView2 SDK 發布說明中 2025 年 9 月 8 (1.0.3485.44) 。

網頁平台功能

CSS 功能

CSS caret-animation 性質

Microsoft Edge 支援動畫化 caret-color CSS 屬性。 然而，當播放時，搖桿預設的閃爍行為會干擾動畫。

caret-animation該物業現支持兩個價值：

  • auto預設的瀏覽器閃爍行為會發生。
  • manual你控制 Caret 動畫。

另請參閱:

counter()以及 counters() CSS 屬性的替代文本content

counter()和 counters() CSS 函式現在可以在 CSS 屬性的content替代文字部分中使用。

例如：

::before {
  content: url("images/chapter-separator.png") / "Chapter" counter(chapter);
}

另請參閱:

CSS scroll-target-group 性質

scroll-target-group: auto CSS 屬性指定該元素為滾動標記群組容器。

瀏覽器會追蹤滾動標記群組容器中的當前滾動標記，並允許你透過:target-current偽類別來樣式化<a>元素。

例如，以下片段展示了如何自動在目錄中標示目前可見的章節：

<style>
  ol {
    right: 10px;
    top: 10px;
    position: fixed;
    scroll-target-group: auto;
  }

  a:target-current {
    color: red;
  }

  .chapter {
    height: 60vh;
    margin: 10px;
  }
</style>
<ol>
  <li><a href="#intro">Introduction</a></li>
  <li><a href="#ch1">Chapter 1</a></li>
  <li><a href="#ch2">Chapter 2</a></li>
</ol>
<div id="intro" class="chapter">Introduction content</div>
<div id="ch1" class="chapter">Chapter 1 content</div>
<div id="ch2" class="chapter">Chapter 2 content</div>

另請參閱:

CSS 型別運算

CSS 中的打字運算允許你寫出像 或 calc(20% / 0.5em * 1px) 這樣的表達calc(10em / 1px)式，以取得無單位值。 無單位值對於排版等情況非常有用。

CSS 型別運算允許你將有單位的數值轉換成無單位值。 你可以在接受數字的 CSS 屬性中使用無單位值，或將無單位值乘以另一個單位值，例如將像素值轉換成度數值。

另請參閱:

檢視轉換 finished 承諾時序變更

過去，視圖轉換 finished 的承諾是在瀏覽器產生移除視圖轉換的視覺框架後才被解決。 如果 JavaScript 程式碼修改了樣式，這可能會導致視圖轉換結束時出現閃爍現象。

承諾的時機 finished 現已調整，以解決此問題。

另請參閱:

檢視轉換：繼承更多動畫屬性

以下 CSS 動畫特性現已由視圖轉換偽元素繼承：

  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-delay

另請參閱:

巢狀視圖轉換

巢狀視圖轉換允許視圖轉換產生巢狀偽元素樹，而非扁平的偽元素樹，這使得某些視圖轉換看起來更接近原始元素。

部分 CSS 功能依賴 DOM 樹中元素間的關係，例如：

  • 從 、 clip-path或 border-radius 屬性剪裁overflow。
  • 來自 transform、 transform-style或 perspective 屬性的三維效果。
  • 遮蔽與來自opacitymask-imagefilter屬性的效果。

這些效果的視覺輸出取決於 DOM 樹的結構，而視圖轉換使 DOM 樹變平，可能導致這些效果無法如預期運作。

另請參閱:

font-variation-settings 規則中的 @font-face 描述符

@font-face 規則現在支持該 font-variation-settings 物業。

這個 font-variation-settings 屬性允許你調整字體在單一元素上的粗細、寬度、傾斜度和其他軸線。 現在，這個 font-variation-settings 屬性也可以用於 @font-face 規則宣告中，有助於減少重複性，並讓字體風格的定義更容易。

另請參閱:

Web API

__Http- 以及 __HostHttp- cookie 名稱前綴

為了在伺服器端區分由伺服器與用戶端 __Http- 設定的 cookie，現在 cookies 中已提供 and __HostHttp- 名稱前綴。

這些前綴可以用來檢查 cookie 是否在用戶端被設定，例如用來驗證伺服器通常設定的 cookie 是否被用戶端意外設定。

另請參閱:

overscroll-behavior 從 <html> 視窗傳播到

之前， overscroll-behavior 是從頁面 <body> 的視窗傳播到的。 overscroll-behavior此屬性從根<html>元素傳播到視窗。

這使得 Microsoft Edge 與其他瀏覽器保持一致。

另請參閱:

min 選項為 ReadableStreamBYOBReader.read(view)

API 的 min 選項 ReadableStreamBYOBReader.read(view) 允許你要求串流等待至少有最少數量的元素可用後，才能解析讀取操作。

API ReadableStreamBYOBReader.read(view) 允許你提供一個緩衝區視圖，串流資料會被讀取到裡面。 此新 min 選項可避免以比檢視可容納的元素少於元件數量來解析串流的讀取操作，這對於效能敏感的應用非常有用，因為消費者通常需要最少元素數才能進行解碼、解析或其他處理邏輯。

另請參閱:

container 選項為 scrollIntoView()

預設情況下，這個 scrollIntoView() 函式會捲動同時也是捲軸容器元素的每個祖先。

這個 scrollIntoView() 功能現在支援一個 container 選項，可以用來只捲動最近的祖先。

例如：

slideList.addEventListener('click', event => {
  // scrollIntoView will automatically determine the position.
  event.target.targetSlide.scrollIntoView({container: 'nearest', behavior: 'smooth'});
});

另請參閱:

服務工作者靜態路由 API 時序

新的服務工作者靜態路由 API 時序資訊現已提供給導航與資源時序 API。 這些資訊讓你能衡量靜態路由 API 所產生的延遲，例如路由器評估時間、快取查找所需時間，或判斷匹配來源是否為最終使用的來源。

新的時間資訊提供了：

  • 匹配路由 (靜態路由 API 評估) 的路由。
  • 資源被取回的實際來源。
  • 與路線匹配所需的時間。

另請參閱:

SharedWorker 腳本繼承 Blob URL 的控制器

SharedWorker 實例現在繼承了 Blob URL 的控制器。 這使得 Microsoft Edge 與其他瀏覽器保持一致。

另請參閱:

Popover ToggleEvent source 屬性

source彈出實ToggleEvent例的屬性現在指的是觸發該 ToggleEvent的元素（若適用）。

例如，如果 <button> 使用者點擊帶有屬性的 popovertarget 元素，或 commandfor 設定為開啟彈出覆蓋的屬性，則 ToggleEvent 該元素的 source 屬性設定為呼叫按鈕。

另請參閱:

將 Uint8Array 從 base64 與十六進位格式轉換

Uint8Array 物件具備以下新的方法來從 Base64 與 Hex 資料格式轉換：

  • Uint8Array.fromBase64()
  • Uint8Array.fromHex()
  • Uint8Array.prototype.toBase64()
  • Uint8Array.prototype.toHex()
  • Uint8Array.prototype.setFromBase64()
  • Uint8Array.prototype.setFromHex()

另請參閱:

highlightsFromPoint API

API 讓你 highlightsFromPoint 能透過偵測文件中特定位置存在哪些重點，來互動自訂的重點。

此 highlightsFromPoint API 對於多個亮點可能重疊或存在於陰影 DOM 中的應用程式非常有用。 此 API 使得更有效地管理具有自訂高亮的動態互動成為可能，例如回應使用者點擊或在高亮區域上的懸停事件，觸發自訂工具提示、右鍵選單或其他互動功能。

另請參閱:

已移除的功能

移除部分 <h1> 元素內的特殊字型大小規則

過去，特殊的邊界與字型大小會套用<h1>在嵌套於 <article>、 <aside><nav>、 和 <section> 元素中的元素。

這些特殊規則現已移除，因為它們造成無障礙問題，例如巢狀 <h1> 元素 <h2> 的字體大小視覺化縮小，卻未反映無障礙樹的變化。

另請參閱:

起源試驗

以下是你可以在自己網站上有限時間試用的新實驗性 API。

欲了解更多關於起源試驗的資訊，請參閱 「使用起源試驗測試實驗 API 與功能」。

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

Microsoft Edge專屬起源試用

網頁應用範圍擴充

截止日期為2025年8月31日

scope_extensions 是新的網頁應用程式清單成員，使網頁應用程式能將其範圍擴展至其他來源。

範圍擴充允許依賴多個子網域和頂層網域的網頁應用程式呈現為單一網頁應用程式。

{
  "name": "Example app",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {
      "type": "type",
      "origin": "https://example.com"
    }
  ]
}

成員中列出 scope_extensions 的起源必須透過託管名為 .well-known/web-app-origin-association的設定檔來確認與網頁應用程式相關聯。 檔案必須列出網頁應用程式的來源：

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}
微軟高對比度棄用

截止日期為 2025 年 9 月 9 日。

微軟高對比度棄用起源試驗啟用了舊有 CSS -ms-high-contrast 媒體查詢與舊有 -ms-high-contrast-adjust 屬性。

請參見 -ms-high-contrast 與 -ms-high-contrast-adjust 的 Deprecating 支援。

AriaNotify API

截止日期為 2025 年 10 月 14 日。

AriaNotify API 讓你的應用程式能直接告訴螢幕閱讀器在網頁內容非使用者主動變更時該說什麼。 在最簡單的情況下，你會呼叫 ariaNotify("foo") 文件或元素。

請參閱「 用 Aria Notification 建立更無障礙的網路」。

採購資訊 API

截止日期為2025年12月18日。

Acquisition Info API 支援第三方對透過應用商店或直接從瀏覽器取得的 PWA 進行收購歸屬。

注意事項

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

  • Last updated on