Interop 2025:網頁平台又有新進展

發布日期: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 清單中。

專案開始時的分數:Interop:33、Investigations:0、Chrome Canary:91、Edge Dev:88、Firefox Nightly:52、Safari Technology Preview:55。
Interop 2025 資訊主頁 (截至 2025 年 2 月 13 日)。

CSS 和 UI

Interop 2025 中包含的部分功能,是您在 2024 年 CSS 現況調查中標示為重要的功能。這些功能可協助您打造更美觀且效能更佳的使用者體驗。

錨定位置

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

這項功能可讓您將定位元素固定在錨點,特別適合用於顯示彈出式視窗。

含有位置元素的錨點。

將這項功能納入 Baseline 後,您就能更輕鬆地建立使用者介面,而無須仰賴第三方程式庫。如需進一步瞭解,請參閱錨點定位說明文件,以及 MDN 的 CSS 錨點定位

同一文件的檢視畫面轉場效果

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

今年也納入了檢視畫面轉場效果,尤其是同一份文件的檢視畫面轉場效果,以及 view-transition-class CSS 屬性。

如要進一步瞭解檢視畫面轉場效果,請參閱「單頁應用程式的同一個文件檢視畫面轉場效果」和「檢視畫面轉場效果的 MDN 說明文件」。

backdrop-filter 屬性

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

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

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

@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 事件

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

如果沒有 scrollend 事件,就無法可靠地偵測捲動動作是否完成。您可以使用 setTimeout() 檢查捲動是否已暫停一段時間。這會更像是捲動已暫停事件,而非捲動已結束事件。

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

有了 scrollend 事件,瀏覽器就能為您執行所有複雜的評估作業。

document.onscrollend = event => {
  // ...
}

如需更多範例,請參閱 Scrollend,一種新的 JavaScript 事件,以及 scrollend 的 MDN 說明文件

text-decoration 屬性

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

text-decoration 屬性是 text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thickness 的簡寫。這項屬性被視為「基準」(Baseline),但在 Safari 中,唯一可用的無前置字首縮寫屬性是 text-decoration-line。我們會在 2025 年解決這個問題。

書寫模式

CSS writing-mode 屬性有許多可能的值,其中許多值的設計目的是用於版面配置以垂直方式顯示的腳本。不過,有時您可能會希望以垂直方式排版文字,以便配合設計,而非為了支援某種語言。sideways-lrsideways-rl 值就是為了這項需求而設計,但瀏覽器相容性不佳。這個問題預計會在 2025 年修正。

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

此外,還包含邏輯 CSS 屬性 overflow-inlineoverflow-block。無論使用哪種書寫模式,這些方法都能控制內容溢出框時的處理方式。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

Core Web Vitals

網站使用體驗指標可協助您量化網站使用體驗,並找出改善之道。網站體驗核心指標計畫旨在簡化現況,並協助網站專注於最重要的指標,也就是網站體驗核心指標。

Interop 2025 包含最大內容繪製 (LCP)Interaction to Next Paint (INP) 指標,透過在各瀏覽器中實作 LargestContentfulPaint APIEvent Timing API。累計版面配置位移 (CLS) 指標不在範圍內。

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

事件時間 API (適用於 INP)

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: not supported.
  • Safari: not supported.

Source

WebAssembly (Wasm)

WebAssembly API 可讓您載入 WebAssembly 程式碼,也就是可移植的二進位指令格式。您可以在瀏覽器中執行整個網誌應用程式,包括所有伺服器需求!

今年的工作將著重於下列功能:

  • JavaScript 字串內建:讓 WebAssembly 內建字串函式鏡像 JavaScript 字串 API 的子集,以便在沒有 JavaScript 黏合劑程式碼的情況下進行呼叫。
  • 可調整大小的緩衝區整合:將 WebAssembly 整合至使用可調整大小的緩衝區的 JavaScript 程式碼。

移除功能

今年的專案包括從平台移除。Mutation 事件已淘汰,並由效能更佳且可廣泛使用的 Mutation Observer API 取代。Chrome 在 Chrome 126 中移除了這些事件,而這個重點領域則是將這些事件從所有瀏覽器中移除。

如要瞭解歷史記錄以及為何移除這些事件,請參閱「Chrome 將移除突變事件」一文。

瞭解詳情

如需完整功能清單的說明,請參閱專案的 README 檔案。另外,請參閱其他公司在 Interop 2025 計畫中發布的貼文。