以下是 Microsoft Edge 138 中新增的網頁平台功能與更新,該版本將於 2025 年 6 月 26 日發布。
想隨時掌握最新網頁平台功能,請下載Microsoft Edge (Beta、Dev 或 Canary) 的預覽頻道;前往 成為 Microsoft Edge 內部人士。
詳細內容:
- Edge 開發工具
- WebView2
-
網頁平台功能
- CSS 功能
-
Web API
- 提示與寫作協助 API 開發者預覽
-
新建
prefetchCache與prerenderCache標頭值Clear-Site-Data - WebCodecs 中的影片畫面方向元資料
-
Crash Reporting API 報告中的新增
is_top_level欄位visibility_state - 禁止在 HTTP 上預渲染純文字
-
序列化時的 Escape
<和>HTML 屬性 -
Integrity-Policy腳本子資源完整性標頭 - 可預測的報告儲存配額
-
pushsubscriptionchange重新訂閱後的活動 -
推測規則:
target_hint場 - Viewport Segments Enumeration API
- 網頁應用範圍擴充
- 已移除的功能
- 起源試驗
Edge 開發工具
看看 DevTools (Microsoft Edge 138 的最新動態) 。
WebView2
請參閱 WebView2 SDK 的 1.0.3296.44 (2025 年 6 月 3 日) 版本。
網頁平台功能
CSS 功能
CSS stretch sizing 關鍵字
stretch關鍵字,用於 CSS 大小特性,如 width 和 height,允許元素成長,精確填滿其包含區塊的可用空間。
stretch sizing 關鍵字與值 100%相似,不同的是所得大小會套用到元素的邊界框上,而不是套用在以 box-sizing表示的框上。
關鍵字 stretch 允許元素保留邊距,同時保持最大容量。 這是 的 -webkit-fill-available無前綴版本。
另請參閱:
- 高度延伸,位於MDN。
CSS abs() 與 sign() 函式
函 abs(A) 數回傳 A 的絕對值,與輸入類型相同:
- 若 A 的數值為正或 0⁺,則
abs(A)輸出 A。 - 否則輸出
abs(A)為 -1 * A。
函 sign(A) 數回傳:
- 若 A 的數值為負,則為 -1。
- 若 A 的數值為正,則為 +1。
- 若 A 的數值為 0⁺,則為 0⁺。
- 若 A 的數值為 0⁻,則為 0⁻。
回傳的 CSS 型別為 <number>,與輸入計算的型別保持一致。
另請參閱:
用於作業系統層級字型縮放的 CSS 環境變數
preferred-text-scale CSS 環境變數會將使用者偏好的字型縮放暴露給 CSS。
過去,頁面無法透過作業系統偏好設定偵測使用者是否更改了偏好字型大小。
另請參閱:
- MDN 的環境 () 。
CSS sibling-index() 與 sibling-count() 函式
sibling-index() 並且 sibling-count() 可以作為整數在 CSS 屬性值中使用,根據元素在兄弟元素中的位置,或根據兄弟元素的總數來樣式化。 這些函式可用於 calc() 表達式,或直接作為整數值使用。
例如,你可以在 sibling-index() 表達式中使用 calc() 函式,根據清單項目在兄弟項目中的位置設定左邊距:
li {
margin-inline-start: calc(1rem * sibling-index());
}
另請參閱:
-
樹數函數:
sibling-count()CSSsibling-index()價值與單位模組第 5 級規範中的符號。
插值進展:CSS progress() 功能
progress() CSS 的數學函式回傳 a<number>,代表一個值在進度開始值與進度結束值之間的位置。
progress() 在流體排版等情況下非常有用。
另請參閱:
- 插值進度計算:
progress()CSS 價值與單位模組第 5 級規範中的符號。 -
[css-values] 在 CSS 工作小組 GitHub 倉庫中,提出一個「進度」函數,用以計算兩個
<length>值之間的進度 。
Web API
提示與寫作協助 API 開發者預覽
提示 API 與寫作協助 API 現已在 Edge Canary 與開發者頻道提供開發者預覽版。
這些 API 讓你能存取內建於 Edge 瀏覽器中的強大小型語言模型 Phi-4-mini。
利用這些 API 嘗試提示工程、摘要與修改內容,或產生文字。
另請參閱:
新建prefetchCache與prerenderCache標頭值Clear-Site-Data
Clear-Site-Data HTTP 標頭現在支援新 prefetchCache 和 prerenderCache 值。
過去,清除預取與預渲染快取的唯一方法是使用 cache HTTP 標頭的 Clear-Site-Data 值。 隨著 Speculation Rules API 的普及,開發者需要一種方法來明確清除預取快取或預渲染快取,或兩者兼具,且不干擾其他會話資訊,如歷史紀錄或 Cookie。
另請參閱:
- MDN 的 Speculation Rules API。
WebCodecs 中的影片畫面方向元資料
WebCodecs 中各種與影片相關的介面現在有rotationflip以下數值:
- 介面
VideoFrame現在可以建立具有任意rotation值的flip物件實例。 -
VideoDecoderConfig物件現在有rotation和flip欄位會自動在解碼物件VideoFrame上發射。 -
VideoEncoder這個類別現在有機制可以傳遞fliprotation並傳遞作為VideoDecoderConfig的一部分EncodedVideoChunkMetadata的資訊encode()。
過去,開發者無法知道何時收到非預設方向的影片畫面。
另請參閱:
- MDN 的 WebCodecs API。
Crash Reporting API 報告中的新增is_top_level欄位visibility_state
當機報告 API 傳送到預設端點的當機報告現在有 is_top_level 和 visibility_state 字串欄位。
is_top_level和 visibility_state 欄位是關於崩潰報告中崩潰幀的上下文資訊。
另請參閱:
禁止在 HTTP 上預渲染純文字
為了讓預渲染和預取相一致,現在純文字預渲染只能在 HTTPS 上使用。
過去,允許在 HTTP 和 HTTPS 連線上進行純文字預渲染。
另請參閱:
- 預渲染重整版中的導航取物變更。
序列化時的 Escape < 和 > HTML 屬性
< HTML 元素屬性值中的 and > 字元在序列化 HTML 時會被跳脫。 這降低了突變 XSS 攻擊的風險,當屬性值經過序列化與重新解析後,被解讀為起始標籤標記時所發生。
Integrity-Policy 腳本子資源完整性標頭
新的 Integrity-Policy 標頭讓你能夠斷言每個特定類型的資源都需要進行完整性檢查。 若嘗試載入未包含完整性元資料的指定類型資源,該嘗試將失敗,並產生違規報告。
另請參閱:
- MDN 的子資源完整性。
可預測的報告儲存配額
StorageManager estimate() 的方法對沒有無限儲存權限的網站報告的儲存配額,現在在所有瀏覽模式中都是相同的。
這緩解了過去可透過報告儲存配額偵測使用者瀏覽模式的問題,因為 InPrivate 模式下可用的儲存空間明顯小於一般模式。
報告的配額現在等於目前的儲存使用量加上介於 10 GiB 與裝置磁碟大小之間的最小值,向上取整至所有瀏覽模式下最接近的 1 GiB,適用於儲存權限有限的網站。
擁有無限儲存權限的網站則不受影響。
另請參閱:
- MDN 的 StorageManager。
- MDN 的儲存配額與驅逐標準。
pushsubscriptionchange 重新訂閱後的活動
pushsubscriptionchange當一個來源因權限變更 (granted 從 to 或 default) deny 被撤銷後,原始來源重新獲得通知權限時,該事件會被服務工作者觸發。
事件以空 oldSubscription 和 newSubscription觸發。
另請參閱:
推測規則: target_hint 場
推測規則的語法已擴展,讓你能指定欄位。target_hint 該 target_hint 欄位提供提示,讓瀏覽器知道預渲染目標將顯示在哪裡,例如新分頁或視窗中。
例如,當 _blank 以提示形式指定時,預先渲染的頁面可以在由 開啟 window.open()的視窗中渲染。
target_hint 目前支援 _self AND _blank 弦樂。 若未指定提示,則視為 _self。
該 target_hint 場不會影響預取投機規則。
另請參閱:
- MDN 的 Speculation Rules API。
Viewport Segments Enumeration API
Viewport Segments 枚舉 API 允許您調整網站版面以針對摺疊裝置。
視窗段定義了視窗中邏輯上獨立區域的位置與尺寸。 當視窗被一個或多個硬體功能分割時,就會產生一個視窗段 (例如摺疊或鉸鏈,連接不同顯示器) 作為分隔線。
區段是視窗中可視為邏輯上不同的區域。
另請參閱:
網頁應用範圍擴充
新的 "scope_extensions" 網頁應用程式清單欄位讓網頁應用程式能將其範圍擴展到其他來源。
範例用法:
{
"name": "Example",
"display": "standalone",
"start_url": "/index.html",
"scope_extensions": [
{"type" : "origin", "origin" : "https://example.com"}
]
}
此 scope_extensions 欄位允許控制多個子網域與頂層網域的網站以單一網頁應用程式呈現。
該 scope_extensions 欄位要求列出的來源透過設定 .well-known/web-app-origin-association 檔確認與網頁應用程式的關聯:
{
"https://sample-app.com/": {
"scope": "/"
}
}
另請參閱:
- 透過處理 PWA 連結的範圍擴展來處理來自其他來源的連結。
已移除的功能
媒體來源擴充的非同步範圍移除現在會拋出例外
媒體來源擴充規範已進行以下變更,以禁止涉及非同步範圍移除的模糊定義行為:
-
SourceBuffer.abort()不再中SourceBuffer.remove()止作業。 - 設定
MediaSource.duration功能無法再截斷目前緩衝的媒體。
雖然這些變更早在很久以前就已經實施,Safari 和 Firefox 也已經實施,但 Chromium 當時還沒有。 這兩種情況現在都會有例外。
另請參閱:
- MDN 的媒體來源 API。
移除自動的 SwiftShader 備援
過去若無法用現有 GPU 建立 WebGL 情境,Chromium 會自動退回使用 SwiftShader 軟體渲染器。 這種自動回退行為現在被移除,WebGL 上下文建立將失敗,而非退回到 SwiftShader。
SwiftShader 存在安全風險,且在從高效能 GPU 支援的 WebGL 回退到 CPU 支援的實作時,會導致使用者體驗不佳。
SwiftShader 仍然是在網站上進行無頭測試的有用工具。 這個使用情境仍可透過選擇加入來支援,你可以透過命令列參數執行 Microsoft Edge --enable-unsafe-swiftshader 來達成。
另請參閱:
起源試驗
以下是你可以在自己網站上有限時間試用的新實驗性 API。
欲了解更多關於起源試驗的資訊,請參閱 「使用起源試驗測試實驗 API 與功能」。
欲了解完整的可用起源試用清單,請參見 Microsoft Edge 起源試用。
Microsoft Edge專屬起源試用
網頁應用程式存取 LocalFolder
截止日期為2025年7月31日
允許從 Microsoft Store 安裝的 PWA 存取先前由同一應用程式早期 UWP 版本儲存在 WinRT ApplicationData.LocalFolder 資料夾中的檔案內容。
網頁應用範圍擴充
截止日期為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": "/"
}
}
採購資訊 API
將於 2025 年 6 月 30 日到期。
Acquisition Info API 支援透過應用商店或直接從瀏覽器取得的 PWA 進行 3P 採購歸屬。
微軟高對比度棄用
截止日期為 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 建立更無障礙的網路」。
注意事項
本頁部分內容基於 Chromium.org 創作與分享的作品,並依據創用CC 姓名標示 4.0 國際授權條款進行修改。