透過互通性功能慶祝 2023 年互通性更高的網路環境

2023 年底協同整合工具已總結完備。瀏覽器連結 和其他廠商都希望建立更具互通性的網路環境,並減少 可以超越您。這則貼文分享了最終結果 以及 Chrome 小組最愛的幾項功能

最終得分

實驗性瀏覽器分數的螢幕截圖。整體互通性:95。調查:85。Chrome/Edge:99。Firefox:98。Safari:97。
實驗版瀏覽器在 2024 年 1 月 31 日的最終分數。 請參閱 wpt.fyi/interop-2023

很高興看到如此長的綠色,並與 2023 年初的分數比較結果,這已成長了很長的路, 分數大幅增加。

我們期待哪方面的工作?

如要查看 2023 年重點領域的完整清單,請前往 Interop 2023 資訊主頁。一些重點領域,例如 :has()、 容器查詢和 inert 屬性涵蓋了整個功能其他, 例如 Flexbox 中的工作、處理 現有的跨瀏覽器功能

:has()

瀏覽器支援

  • 105
  • 105
  • 121
  • 15.4

資料來源

「最後是 CSS 的上層選取器!系統幾乎從第一天就開始提出這項要求,但在所有瀏覽器中都發揮了功效。也就是說,開發人員需要減少執行 JavaScript 才能模擬這個選取器。」— Chrome 的開發人員關係工程師 Thomas Steiner

關於功能虛擬課程的功能,人們也躍躍欲試 :has(),因為此要求將傳送至平台,是開發人員的主要要求。這項服務 會顯示父項選取器 您可以根據下列項目選取元素 建立 Deployment然而,生成式 AI 的功能更可觀,如 CSS 包裝中所述,您可以選取 甚至要水平選取

CSS :has() 示範:固定

Chrome 團隊的開發人員關係工程師 Una Kravets 說明:

「:has() 選取器是最靈活且最強大的 CSS 功能之一,透過此方式,您可以根據是否擁有、狀態或甚至子項元素的數量,設定任何父項的樣式。而且還能與其他組合器搭配使用,為同層級設定樣式,大幅提升 UI 的樣式控制權。這項功能很靈活!我看過許多很棒的示範,在使用 :has() 的強大功能的情況下,就不需要依賴額外的指令碼。」

Chrome 軟體工程師 Philip Jägenstedt 提醒我,:has() 開發人員因缺少支援而苦惱的首要功能 (2023 年 CSS 問卷調查現況)。 我們不是唯一願意推出這項功能的人。

你可以聆聽 Una 和 Adam Argyle,針對 CSS Podcast 談論 has(),並進一步瞭解 :has()來自網路社群的這些訊息。

容器查詢

瀏覽器支援

  • 105
  • 105
  • 110
  • 16

資料來源

2023 年,宣布了不可能的願景。於 除了 :has() 以外,網路平台終於獲得支援 容器查詢自從 2011 年,直到採用回應式設計概念的一年。現在, 隆重登場,並支援所有主要瀏覽器引擎

Una 和 Adam 探討了 CSS Podcast 中的容器查詢, Una 引入 在瀏覽器中設計:社群成員也持續分享許多訣竅

子類別

瀏覽器支援

  • 117
  • 117
  • 71
  • 16

資料來源

Subgrid 是我在 2023 年最喜歡的整合服務。可讓你在 父項元素,然後使用該父項元素中定義的播放軌大小 巢狀結構位於主要格線中感謝您使用 Microsoft Edge 的網頁 平台工程師 提升 Chrome 的分數 開放所有人使用這項令人期待的功能

Chrome 開發人員關係工程師 Adriana Jara 告訴我們格線和子格 簡化了使用者介面的建立流程

「我對視覺元素、版面配置、能維持一致的外觀以及適應不同的螢幕,真的非常糟糕。不過有了格線和子格線,您便能建立適用於多種螢幕大小,並配合內容自動調整的設計!這正是我最喜歡的原因是,因為這讓我們有了基本功,只要不需要任何專業知識,就能輕鬆打造網站,讓使用者享有優質體驗。」

我在「網頁 12 天」和其他功能中介紹了幾項子領域使用情境 你可以在這篇文章中收聽 CSS Podcast 單集節目。 網路上也有許多資源

色域和功能

瀏覽器支援

  • 111
  • 111
  • 113
  • 15

資料來源

Chrome CSS 開發人員 Adam Argyle 就跟我說著色域和功能是一件令人驚訝的事實 是他最喜歡的功能

「再見 awkward HSL 管道值變數數學您好,即時顏色子類單行文字。新的色彩空間和功能不只能解決色彩工作流程的問題,還能讓您使用更先進、可靠且鮮豔的色彩與漸層。解鎖某些能力的同時,生活更加便利也帶來樂趣。享受互通性調味的過程,這道菜色多采多姿。」

Adam 製作了一些令人驚豔的內容 功能,例如 High Definition CSS Color Guide (高畫質 CSS 顏色指南) 和 gradient.style,以及CSS Podcast 的顏色功能

這些功能在各大瀏覽器引擎中皆可使用,真是令人振奮! 歡迎參閱這些優質文章,瞭解更多資訊。

期待 2024 年互通性服務

功能可互通後,就會成為 基準:現已推出。很高興看到 在 2023 年加入這個群組的功能,由於 2023 年推動協同合作的每位成員。不久後就會開放 獲選為 2024 重點領域 也很期待看到 網路平台也在今年會變得更加完善