僅瞭解 Baseline 中的部分功能。
網路瞬息萬變，瀏覽器也會不斷更新，為開發人員提供新的工具，讓他們能在這個平台上創新。之前必要的輔助程式庫部分將成為網路平台的一部分，並且支援所有瀏覽器。此外，編寫設計元素程式碼的方式也變得更簡單或更簡單。
這種不斷演變與適應的做法很有用，但也可能引起混淆。要瀏覽所有更新項目並不容易。身為開發人員，我們曾詢問過「所有瀏覽器引擎何時會支援這項新功能？」，「何時可以在正式版程式碼中開始使用這些功能？」「我們要支援多久才能使用舊版瀏覽器？」
答案是，答案是「視情況而定」。您的需求和可行性將取決於您的使用者族群、技術堆疊、團隊架構和支援的裝置。但我們也都同意，網路目前的情勢可能不利於做出決定。
Chrome 團隊正與其他瀏覽器引擎和網路社群合作，使內容更清楚。包括我們針對 Interop 2023 等專案所做的努力，以改善一組重要功能的互通性。但這幾年來推出的功能呢？大約兩年前，我們學到的實驗功能是否可供使用？
在這篇文章中，我想強調一下，在最近兩個主要瀏覽器版本中，所有主要瀏覽器引擎都能使用的功能。這是我們稱之為 Baseline 的功能集，我們認為大多數開發人員都會覺得某項功能安全無虞。詳情請參閱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) 可讓網頁開發人員更精細地控制行動裝置設計。詳情請參閱「大型、小型和動態可視區域單元」一文。
瀏覽器支援
- 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);
詳情請參閱「使用結構化副本在 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 介面可讓您將串流傳輸至另一個串流。
舉例來說，您可以從某個位置串流資料，然後在資料傳遞時將資料串流壓縮到其他位置。使用擷取 API 以串流方式提出要求一文，將逐步引導您瞭解這個使用案例。
總結
最近有更多功能可以互通且穩定地在網路平台上使用。我們日後會與 WebDX 社群群組合作，進一步釐清這些基準功能集。請前往 web.dev/baseline 查看後續詳細資訊。
如要掌握最新資訊，我們的團隊會在功能互通時發布文章，並每月發布有關網路平台的最新動態，包括實驗功能和全新互通性等。
我們隨時都想知道我們是否想要幫助您，或需要不同類型的支援，請透過 WebDX 社群群組與我們聯絡。