Chrome 112 新功能

Adriana Jara

以下是一些注意事項：

我是 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 版開始，如果使用者代理程式指出所有服務工作站的擷取事件監聽器均為免人工管理，服務工作處理程序就會從導覽重要路徑啟動，也不會從導覽關鍵路徑分派。

藉此加快這些網頁的導覽速度。

需要擷取處理常式，是網頁應用程式才能安裝的 PWA 規定之一。我們懷疑這可能是某些網站存在空白擷取處理常式的原因。不過，啟動 Service Worker 並執行免人工管理事件監聽器只會增加負擔，這不會帶來能透過適當的服務工作處理程序 (例如快取或離線功能) 帶來的任何好處。因此 Chrome 現在會略過這類項目，以便改善瀏覽體驗。

本次異動生效後，如果所有 Service Worker 的擷取事件監聽器都屬於免人工管理，Chrome 就會顯示控制台警告，並建議開發人員移除這些擷取事件監聽器。

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

還有更多獎品等著您！

當然，還有許多其他功能

  • document.domain 的 setter 現已淘汰。
  • WebView 對 X-Requested-With header 的淘汰進行來源試用
  • 開發人員工具中的錄音工具現在可以使用Pierce 選取器錄製影片。

延伸閱讀

這只涵蓋部分重要亮點。請點選下方連結查看 Chrome 112 的其他變更。

訂閱

歡迎訂閱 Chrome Developers YouTube 頻道， 每次推出新影片時，您都會收到電子郵件通知。

我是 Adriana Jara，Chrome 113 一推出後，我將立即通知您 告訴你 Chrome 的新功能！