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

Chrome 112 新功能

Adriana Jara

以下是一些注意事項：

CSS 現在支援巢狀規則。
<dialog> 元素中用來設定初始焦點的演算法已更新。
服務工作者上的無操作 fetch() 處理常式將從現在起略過，以加快導覽速度。
還有許多其他功能。

我是 Adriana Jara一起來深入探索 Chrome 112 為開發人員提供的新功能。

CSS 支援巢狀結構。

我們最喜愛的 CSS 前置處理器功能之一現在已內建於語言中：巢狀樣式規則。

在建立巢狀結構之前，需要明確宣告每個選取器，彼此之間都必須分開宣告。這會導致重複、大量的樣式表單，以及零散的撰寫體驗。

之前

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

巢狀後，您可以繼續使用選取器，並將相關樣式規則分組。

使用後

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

巢狀結構可協助開發人員減少不必要的選取條件，同時為相關元素並置樣式規則。這也能讓樣式與指定的 HTML 相符。

如果範例中的 .nesting 元件已從專案中移除，您可以刪除整個群組，而不是搜尋相關選取器執行個體的檔案。

巢狀結構可協助您：

彙整：
縮減檔案大小。
重構。

請參閱這篇文章，瞭解如何充分運用 CSS 巢狀結構，並在 devtools 中查看巢狀結構的支援資訊，請參閱這裡。

`<dialog>` 初始對焦的演算法更新。

HTML <dialog> 元素是用來表示對話方塊或其他互動元件的標準化方式，例如可關閉的快訊或子視窗，需要顯示在網頁中所有其他內容上方。

這個 HTML 元素是建立這類內容的建議方式，因為其功能可提供更佳且一致的可用性和無障礙性。

其中一個功能是處理開啟對話方塊時，系統要將焦點放在哪個元素上，這個版本已更新選取該元素的演算法。

從現在起：

對話方塊聚焦步驟會查看鍵盤可聚焦的元素，而非任何可聚焦的元素。如果 <dialog> 元素設有自動對焦屬性，則該元素本身會取得焦點

<dialog> 元素本身會將焦點做為備用選項，而不會將焦點「重設」至 <body> 元素。

如要進一步瞭解 <dialog> 元素，請參閱說明文件。

略過 Service Worker 的免人工管理擷取處理常式。

從 Chrome 112 開始，如果使用者代理程式指出所有服務工作的擷取事件監聽器都是無操作，系統就會略過服務工作的啟動，並從導覽關鍵路徑中調度事件監聽器。

這項功能可加快這些頁面的瀏覽速度。

需要擷取處理常式，是網頁應用程式才能安裝的 PWA 要求之一。我們懷疑這可能是部分網站基本上有空的擷取處理常式的原因。不過，啟動服務工作站並執行無操作事件監聽器只會造成額外負擔，無法帶來任何好處，因為這些功能可透過適當的服務工作站實作，例如快取或離線功能。因此 Chrome 現在會略過這類項目，以便改善瀏覽體驗。

在這個變更中，如果所有服務工作的擷取事件監聽器都是無操作，Chrome 就會顯示控制台警告，並鼓勵開發人員移除這些擷取事件監聽器。

開發人員工具中顯示空白 Service Worker 擷取處理常式的警告。

還有更多獎品等著您！

當然，還有許多其他功能。

document.domain 的 setter 現已淘汰。
WebView 中的 X-Requested-With header 已淘汰，目前提供來源測試
開發人員工具中的錄製器現在可以使用穿透選取器錄製。

延伸閱讀

這份報告僅涵蓋部分重點。如要瞭解 Chrome 112 的其他異動，請參閱下列連結。

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Adriana Jara，Chrome 113 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！