Interop 2023：MDN 更新
Brian Smith
閱讀時間 6 分鐘
Web 互操作性意味著確保 Web 平臺功能在儘可能多的裝置和瀏覽器上以符合規範的方式工作。隨著 Interop 2024 的剛剛啟動，本文將解釋 Interop 專案是什麼，回顧 MDN 上基於 Interop 2023 的內容，並展望 Web 平臺即將推出的功能。
什麼是 Interop 專案？
名為“Interop 專案”的基準測試和測試套件，用於跟蹤 Web 功能在不同瀏覽器之間的互操作性。然而，Interop 不僅僅是測試；它是一項由瀏覽器廠商共同發起的倡議，旨在識別那些需要跨瀏覽器一致性的重要功能，並在一年內推動這些功能的發展。
在過去三年中，開發人員齊心協力提高了 Interop 基準測試的總體得分。與往年一樣，Interop 2024 儀表板展示了瀏覽器廠商同意共同努力的功能，以及跨不同瀏覽器在 Web 功能相容性得分方面的進展。
這項倡議的主要目標是確保開發人員能夠為每個人提供無縫的 Web 體驗，無論他們選擇哪個瀏覽器。當開發人員能夠基於一致的 Web 平臺進行構建時，所有 Web 使用者都能在日常線上活動中受益。
Web 平臺的一個關鍵優勢在於它是由標準定義的，而不是由單個實現的程式碼決定的。這創造了一個共享平臺，該平臺不依賴於特定的硬體、公司或商業模式。—— Interop 2022 釋出公告，Mozilla Hacks
Interop 如何工作？
Interop 團隊根據使用者和 Web 開發者的反饋選擇重點關注領域，以識別那些由於瀏覽器支援不佳或不一致而特別存在問題的功能或功能組。一套無頭瀏覽器測試斷言瀏覽器在每個關注領域都按照規範合規的方式執行。
幕後的一個加速器是，瀏覽器廠商可以與程式碼更改一起釋出Web 平臺測試（WPT），自動化流程可以捕獲這些測試，並將測試高效地向下遊傳輸到 WPT 專案。透過與 Interop 緊密的反饋迴圈釋出修復和功能，瀏覽器開發者可以直接看到他們努力對 Web 生態系統的影響，這是推動開放 Web 前進的重要激勵因素。
Interop 2023 成果
許多程式碼更改已在多個瀏覽器中生效，旨在提高 Interop 分數。正如您在下面的螢幕截圖中所見，整體基準測試結果呈現出跨瀏覽器相容性提高的美好景象。要深入瞭解專案的進展，您可以使用這個互動式儀表板。
一些關注領域在一年中發生了巨大變化。例如，CSS 自定義屬性中的功能，在 2023 年 1 月僅為 4%，到年底已飆升至 89.5% 的透過率。
CSS Subgrid 是另一個很好的例子，去年整體透過率從 12.5% 提高到 90.8%。
基準測試結果為該專案鼓勵 everywhere 遵循 Web 標準的目標描繪了一幅激動人心的成功圖景。
MDN 上的 Interop 2023 更新
MDN 團隊在 Interop 中的角色是確保 Interop 中包含的功能有可靠且最新的文件，特別是對於那些已經實現跨瀏覽器支援的功能。這使得開發人員能夠自信地使用在主流瀏覽器版本中最近穩定的功能來構建 Web。
Interop 2023 是團隊去年的一項文件目標。我們的目的是稽核與 Interop 2023 關注領域相對應的 MDN 內容，並更新文件，使其在功能及其支援不斷發展時保持準確和有用。
2023 年，許多功能，如:has()，在所有主流瀏覽器引擎中達到了穩定狀態，這意味著我們可以刪除許多實驗性警告，並在適當的時候更新程式碼以使用最新語法。
MDN Interop 2023 亮點
2023 年是 CSS 的重要一年，我們看到了 CSS 顏色支援的許多改進，這帶來了一些出色的文件改進。以下是團隊關注 Interop 所帶來的改進中的一些有趣亮點。
- docs(CSS): 新增 CSS 屬性和值 API 的模組著陸頁
- docs(CSS): 新增 overscroll 行為模組著陸頁
- docs(CSS): 新增 CSS transforms 模組的模組著陸頁
- docs(HTML): Inert - 關於內容不可感知的說明
如果您想檢視 Interop 2023 任務和 PR 中涵蓋的所有其他內容，請檢視 GitHub 上的 MDN Interop 2023 跟蹤問題，其中包含 56 個 PR 和子任務的連結。除了參考文件和指南之外，我們還在 MDN 部落格上寫了很多關於 Interop 主題的內容，例如 CSS 顏色、邊框影像和容器查詢。
2023 年關注領域
以下是 Interop 2023 的關注領域，並附有指向每個領域的 MDN 文件的連結。我們希望保持這些文件更新的努力，能夠對您閱讀它們的體驗以及您的 Web 開發之旅產生影響。
CSS
| 關注領域 | 描述 |
|---|---|
| 邊框影像 | 如何使用影像作為元素的邊框。 |
| 色彩空間和函式 | 指定顏色值和色彩空間的各種方法。 |
| 容器查詢 | 基於父容器大小進行封裝。 |
| 包含 | 將子樹與文件的其餘部分隔離。 |
| CSS 數學函式 | 數學函式，如min()、sin()。 |
| CSS 偽類 | 元素的狀語選擇器（例如，:hover、:focus）。 |
| 自定義屬性 | 用於可重用值的自定義 CSS 變數。 |
| Flexbox | 用於在一維流中排列元素的佈局。 |
| 字型功能檢測和調色盤 | 高階排版功能。 |
| 網格 | 基於網格的佈局系統。 |
| :has() | 根據後代選擇元素。 |
| 蒙版 | 如何使用蒙版圖層部分或完全隱藏元素。 |
| 媒體查詢 4 | 根據裝置特性應用樣式。 |
| 運動路徑 | 沿路徑定位元素以進行動畫。 |
| 滾動 | 控制 Web 文件中的滾動。 |
| 子網格 | 擴充套件 CSS Grid，允許網格項引用其祖先的網格。 |
| 變換 | 對元素執行 2D 和 3D 變換。 |
HTML
API
| 關注領域 | 描述 |
|---|---|
| Web Workers 中的模組 | 使用 Web Workers 在後臺執行緒中執行指令碼。 |
| Offscreen Canvas | 透過指令碼渲染圖形，而不更新主頁面。 |
| 指標和滑鼠事件 | 處理來自滑鼠和觸控介面的輸入。 |
| URL | 建立和管理 URL 的 API。 |
| Web Codecs (影片) | 用於編碼和解碼音訊和影片的編解碼器。 |
其他
- Web Components：一組允許建立可重用自定義元素的 [技術](https://mdn.club.tw/en-US/docs/Web/API/Web_components)。
總結
我們很期待看到 2024 年 Web 平臺上的新功能，並且我們將密切關注 Interop，瞭解下一個推動者和變革者。我們認為 Interop 是最重要和最令人興奮的倡議之一，它激勵瀏覽器廠商構建一個合規且開放的 Web。
希望您喜歡這篇博文！您可以隨時與我們聯絡，告訴我們您的想法。如果您想了解更多關於 Interop 的資訊，以下是有關公告和專案頁面的資源列表：
- Interop 2024 公告（hacks.mozilla.org）
- Interop 2024（web.dev）
- Web 平臺因 Interop 2024 而變得更好（webkit.org）
- WPT 主頁
- Interop 2024 專案頁面（wpt.fyi）