以下是一些注意事項：
- 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 就會顯示控制台警告，並鼓勵開發人員移除這些擷取事件監聽器。
還有更多獎品等著您！
當然，還有許多其他功能
document.domain的 setter 現已淘汰。- WebView 中的
X-Requested-With header已淘汰，目前提供來源測試 - 開發人員工具中的錄音工具現在可以使用Pierce 選取器錄製影片。
延伸閱讀
這份報告僅涵蓋部分重點。如要瞭解 Chrome 112 的其他變更，請點選下方連結。
- Chrome 開發人員工具新功能 (112)
- Chrome 112 淘汰與移除措施
- Chrome 112 適用的 ChromeStatus.com 更新
- Chromium 來源存放區變更清單
- Chrome 發布時程表
訂閱
如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。
我是 Adriana Jara 當 Chrome 113 推出後，我會在這裡與您分享 Chrome 的新功能