本頁面由 Cloud Translation API 翻譯而成。

目前可用的基準功能

僅瞭解 Baseline 的部分功能。

Mariko Kosaka

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

雖然這個不斷的演進和適應是很實用的做法，但也可能令人混淆。要瀏覽所有更新內容並不容易。開發人員向我們提出以下問題：「所有瀏覽器引擎何時會支援這項新功能？」「何時可以開始在正式版程式碼中使用這些功能？」「我們支援舊版瀏覽器多久？」

正確答案是「取決於」。需要的項目以及實際可用功能，取決於使用者族群、技術堆疊、團隊架構和支援的裝置。不過，我們都認同的重點是，網路目前的環境可能會讓人難以做決定。

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)，可讓網頁開發人員更精細地控管行動版網站。詳情請參閱「大型、小型和動態可視區域單元」。

瀏覽器支援

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 介面可讓您將串流串連至另一個串流。

舉例來說，您可以從某個位置串流資料，然後在系統傳送資料時，將資料串流壓縮至其他位置。如要瞭解這個使用範例，請參閱「使用擷取 API 串流要求」一文。

瀏覽器支援

資料來源

總結

網路平台上還有更多功能現已開放互通且穩定。我們今後會與 WebDX 社群群組合作，進一步說明這些基準功能集。如需持續詳細資料，請前往 web.dev/baseline。

如果您想即時掌握最新消息，YouTube 團隊會在功能可互通時發布相關文章，並每月發布最新消息，掌握網路平台動態 (包括實驗功能和新近可互通的議題)。

我們不曉得該如何助您一臂之力，或是您需要其他支援，歡迎隨時透過 WebDX 社群群組與我們聯絡。

目前可用的基準功能

對話方塊元素

個別 CSS 轉換屬性

新增可視區域單元

JavaScript 中的深層連結

:focus-visible 虛擬類別

TransformStream 介面

總結

`:focus-visible` 虛擬類別