目前可用的基準功能

瞭解 Baseline 的部分功能。

Mariko Kosaka

網路世界不斷演進，瀏覽器也持續更新，為開發人員提供新的工具，讓他們在平台上進行創新。以往需要輔助程式庫的項目會成為網路平台的一部分，並在所有瀏覽器中都支援，而編寫元素的程式碼設計元素也更短或更簡單。

雖然不斷演進和調整有助於改善服務，但也可能造成混淆。瀏覽所有更新資訊可能會很困難。身為開發人員，我們有許多疑問，例如：「所有瀏覽器引擎何時會支援這項新功能？」「何時可以實際開始在正式版程式碼中使用這些功能？」「我們應該支援舊版瀏覽器多久？」

正確答案是「視情況而定」。您需要什麼、可以使用什麼，取決於您的使用者群、技術堆疊、團隊架構和支援的裝置。不過，我們都同意，目前的網路環境可能會讓我們難以做出這些決定。

Chrome 團隊正在與其他瀏覽器引擎和網路社群合作，以提供更清楚的資訊。這包括我們在Interop 2023等專案中的工作，有助於改善一系列重要功能的互通性。但過去幾年推出的功能呢？我們在兩年前學到的實驗功能是否已可使用？

在這篇文章中，我想強調一些目前可供所有主要瀏覽器引擎在過去兩個主要版本中使用的功能。我們認為，如果開發人員認為某項功能安全無虞，就會達到這個門檻，而我們稱這項功能為「基準」。詳情請參閱 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 轉換」。

新的可視區域單位

在行動裝置上，可視區域的大小取決於是否有動態工具列。
有時您會看到網址列和導覽工具列，但有時這些工具列會完全收起。
視工具列是否可見而定，可視區域的實際大小會有所不同。
svh 和 lvh 等新的視窗單位可讓網頁開發人員在為行動裝置設計時，進一步掌控視窗大小。如需更多資訊，請參閱「大、小和動態視區單位」一文。

瀏覽器支援

• 108
• 108
• 101
• 15.4

在 JavaScript 中進行深層複製

過去，如果要建立物件的深層複本，且不參照原始物件，就必須使用 JSON.stringify 與 JSON.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

資料來源

詳情請參閱「使用 structuredClone 在 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 介面可讓您將串流串連至另一個串流。

舉例來說，您可以從某個位置串流資料，然後在傳遞資料時將資料串流壓縮到其他位置。本文「使用 fetch API 串流傳送要求」將逐步說明這個示例用途。

瀏覽器支援

• 67
• 79
• 102
• 14.1

資料來源

總結

許多功能最近已在網頁平台上實現互通性，並可穩定使用。日後，我們將與 WebDX 社群群組合作，進一步說明這些基準功能組合。如要瞭解最新詳情，請造訪 web.dev/baseline。

如要隨時掌握最新消息，我們的團隊會在功能可互通時發布文章，並每月更新網頁平台的最新消息，從實驗功能到新推出的可互通功能。

我們很想知道我們的服務是否對您有所幫助，或您是否需要其他類型的支援，歡迎前往 WebDX 社群群組與我們聯絡。