網頁版新功能

Rachel Andrew

發布日期：2025 年 5 月 20 日

在 2025 年 Google I/O 大會的「網頁新訊」主題演講中，我們分享了所有 Baseline 公告，並介紹了今年加入 Baseline 的部分功能。今年是網路蓬勃發展的一年，這篇文章將彙整 Baseline 提及的所有內容，並附上相關連結，方便您深入瞭解。

Web Platform 資訊主頁和網路功能

我們在 2024 年宣布推出網頁平台資訊主頁，這個資訊主頁會使用網頁功能資料集，讓您探索 Baseline 的所有功能。

網頁功能資料現在已完整，平台的所有功能都已對應。每月都會有新功能加入 Baseline，因此資料也會更新，所有這些資訊都會顯示在資訊主頁上。

協助您找出基準目標的工具

雖然您可以根據 Baseline Widely available 的變動目標制定瀏覽器支援政策 (例如 UK agency Clearleft)，但您也可以根據 Baseline 年份採用固定目標。您現在可以搭配使用自有使用者資料和網站功能資料，找出最適合的目標對象。

我們在去年的 I/O 大會上宣布，RUMvision 將在產品中導入 Baseline，而這項整合功能現已上線。

由於這項功能會使用 RUM 資料，因此可協助您根據該資料 (而非全球平均值)，判斷要採用哪個基準年。您也可以藉此判斷 Baseline Widely available 是否適合自己。

您也可以使用 Google Analytics 資料，透過全新的 Google Analytics Baseline Checker 清楚瞭解有多少比例的使用者支援各個 Baseline 目標。

支援百分比的基準年清單。
Google Analytics 基準檢查工具的輸出內容。

這只是我們不斷擴充的工具系列中的兩項工具，可協助您將實際使用者資料對應至 Baseline。

Web DX 社群團體最近推出了 Netlify 擴充功能，可顯示網站支援的不同 Baseline 年份和廣泛可用的功能，協助您決定要在建構工具中鎖定哪些目標。我們即將整合 Cloudflare 的 Observatory RUM 產品和 Contentsquare。

使用自己的工具整合資料

網頁功能資料是開放的，可供您自行整合。我們正努力簡化相關操作。

使用 Web Platform Dashboard API，或直接從 npm 套件取用網頁功能資料。

您現在可以使用 W3C WebDX 社群群組的 baseline-browser-mapping 模組，將瀏覽器版本對應至基準目標。這個模組可在伺服器端 JavaScript 環境中使用，也可以從存放區下載每日更新的 JSON 或 CSV 檔案。

這項資料不僅包含核心 Baseline 瀏覽器集的對應，也包含 Samsung Internet、Opera、UC 瀏覽器和 Android WebView 等下游瀏覽器的對應。

瞭解基準目標是否支援相關功能

現在大部分的 MDN 和「我可以使用嗎？」頁面都提供基準資訊，您也可以在 Web Platform 資訊主頁，以及 web.dev 和 CSS Tricks 的文章中找到這類資訊。不過，這一切都需要您查詢支援服務。如果能在編寫程式碼時，在 IDE 中顯示 Baseline 資訊，並將這項資訊納入您使用的所有其他工具，會更有幫助。

很高興在此宣布，許多重要工具現在都內建或可輕鬆整合 Baseline 支援功能。

browserslist-config-baseline

Babel 和 PostCSS 等許多工具都會使用 browserslist，判斷要支援哪些瀏覽器。

Chrome 團隊與 WebDX CG 和社群成員合作，共同發布了名為 browserslist-config-baseline 的新工具。 您可以在 Baseline 條件中設定瀏覽器清單目標，例如廣泛支援或 Baseline 年份。

因此，現在可以根據 Baseline 表示任何採用 browserslist 目標的工具。

詳情請參閱「搭配瀏覽器清單使用 Baseline」。

Lint 中的基準線：ESLint 和 Stylelint

最近在 Linter 空間中推出了一些新工具，讓您可以使用 Baseline 和 Linter，首先是 ESLint for CSS。

Baseline ESLint 具有 use-baseline 規則。您可以將此項設定為偏好的基準目標，系統會在您使用任何比目標更新的功能時發出警告。您可以選擇如何解決這些警告：將該功能替換為基本型別，或是停用 Lint 警告。如果您確定自己安全地使用尖端功能 (例如漸進式強化)，停用 Lint 警告就是完全有效的解決方案。

根據預設，如果 @supports 區塊內使用較新的功能，ESLint 不會發出警告，因為不支援的瀏覽器不會評估這些功能。

如需 HTML 檢查，您也可以使用名為 html-eslint 的社群外掛程式。

Stylelint 正式支援名為 stylelint-plugin-use-baseline 的外掛程式。這項規則的運作方式與 CSS 的 ESLint 規則相同，但會在 Stylelint 上執行。

許多 Linter 也提供 IDE 外掛程式，因此您可以在編碼時透過波浪底線，立即取得有關基準狀態的意見回饋。

VSCode 中使用的 ESLint 外掛程式，顯示 Baseline 目標以外的功能底線。
VSCode 中使用的 ESLint 外掛程式。

VS Code 和 JetBrains WebStorm 中的基準

許多 IDE 長期以來都支援在編輯器中將游標懸停在某項功能上，並查看支援的瀏覽器版本清單。

但要瞭解該功能是否真的安全，可能相當困難，您必須在腦中分析該清單是否缺少任何主要瀏覽器，以及瀏覽器版本的新舊程度。

為解決這個問題，我們與數百萬網頁開發人員使用的熱門 IDE「VS Code」合作，將 Baseline 資料直接整合到這些懸停資訊卡中。

