瞭解 Baseline 的部分功能。
發布日期：2023 年 5 月 10 日
網路世界不斷演進，瀏覽器也持續更新，為開發人員提供新的工具，讓他們在平台上進行創新。先前需要輔助程式庫的功能，現在已成為網頁平台的一部分，並且在所有瀏覽器上皆可使用，同時提供更簡短或更簡單的方式編寫設計元素。
雖然不斷演進和調整很有幫助，但也可能造成混淆。要瀏覽所有更新資訊可能不容易。身為開發人員，我們有許多疑問，例如：「所有瀏覽器引擎何時會支援這項新功能？」「何時可以實際開始在正式版程式碼中使用這些功能？」「我們應該支援舊版瀏覽器多久？」
正確答案是「視情況而定」。您需要什麼、可以使用什麼，取決於您的使用者群、技術堆疊、團隊架構和支援的裝置。不過，我們都同意，目前的網路環境可能會讓我們難以做出這些決定。
Chrome 團隊正在與其他瀏覽器引擎和網路社群合作，以提供更清楚的資訊。這包括我們在Interop 2023 等專案中的工作，有助於改善一系列重要功能的互通性。但過去幾年推出的功能呢？我們在兩年前學到的實驗功能是否已可使用？
在這篇文章中，我想強調一些目前可供所有主要瀏覽器引擎在過去兩個主要版本中使用的功能。我們認為，如果開發人員認為某項功能安全無虞，就會達到這個門檻，而我們稱這項功能為「基準」。詳情請參閱這篇關於 Baseline 的公告。
對話方塊元素
<dialog> 元素是新的 HTML 元素，可用於建立對話方塊提示，例如彈出式視窗和模式視窗。
如要使用此方法，請定義模態元素，然後在對話方塊元素上呼叫 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;
}
如需這項變更的詳細說明，請參閱「使用個別轉換屬性，更精細地控管 CSS 轉換」。
新的可視區域單位
在行動裝置上，可視區大小會受到是否有動態工具列的影響。有時會顯示網址列和導覽工具列，但有時這些工具列會完全收起。可視區域的實際大小會因工具列是否顯示而異。svh 和 lvh 等新的視區單元可讓網頁開發人員在為行動裝置設計時，進一步控管視區。如需更多資訊，請參閱「大、小和動態視區單位」一文。
在 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);
詳情請參閱「使用 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;
}
詳情請參閱 CSS 學習課程的「重點」一節。
TransformStream 介面
Streams API 的 TransformStream 介面可讓您將資料流管道傳送至另一個資料流。
舉例來說，您可以從某個位置串流資料，然後在傳遞資料時將資料串流壓縮到其他位置。本文「使用 fetch API 串流傳送要求」會逐步說明這個示例用途。
總結
許多功能最近已在網頁平台上實現互通性，並可穩定使用。日後，我們將與 WebDX 社群群組合作，進一步說明這些基準功能組合。如要瞭解最新進展，請參閱基準頁面。
如要隨時掌握最新消息，我們的團隊會在功能可互通時發布文章，並每月更新網頁平台的最新消息，從實驗功能到新推出的互通功能。
我們很想知道我們的服務是否對您有所幫助，或您是否需要其他類型的支援，歡迎前往 WebDX 社群群組與我們聯絡。