2024 年基準:推出更多網頁開發人員工具

發布日期:2024 年 12 月 10 日

2024 年是 Baseline 計畫的豐收年,我們即將完成基礎資料集,並推出了網站平台狀態資訊主頁基準狀態小工具等工具。RUM 封存資料等其他專案也開始採用 Baseline。本文將回顧 2024 年的基準。

什麼是 Baseline?

基準標籤:電腦和行動裝置上所有核心瀏覽器支援的網頁功能。如果使用的功能屬於基準,您可以信任瀏覽器的相容性等級。

新推出的標誌,顯示所有瀏覽器都支援某項功能。
在 MDN 的內容可見度頁面中顯示的基準新標誌。

如要進一步瞭解 Baseline 的不同標籤,以及網頁功能如何成為 Baseline,請參閱 Baseline 網站或觀看「使用 Baseline 自信建構」影片。

2024 年的基準計畫

web-features 工作已完成 81%!

web-features 是為了建構網頁平台功能的共用目錄。每個地圖項目都會指派群組和定義,而基準支援資料則會標示在這個資料集中。

我們今年已投入大量心力,截至目前,81% 的功能鍵已對應,並可透過 web-features npm 套件使用。web-features 是基準狀態的可靠來源。

新的 Web Platform Status 資訊主頁

Web Platform Status 資訊主頁可提供有關不同瀏覽器導入網站平台功能的洞察資料。資訊主頁會使用 web-features 資料,因此隨著網路功能的進度更加完整,這個資訊主頁的可靠性也大幅提升。

您可以追蹤特定功能的進度,也可以篩選出特定功能,例如Baseline 2024。這個資訊主頁可補足「Can I Use」和 MDN 相容性資料等現有資源,讓您更全面地瞭解網路平台的演進情形。

如要進一步瞭解資訊主頁,請參閱「推出 Web Platform 資訊主頁」。自推出以來,我們已新增更多篩選器,例如 group:snapshot:。舉例來說,snapshot:ecmascript-2023 會顯示 ES2023 中的功能。

<baseline-status> 小工具

<baseline-status> 網頁元件也會使用網頁功能資料,現在可在自有網站和投影片中使用。從 npm 安裝,然後每次提及功能時都使用該元件。

以圖片形式顯示的基準狀態小工具。
<baseline-status> 小工具。

進一步瞭解如何使用基準狀態網頁元件

官方網站和標誌

Baseline 由 W3C WebDX 社群群組擁有,我們今年已為 Baseline 專案建立官方網頁。

如果您在專案中採用 Baseline、撰寫有關 Baseline 的文章,或發表有關 Baseline 的演講,可以提交提取要求,在「Baseline 在實際應用中的應用範例」頁面上列出您的專案

在專案中使用 Baseline 時,請參閱名稱和標誌使用規範。只要想顯示網頁功能的狀態,即可使用這些標誌。

互通性專案讓許多功能在 Baseline 中提供

Interop 專案是一項跨瀏覽器的努力,旨在改善網站的互通性。這項專案中的功能旨在跨瀏覽器導入,加快成為基準新功能的時間。在 Interop 2024 期間,宣告式 Shadow DOMfont-size-adjustrequestVideoFrameCallbacktext-wrap: balance 已納入 Baseline 2024,其他許多項目也即將完成。

RUM 洞察

RUM 封存的「深入分析」頁面是第一個整合基準的工具。您可以根據資料查看每個基準年份包含多少使用者。這有助於您為專案選擇基準年,而非採用廣泛可用的基準。

詳情請參閱「與 RUM 存檔功能整合基準值」。

This Is Baseline 系列影片

為讓您快速瞭解 Baseline 的新功能,我們推出了 #thisisbaseline 系列影片。在不到 60 秒的時間內,瞭解新的 Set 方法Screen Wake Lock APICSS 子格柵格等內容。

請點選這裡觀看所有「This Is Baseline」影片。

歡迎與我們即時通訊!

今年,我們團隊參加了許多研討會,向您介紹 Baseline、聆聽您的意見並回答問題。以下是我們曾經發表的幾場演講。

歡迎參閱 Rachel 在 10 月 FITC Web Unleashed 的演講、Pete 在 connect.tech 的講座,以及 Mariko 在 11 月 JSNation 的演講。我們很期待在 2025 年的精彩活動中與您相見!

2024 年基準的內容

隨著今年即將結束,我們已知 2024 年基準版將納入哪些功能。以下是部分重點:

@property

CSS 自訂屬性 (也稱為 CSS 變數) 是一項廣泛可用的功能。自 2024 年 7 月起,所有核心瀏覽器都支援使用 @property 規則定義具有類型、預設值和繼承功能的自訂屬性。

新的 Set 方法

自 ES2015 起,Set 就已是 JavaScript 的一部分,但今年新增了更多在 Set 上執行數學運算的方法,例如 intersectionunion,並且已獲得所有核心瀏覽器的支援。

AVIF

AVIF 是一種新型圖片格式,壓縮效果通常比 WebP、JPEG、PNG 和 GIF 等其他圖片格式更好。自 2024 年 1 月起,所有核心瀏覽器都支援 AVIF。

…還有更多!

當然,今年還有更多功能成為基準。如要查看 2024 年納入 Baseline 的功能,請按這裡。

總結

我們在 2022 年 5 月宣布 Baseline 計畫時,Baseline 還只是一個概念和初步定義。這篇文章只會強調部分工作,說明如何將基準線轉變為可納入每位開發人員工作流程的工具。

我們要感謝所有人為 Baseline 專案付出的努力。

參與 web-features 的人員:Victor Allen、Dietrich Ayala、Daniel Beck、Patrick Brosset、Sondra Eby、Adriana Jara、Mariko Kosaka、Pete LePage、Florian Scholz、James Stuckey Weber 和 queengooborg (Vinyl)

<baseline-status> 小工具:Ewa Gasperowicz 和 Chrome DevRel 團隊

Web Platform 狀態資訊主頁:Panos Astithas、Kyle Ju、James Scott、Daniel Smith 和 Jason Xu

Google 基準團隊:Aaron Abbarno、Rachel Andrew、Tony Conway、Philip Jägenstedt、Adriana Jara、Mariko Kosaka、Pete LePage、Nandu Nair、Ali Spivak 和 Kadir Topal

特別感謝:CanIUse 的 Alexis Deveria、Claas Augner、Hermina Condei、Florian Dieminger、Ruth John、MDN 的 Leo McArdle、RUM Archive 的 Nic Jansma 和 Robin Marx、Interop 專案的貢獻者、Apple、Firefox、Igalia、Microsoft、Open Web Docs、OddBird 和 WebDX 社群群組成員。