目前可用的基準功能

僅瞭解 Baseline 中的部分功能。

Mariko Kosaka

網路瞬息萬變,瀏覽器也會不斷更新,為開發人員提供新的工具,讓他們能在這個平台上創新。之前必要的輔助程式庫部分將成為網路平台的一部分,並且支援所有瀏覽器。此外,編寫設計元素程式碼的方式也變得更簡單或更簡單。

這種不斷演變與適應的做法很有用,但也可能引起混淆。要瀏覽所有更新項目並不容易。身為開發人員,我們曾詢問過「所有瀏覽器引擎何時會支援這項新功能?」,「何時可以在正式版程式碼中開始使用這些功能?」「我們要支援多久才能使用舊版瀏覽器?」

答案是,答案是「視情況而定」。您的需求和可行性將取決於您的使用者族群、技術堆疊、團隊架構和支援的裝置。但我們也都同意,網路目前的情勢可能不利於做出決定。

Chrome 團隊正與其他瀏覽器引擎和網路社群合作,使內容更清楚。包括我們針對 Interop 2023 等專案所做的努力,以改善一組重要功能的互通性。但這幾年來推出的功能呢?大約兩年前,我們學到的實驗功能是否可供使用?

在這篇文章中,我想強調一下,在最近兩個主要瀏覽器版本中,所有主要瀏覽器引擎都能使用的功能。這是我們稱之為 Baseline 的功能集,我們認為大多數開發人員都會覺得某項功能安全無虞。詳情請參閱Baseline 公告

對話方塊元素

<dialog> 元素是新的 HTML 元素,可用於建立對話方塊提示,例如彈出式視窗和互動視窗。

瀏覽器支援

  • 37
  • 79
  • 98
  • 15.4

資料來源

如要使用,請定義強制回應元素,然後對對話方塊元素呼叫 showModal() 方法來開啟對話方塊。

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

做為原生 HTML 元素,並內建聚焦管理、分頁追蹤以及保留堆疊結構定義等功能。詳情請參閱「建構對話方塊元件」。

個別 CSS 轉換屬性

使用 CSS 轉換能在網站中加入移動元素,能有效提升廣告成效。
你可能已經熟悉如何編寫一行有三個屬性的 CSS 轉換作業。
使用個別轉換屬性時,您現在可以個別指定轉換屬性。編寫複雜的主要畫面格動畫時,這項功能非常實用。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

瀏覽器支援

  • 104
  • 104
  • 72
  • 14.1

資料來源

如要深入瞭解這項變更,請參閱使用個別轉換屬性對 CSS 轉換的精細控制

新的可視區域單元

在行動裝置上,可視區域大小會因動態工具列是否顯示而異。
有時您雖然顯示了網址列和導覽列,但有時這些工具列會完全收回。
可視區域的實際大小取決於工具列是否顯示。
新的可視區域單元 (例如 svhlvh) 可讓網頁開發人員更精細地控制行動裝置設計。詳情請參閱「大型、小型和動態可視區域單元」一文。

瀏覽器支援

  • 108
  • 108
  • 101
  • 15.4

JavaScript 中的深度複製

過去,為了在不參照原始物件的情況下建立物件的深層複本,常見的入侵方式是結合 JSON.stringifyJSON.parse。這可是 V8 (Chrome 的 JavaScript 引擎) 常見的入侵手法,大幅提升了這項技巧的效能。不過,你不用再參加 structuredClone 這個入侵活動了。

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

瀏覽器支援

  • 98
  • 98
  • 94
  • 15.4

資料來源

詳情請參閱「使用結構化副本在 JavaScript 中深度複製」。

:focus-visible 虛擬類別

網頁程式開發人員都十分熟悉,當您在使用鍵盤或點選輸入元素時,就會看到畫面上顯示的「聚焦環」。這是無障礙設計必備功能,但有時阻礙了不同使用者的視覺設計。:focus-visible CSS 虛擬類別會檢查瀏覽器是否認為應顯示焦點。你現在可以指定只有在焦點應顯示時才能指定樣式。

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

瀏覽器支援

  • 86
  • 86
  • 85
  • 15.4

資料來源

詳情請參閱「學習 CSS 知識」專區

TransformStream 介面

Streams API 的 TransformStream 介面可讓您將串流傳輸至另一個串流。

舉例來說,您可以從某個位置串流資料,然後在資料傳遞時將資料串流壓縮到其他位置。使用擷取 API 以串流方式提出要求一文,將逐步引導您瞭解這個使用案例。

瀏覽器支援

  • 67
  • 79
  • 102
  • 14.1

資料來源

總結

最近有更多功能可以互通且穩定地在網路平台上使用。我們日後會與 WebDX 社群群組合作,進一步釐清這些基準功能集。請前往 web.dev/baseline 查看後續詳細資訊。

如要掌握最新資訊,我們的團隊會在功能互通時發布文章,並每月發布有關網路平台的最新動態,包括實驗功能和全新互通性等。

我們隨時都想知道我們是否想要幫助您,或需要不同類型的支援,請透過 WebDX 社群群組與我們聯絡。