以下是一些注意事項：
- 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 巢狀結構。如需在開發人員工具中使用巢狀結構的支援，請參閱這篇文章。
更新「<dialog>」初始焦點的演算法。
HTML <dialog> 元素是表示對話方塊或其他互動元件的標準化方式，例如可以關閉的快訊或子視窗，這類元件必須顯示在網頁中所有其他內容上方。
建議您使用這個 HTML 元素來建立此類內容，因為其功能的設計宗旨在於提供更優質且一致的可用性和無障礙功能。
其中功能之一是處理對話方塊開啟時要聚焦的元素。在此版本中，選取該元素的演算法已更新。
從現在開始：
對話方塊的焦點步驟會查看鍵盤可聚焦的元素，而非任何可聚焦的元素。如果 <dialog> 元素已設定自動對焦屬性，其本身就會成為焦點
<dialog> 元素本身會成為備用元素，而不是將焦點「重設」至 <body> 元素。
如要進一步瞭解 <dialog> 元素，請參閱說明文件。
略過 Service Worker 免人工管理擷取處理常式。
從 Chrome 112 開始，如果使用者代理程式發現所有 Service Worker 的擷取事件監聽器皆為免人工管理，系統就會忽略從重要導覽路徑分派的事件監聽器。
這項功能可加快瀏覽網頁的速度。
要求擷取處理常式是網頁應用程式可安裝的 PWA 規定之一。我們懷疑某些網站主要的擷取處理常式為空白。不過，如果啟動服務工作處理程序並執行免人工管理事件監聽器只會帶來負擔，卻又不會帶來搭配合適的服務工作處理程序 (例如快取或離線功能) 帶來的效益。因此 Chrome 現在會略過這些內容，改善瀏覽體驗。
在本次異動中，如果所有 Service Worker 的擷取事件監聽器皆為免人工管理，Chrome 會顯示控制台警告，並鼓勵開發人員移除這些擷取事件監聽器。
還有更多獎品等著您！
當然還有許多其他事物。
document.domain的 setter 現已淘汰。- WebView 的
X-Requested-With header淘汰作業有來源試用 - 開發人員工具中的錄音工具現在可以使用Pierce 選取器錄製影片。
其他資訊
以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 112 的其他變更，請點選下方連結。
- Chrome 開發人員工具新功能 (112)
- Chrome 112 淘汰和移除
- 適用於 Chrome 112 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。
我是 Adriana Jara，Chrome 113 推出後，我將立刻為您介紹 Chrome 的新功能！