2022 年互通性:為開發人員改善網路環境,多個瀏覽器相互搭配運作

我們有史以來,所有主要瀏覽器廠商及其他利害關係人都攜手合作,共同解決網頁程式開發人員找出的常見瀏覽器相容性問題。協同整合工具將於 15 個主要領域改善網頁版的開發體驗。本文將說明我們如何實現這些目標、專案著重的要素、成效評估方式,以及如何追蹤進度。

2019 年,Mozilla、Google 和其他公司都在投注大量心力來瞭解開發人員你可以透過「MDN 開發人員需求評估問卷調查」表單,以及這份內容詳盡的瀏覽器相容性報告,說明須解決的問題所在。這些報告提供了詳盡的實用資訊,讓我們得以針對使用網路平台的開發人員解決最重大的問題,並在 Compat 2021 做出貢獻

此外,Compat 2021 也致力為 CSS 網格 (12% 使用率且穩定成長) 和 CSS Flexbox (使用率為 77%) 等強大功能奠定穩固基礎,包括 Flexbox 中的 gap 屬性,為開發人員在採用新的版面配置方法時解決棘手問題。

我們很高興在 2021 年底,所有導入作業中達到超過 90% 的分數!

什麼是 2022 年協同整合工具?

Interop 2022 是一項基準,由三個主要瀏覽器實作的代表商議,並經過公開提名流程製定,並參考支持者 AppleBocoup、Google、IgaliaMicrosoftMozilla 等團隊的意見進行開發。

基準測試著重於 15 個領域,開發人員認為,當瀏覽器欠缺某些功能或發生相容性問題時,就會顯得特別困難。所有瀏覽器廠商都同意將重心放在這些領域,所有參與的使用者都非常期待能著手改善開發網路的體驗。

重點研究的 15 個領域

下列功能將成為協同整合工具 2022 年的重點功能。包括 10 個新區域,以及 5 個從 Compat 2021 轉移而來。新的重點領域如下:

串聯圖層

階層式圖層可讓網頁開發人員進一步控管串聯畫面。用來將選取器分組為多個圖層,每個圖層都有各自的明確細節。也就是說,您不需要仔細排序選取器,或建立非常具體的選取器來覆寫基本 CSS 規則。

色域和 CSS 顏色函式

如要在設計系統中使用色彩函式,目前必須使用 Sass、PostCSS 或 calc() (HSL 值)。CSS 內建的色彩函式表示可以動態更新顏色,新的色彩空間則不再受限於 sRGB 色調,以及 HSL 的感知限制。

CSS 顏色等級 5 中定義了兩項函式,可讓網路平台使用更動態的主題設定功能:

  • color-mix():取用兩種顏色,並傳回在指定色彩空間內混合這些顏色的結果。
  • color-contrast():從顏色清單選取單一顏色對比度最高的顏色。

這些函式支援展開式色域 (LAB、LCH 和 P3),而且除了 HSL 和 sRGB 之外,也預設採用統一的 LCH 色域。

新增可視區域單元

2020 年 MDN 瀏覽器相容性報告和新的 CSS 2021 現況問卷調查中,開發人員會明顯瞭解如何處理可視區域大小調整問題。CSS 值和單元層級 4 可針對最大、最小和動態的可視區域大小、lv*sv*dv* 加入新單位。這些單元有助於輕鬆建立版面配置,填滿行動裝置上的可視區域,同時將網址列納入考量。

每個可視區域單元中可視區域的不同部分。

此外, Interop 2022 年互通的跨供應商團隊也將合作進行研究,提升現有可視區域評估功能 (包括現有的 vh 單位) 互通性的狀態。

捲動

2021 年捲動問卷調查報告》指出,捲動功能和捲動相容性不易實作,且有許多地方需要改善。我們將重點放在捲動貼齊功能scroll-behavior過度捲動行為,藉此協助各平台中的捲動更一致且流暢。

我們也在探索新的捲動貼齊功能提案

子類別

grid-template-columnsgrid-template-rowssubgrid 值表示套用 display: grid 的格狀項目可以從其放置的上層格線中,繼承軌跡定義。

舉例來說,下列三個資訊卡元件在頁首和頁尾會對齊相鄰的資訊卡頁首和頁尾,即使每張資訊卡各有各自的格狀檢視畫面也一樣。這種模式之所以有效,是因為每張資訊卡是一個項目,範圍涵蓋父項網格的三列,然後使用子格狀檢視畫面繼承這些資料列。

三個資訊卡元件,其中頁首和頁尾對齊。
請前往 CodePen 參閱這項資料

其他包括

  • CSS 包含 (contain 屬性)
  • <dialog> 元素
  • 表單控制項
  • 字體排版和編碼:包括 font-variant-alternatesfont-variant-positionic 單位和 CJK 文字編碼
  • Web Compat 著重於使網站相容性問題影響到使用者的瀏覽器之間的差異

下列領域在 Compat 2021 專案上取得了良好進展,但仍有改善空間。因此,這些錯誤也在 2022 年納入協同整合工具,以便解決其餘問題。

  • 顯示比例
  • Flexbox
  • 格線
  • 固定位置
  • 轉換

調查工作

除了 15 個重點領域外, Interop 2022 年也納入三項調查工作。這些是有問題且需要改善的地方,但目前規格或測試還不足以透過測試結果評分進度:

  • 編輯中,contenteditableexecCommand
  • 指標和滑鼠事件
  • 可視區域測量

瀏覽器廠商和其他利害關係人會合作改善這些領域的測試與規格,使其能夠加入日後的版本中。

評估成效及追蹤進度

每個瀏覽器的得分:71 (Chrome 和 Edge)、74 (Firefox) 和 73 (Safari 科技預覽) 73 分。

系統會使用現有的 Web-platform-tests 資訊主頁追蹤 15 個重點領域的進度。針對每個領域找出一組測試。然後瀏覽器根據這些考試進行評分,並給予每個領域的分數,以及全部 15 個區域的整體分數。

如要跟上進度並追蹤進度,請前往 Interop 2022 資訊主頁。今年,您可以跟著指示操作,瞭解您打造的平台如何有所改善。

一張表格圖片,上面有各種主要網路瀏覽器的眾多區域分數
前往 wpt.fyi/interop-2022 查看各重點領域的所有瀏覽器分數。

這對開發人員有何影響?

在 2021 年和 Interop 2022 等多年的互通性方面,我們的目標是徹底瞭解並解決開發人員多年來經歷過的問題點,比起單一瀏覽器,Google 有別於任何主要瀏覽器廠商及朋友們積極合作,以期改善整體網路平台品質。

基本上,目標是讓開發人員使用更可靠的網路平台,讓他們有更多時間打造優質的網路體驗,而不是解決瀏覽器不一致的問題。

請提供您寶貴的意見

歡迎您對 Compat 2021 期間或協同整合工具 2022 提供的任何功能提供意見。下列哪些功能最能改變您的工作方式?你最期待哪方面的工作?GitHub 存放區的檔案問題,或透過 Twitter 告訴我們

進一步瞭解互通性 2022 年: