2024 年互通性

Interop 2022Interop 2023 的成功之後,我們很期待有機會能再次與所有重要的瀏覽器供應商和其他相關相關人員進行合作。 我們共同的目標是要改善網路平台之間的互通性,藉此簡化開發人員的工作,並打造更豐富的網路使用者整體體驗。

互通性是一套完整的測試和基準,可根據我們對網路標準的共同承諾,評估個別瀏覽器是否遵守規定。 最終,互通性會盡力消除瀏覽器之間的不一致,進而在產業中實現統一的願景。

針對 2024 年互通性,公開提案程序的宗旨是為初始功能清單提供來源。在此清單中,雙方均合力製作 2024 年的重點領域清單。 以下列出我們預計年底前 100% 通過考試的領域。

2024 年所有重點領域

互通性 2024 年納入了 12 個全新重點領域,還有 5 個自 2023 年至今沿用的 5 個新重點領域,目前仍持續進行一些修正。包括:

  • 無障礙功能
  • CSS 巢狀結構
  • 自訂屬性
  • 宣告式陰影 DOM
  • font-size-adjust
  • WebSocket 的 HTTPS 網址
  • IndexedDB
  • 版面配置
  • 指標和滑鼠事件
  • 彈出式視窗
  • 相對色彩語法
  • requestVideoFrameCallback
  • 捲軸樣式
  • @starting-style 和轉換-behavior
  • 文字方向
  • 文字換行:餘額
  • 網址

如要查看所有重點區域的詳細資料,請前往 Interop 2024 資訊主頁,當中顯示功能與必要工作的詳細資料,以及每個瀏覽器目前的分數。在本文的其他部分,您可以瞭解 Chrome 在哪些方面最需要努力達到 100%。

巢狀結構

CSS 巢狀結構模組會定義巢狀選取器的語法,提供在另一個樣式規則中建立巢狀結構的功能,並搭配相對於父項規則選取器的子項規則選取器。

CSS 巢狀結構與 CSS 預先處理器 (例如 Sass) 不同,因為 CSS 是由瀏覽器剖析,而不是由 CSS 預先處理工具預先編譯。

CSS 巢狀結構可提升 CSS 樣式表的可讀性、模組性和可維護性。這可能也有助於縮減 CSS 檔案的大小,進而減少使用者下載的資料量。

雖然所有瀏覽器都支援 CSS 巢狀結構,但由於規格有所異動,因此實作方式會有些許差異。2024 年互通性期間,我們的目標是確保所有瀏覽器都遵循現行規格。

進一步瞭解 CSS 巢狀結構,並探索支援裸元素標記名稱巢狀結構的規格異動。

文字換行:餘額

CSS text-wrap 屬性的平衡值可讓瀏覽器知道您想在各行文字之間取得平衡。通常用於標題或其他簡短文字區段,避免使用者輸入字體排版。

標題由兩行換行,第二行顯示兩個字詞。
不平衡的廣告標題
標題有兩行,每一行都相同。
適當廣告標題

各款瀏覽器支援的長篇和簡短版本皆有所差異。2024 年互通性期間,我們致力確保上述功能可互通。

開發人員經常要求在標題和其他短文字部分之間取得平衡,詳情請參閱「CSS 文字換行:餘額」一文、網路上的字體排版裝飾文,或CSS Text Balancing with text-wrap: 平衡

WebSocket 的 HTTP(s) 網址

WebSocket 建構函式原本需要 ws:wss: 網址,避免使用相對網址和產生的解決方法程式碼。

更新規格以允許 http(s) 配置,進而使用相對網址。這些規格會標準化為 ws:wss:。 在互通性期間,我們會在 2024 年更新實作方式,以便支援 http(S) 配置。

相對色彩語法

相對顏色語法定義請見 CSS 色彩 5 規格,並可讓您在 CSS 中操控色彩。例如調暗、調亮或低飽和度。

相對顏色語法大致上可互通,但瀏覽器尚未實作 currentcolor 關鍵字;這類測試已納入 2024 版 Interop 中。

如要瞭解這項功能的所有功能,請參閱「CSS 相對色彩語法」。

2024 年協同整合資訊主頁

和往年一樣,實驗及穩定瀏覽器版本的目前分數會發布在資訊主頁上,讓您瞭解分數的走勢。

含有分數的資訊主頁螢幕截圖 - 互通性:65,調查:0,Chrome Canary:83,Edge Dev:82,Firefox 夜間:80,Safari 技術預覽:79。
自 2024 年 2 月 1 日起,實驗性瀏覽器版本分數。

我們非常期待今年,所有重點領域都能在各方面帶來更大的成效。

進一步瞭解互通性 2024