發布日期:2025 年 2 月 13 日
在 Interop 2024 大獲成功後,這個專案今天再度推出,並針對 2025 年提供新的重點領域。雖然我們無法納入今年收到的所有建議,但最終清單涵蓋了 CSS 到效能相關功能等各個網頁平台。
2025 年重點領域
- 錨定位置
backdrop-filter
- Core Web Vitals
<details>
元素- 版面配置
- 模組
- Navigation API
- 指標和滑鼠事件
- 移除變異事件
@scope
scrollend
個事件- 儲存空間存取權 API
text-decoration
URLPattern
- 查看 Transition API
- WebAssembly
- 網路相容性
- WebRTC
- 書寫模式
此外,與往年一樣,我們也設有一系列調查領域。這些是我們沒有足夠資訊或測試資料,無法納入重點領域的領域,但這個團隊認為,我們應該要進行一些工作,讓這些領域達到可納入重點領域的階段。
- 無障礙設定測試
- 遊戲手把 API 測試
- 行動測試
- 隱私權測試
- WebVTT
我們很高興能為平台推出這些功能和今年的改善項目。與去年一樣,這個專案會提供一整套新版基準資訊。這篇文章將分享清單中部分功能的詳細資訊,並提供相關資訊的連結,方便您進一步瞭解。
您可以前往 wpt.fyi/interop-2025 的 Interop 2025 資訊主頁查看最新消息,當資訊主頁顯示「Baseline」時,就表示相關功能已可供開發人員使用,並會列在 webstatus.dev 的 Baseline 2025 清單中。

CSS 和 UI
Interop 2025 中包含的部分功能,是您在 2024 年 CSS 現況調查中標示為重要的功能。這些功能可協助您打造更美觀且效能更佳的使用者體驗。
錨定位置
這項功能可讓您將定位元素固定在錨點,特別適合用於顯示彈出式視窗。
將這項功能納入 Baseline 後,您就能更輕鬆地建立使用者介面,而無須仰賴第三方程式庫。如需進一步瞭解,請參閱錨點定位說明文件,以及 MDN 的 CSS 錨點定位。
同一文件的檢視畫面轉場效果
今年也納入了檢視畫面轉場效果,尤其是同一份文件的檢視畫面轉場效果,以及 view-transition-class
CSS 屬性。
如要進一步瞭解檢視畫面轉場效果,請參閱「單頁應用程式的同一個文件檢視畫面轉場效果」和「檢視畫面轉場效果的 MDN 說明文件」。
backdrop-filter
屬性
backdrop-filter
屬性自 2024 年 9 月起成為基準新功能。可讓您在內容後方建立效果。例如,您可能會預期只有在圖像應用程式中才會出現的模糊或創建效果。
雖然大部分的實作方式都具有互通性,但您可以從backdrop-filter
的失敗測試中發現,這些實作方式中存在錯誤和問題。雖然這些問題可能不是每個人都會遇到,但我們知道許多人確實遇到了這些問題,因此希望能讓這項功能正常運作。
<details>
元素
<details>
元素是揭露小工具,可展開顯示額外內容。<details>
元素本身是基準廣泛可用。不過,我們最近新增了許多相關功能,讓 <details>
更實用。
::marker
和::details-content
CSS 擬元素。- 使用
content-visibility
切換內容,而非display
。 - 自動展開
<details>
元素,並與頁面中找到的內容比對。 hidden="until-found"
屬性會隱藏元素,直到使用瀏覽器的「在頁面中搜尋」功能找到該元素,或直接透過網址片段前往該元素為止。
CSS @scope
at-rule
@scope
at-rule 可讓您將選取器的範圍限制在 DOM 的子樹狀結構,甚至可在樹狀結構的上限和下限之間進行選取。舉例來說,下列 CSS 只會選取 .card
類別元素內的 <img>
元素。
@scope (.card) {
img {
border-color: green;
}
}
在下一個範例中,我們會使用上限和下限。只有在 <img>
元素位於 .card
類別元素之間,且位於 .card__content
類別元素之外時,系統才會選取該元素。
@scope (.card) to (.card__content) {
img {
border-color: green;
}
}
如要進一步瞭解如何使用 @scope
,請參閱「使用 CSS @scope
at-rule 限制選取器的觸及範圍」和 @scope
的 MDN 說明文件。
scrollend
事件
如果沒有 scrollend
事件,就無法可靠地偵測捲動動作是否完成。您可以使用 setTimeout()
檢查捲動是否已暫停一段時間。這會更像是捲動已暫停事件,而非捲動已結束事件。
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
有了 scrollend
事件,瀏覽器就能為您執行所有複雜的評估作業。
document.onscrollend = event => {
// ...
}
如需更多範例,請參閱 Scrollend,一種新的 JavaScript 事件,以及 scrollend
的 MDN 說明文件。
text-decoration
屬性
text-decoration
屬性是 text-decoration-line
、text-decoration-color
、text-decoration-style
和 text-decoration-thickness
的簡寫。這項屬性被視為「基準」(Baseline),但在 Safari 中,唯一可用的無前置字首縮寫屬性是 text-decoration-line
。我們會在 2025 年解決這個問題。
書寫模式
CSS writing-mode
屬性有許多可能的值,其中許多值的設計目的是用於版面配置以垂直方式顯示的腳本。不過,有時您可能會希望以垂直方式排版文字,以便配合設計,而非為了支援某種語言。sideways-lr
和 sideways-rl
值就是為了這項需求而設計,但瀏覽器相容性不佳。這個問題預計會在 2025 年修正。
此外,還包含邏輯 CSS 屬性 overflow-inline
和 overflow-block
。無論使用哪種書寫模式,這些方法都能控制內容溢出框時的處理方式。
Core Web Vitals
網站使用體驗指標可協助您量化網站使用體驗,並找出改善之道。網站體驗核心指標計畫旨在簡化現況,並協助網站專注於最重要的指標,也就是網站體驗核心指標。
Interop 2025 包含最大內容繪製 (LCP) 和Interaction to Next Paint (INP) 指標,透過在各瀏覽器中實作 LargestContentfulPaint API 和 Event Timing API。累計版面配置位移 (CLS) 指標不在範圍內。
LCP API
事件時間 API (適用於 INP)
WebAssembly (Wasm)
WebAssembly API 可讓您載入 WebAssembly 程式碼,也就是可移植的二進位指令格式。您可以在瀏覽器中執行整個網誌應用程式,包括所有伺服器需求!
今年的工作將著重於下列功能:
- JavaScript 字串內建:讓 WebAssembly 內建字串函式鏡像 JavaScript 字串 API 的子集,以便在沒有 JavaScript 黏合劑程式碼的情況下進行呼叫。
- 可調整大小的緩衝區整合:將 WebAssembly 整合至使用可調整大小的緩衝區的 JavaScript 程式碼。
移除功能
今年的專案包括從平台移除。Mutation 事件已淘汰,並由效能更佳且可廣泛使用的 Mutation Observer API 取代。Chrome 在 Chrome 126 中移除了這些事件,而這個重點領域則是將這些事件從所有瀏覽器中移除。
如要瞭解歷史記錄以及為何移除這些事件,請參閱「Chrome 將移除突變事件」一文。
瞭解詳情
如需完整功能清單的說明,請參閱專案的 README 檔案。另外,請參閱其他公司在 Interop 2025 計畫中發布的貼文。