2022 年互通性更新:年終更新
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
以下列舉幾個在 2022 年開始互通的功能。
到今年年底前,我們已來談談瀏覽器改善了哪些功能,共同改善網路平台的互通性。請參閱這項計畫在今年 3 月發布的貼文,瞭解公司如何開始參與計畫。
年底的整體分數在所有引擎上都呈現顯著的提升。
這篇文章將說明 2022 年的進展。除了這些標題功能外,所有引擎也進一步小幅改善。先前可能造成引擎之間不一致,並在開發過程中遇到瓶頸的小問題已經解決。很高興看到可跨瀏覽器使用的強大功能,但有時難免會成為最嚴重的問題。此外,我們也樂見其持續改進。
串聯圖層
階層式圖層可讓您將選取器分組為多個圖層,藉此管理串聯畫面。這種功能只有在全球都受到支援時才會派上用場。所有主要引擎現在支援串聯圖層,且所有瀏覽器上的分數均反映出這項功能的互通性,只不過需要再做幾項 Firefox 測試即可。
對話方塊元素
對話方塊元素可讓您建立強制回應和非強制回應對話方塊。這是網路上常見的模式,只要使用這個元素,您就可以輕鬆開發及測試自己建立元件時必須開發和測試的元素。在「建構對話方塊元件」一文中,Adam Argyle 說明如何以這個元素為基礎,建構不同類型的對話方塊。
子類別
2022 年初,只有 Firefox 支援 grid-template-rows
和 grid-template-columns
的 subgrid
值。在 2022 年期間,Safari 便已納入支援範圍,而 Chrome 的這項功能仍在開發中。本年度的協同合作能力即將截止,敬請把握時間。
可視區域單元
可視區域單元是唯一在所有引擎中通過 100% 測試的功能。其中也包括大小可視區域的概念,考量到裝置上 UI 元素出現及消失時的可視區域大小變化。如要進一步瞭解這些單元,請參閱「大型、小型和動態可視區域單元」一文。
顏色 4
這種色彩工作不僅可讓 CSS 指定較高定義色域 (例如顯示 p3、rec2020) 的顏色,還能提供新的色彩函式,讓每個色彩函式都具有可處理色彩的專屬公用程式。新的色域有 lch()
、oklch()
、lab()
、oklab()
、display-p3
、rec2020
、a98-rgb
、prophoto-rgb
、xyz
、xyz-d50
、xzy-d65
:在 Canary 中試用這些功能 (只要啟用這個旗標即可)。這些變更也適用於漸層,可讓作者指定漸層使用的色域。相同旗標也會啟用 color-mix()
支援,讓您在自選空間中混合兩種顏色。color-mix() 函式在 Safari 和 Firefox 中也會有標記的後面。更多色彩、更佳的顏色、漸層效果更佳,以及更好的工具。
2023 年互通性
希望你也很高興得知,我們沒有打算在 2022 年底結束,而 Interop 2023 也已順利完成初步規劃。我們將在新年中公布已選取的功能,並期盼新的一年能協助大家更輕鬆地開發網路。
主頁橫幅由 Ian Schneider 提供。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2022-12-19 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2022-12-19 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2022-12-19 (世界標準時間)。"],[],[]]