現在只要將滑鼠游標懸停在某項功能上，系統就會顯示該功能是否屬於 Baseline，以及屬於 Baseline 的時間長度，或是否有任何主要瀏覽器尚未完全實作該功能。

VSCode 中的懸浮資訊卡，顯示基準狀態。
VSCode 懸停資訊卡整合。

支援的功能包括 CSS 屬性、HTML 元素和 HTML 屬性。 詳情請參閱「Visual Studio Code 現已支援 Baseline」。

這項整合功能表示，任何以 VS Code 為基礎的 IDE 也會受益於這些懸停資訊卡。

此外，我們也很高興宣布，JetBrains 將在 WebStorm JavaScript 和 TypeScript IDE 中導入懸停資訊卡。

WebStorm 懸停資訊卡整合。

網路的進步速度前所未有

我們希望 Baseline 能協助您充分利用互通性網路的優勢，因為互通性網路的改善速度前所未有。

您可以使用 Web Platform 資訊主頁，查看過去十二個月 (自 2024 年 Google I/O 大會以來) 成為 Baseline Newly available 的所有功能。

此外，Interop 2025 專案中也包含許多功能，相信很快就會推出 Baseline 版本。如要瞭解所有包含的功能，請參閱「Interop2025：又一年網路平台改善計畫」。

橫向書寫模式

Browser Support

  • Chrome: 132.
  • Edge: 132.
  • Firefox: 43.
  • Safari: 18.4.

我們已看到一項功能成為 Baseline Newly available，也就是 CSS writing-mode 屬性的 sideways-rl 和 sideways-lr 值。如果您使用直向書寫模式純粹是為了版面配置，可能需要使用側向值。

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

錨定位置

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

錨定位置 已在 Chrome 125 中推出。您可以將元素的位置繫結至錨點，例如使用按鈕開啟工具提示時。

這項功能現已納入 Interop 2025，因此今年應會加入 Baseline。

網站使用體驗核心指標：LCP 和 INP

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API (適用於 INP)

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: 144.
  • Safari: not supported.

Source

網站使用體驗指標可協助您量化網站體驗，並找出改善之道。Web Vitals 計畫旨在簡化這個領域，協助網站專注於最重要的指標，也就是網站體驗核心指標。

Interop 2025 包含最大內容繪製 (LCP) 和Interaction to Next Paint (INP) 指標，方法是在瀏覽器中實作 LargestContentfulPaint API 和 Event Timing API。

<details> 元素強化功能

<details> 元素本身已是 Baseline Widely 可用元素。Interop 2025 已納入這項功能，因為有許多功能可讓含有 <details> 的揭露小工具更加實用。

<details> 元素包含 <summary> 元素，這是 <details> 元素摺疊時網頁上顯示的部分。<summary> 以外的內容是 <details> 元素的內容，這類內容會隱藏，直到使用者點選摘要為止。

在 Interop 2025 期間，其中一項要實現互通性的功能是使用 content-visibility (而非 display) 隱藏內容，也就是說，如果內容未展開，就不會顯示。

::marker 虛擬元素也是 Interop 2025 計畫的一部分。::marker 虛擬元素可讓您設定 <summary> 元素的揭露三角形樣式。

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 49.
  • Safari: not supported. 

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

接著是另一個虛擬元素 ::details-content。

Browser Support

  • Chrome: 131.
  • Edge: 131.
  • Firefox: 143.
  • Safari: 18.4.

Source

::details-content 代表內容，也就是詳細資料元素中可展開和收合的部分，且可供您設定樣式。

[open]::details-content {
  border: 5px dashed hotpink;
}

此外，我們也進行了一些改良，例如自動展開「在網頁上尋找」相符的 <details> 元素，以及將 HTML hidden 屬性的 until-found 值帶入「基準」新功能。這會隱藏元素，直到使用瀏覽器的網頁內搜尋功能找到該元素，或是透過網址片段直接前往該元素為止。

CSS @scope

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

CSS @scope 規則可讓您限制選取器的觸及範圍。使用 @scope 設定範圍根目錄後，巢狀內嵌在 at 規則中的任何樣式規則，只會套用至該 DOM 樹狀結構。

舉例來說，如果您只想以具有 .card 類別的元素內 <img> 元素為目標，則 .card 會成為範圍根。

@scope (.card) {
    img {
        border-color: green;
    }
}

詳情請參閱「使用 CSS @scope at-rule 限制選取器的觸及範圍」。

scrollend

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari Technology Preview: supported.

Source

另一項可降低複雜度並改善捲動介面的功能是 scrollend。如果沒有 scrollend 事件，就無法可靠地偵測捲動是否完成。

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

使用 scrollend 事件時，瀏覽器會為您完成所有困難的評估作業。

document.onscrollend = event => {…}

如需更多範例，請參閱「Scrollend，一個新的 JavaScript 事件」。

相同文件的檢視畫面轉場效果

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

最後但絕對是重點，檢視畫面轉場效果是 Interop 2025 的一部分。這項工作涉及同文件檢視畫面轉場效果，因此適用於單頁應用程式和檢視畫面轉場效果類別。

請前往 Interop 2025 資訊主頁，瞭解這項專案在今年度的進展。

Interop 2025 中包含的功能不會是今年唯一納入 Baseline 的項目，但這些功能已列入專案，這代表我們將優先處理這些功能，並在近期推出。

實驗才剛開始

對 Baseline 來說，今年是令人振奮的一年，我們在去年發布公告後，已取得長足進展。我們現在已完成網頁功能資料的回填作業。這項措施開啟了閘門，讓開發人員工具得以問世。我們才剛開始這項計畫，如果您有產品或開放原始碼工具可從這項資料獲益，歡迎與我們聯絡。

請密切關注 web.dev，我們會持續發布新工具的公告，並提供教學課程，協助您充分運用網路資源。