CSS 巢狀結構放寬語法更新

Chrome 120 已啟用預測巢狀結構。

Adam Argyle

今年稍早，Chrome 在 112 版推出了 CSS 巢狀結構，現在各大瀏覽器都已支援這項功能。

瀏覽器支援

• 120
• 120
• 117
• 17.2

資料來源

不過，語法有一個嚴格且可能出乎意料的要求，請參閱第一篇文章的無效巢狀結構範例。這篇後續文章將說明規格和 Chrome 120 的變更內容。

巢狀元素代碼名稱

在 CSS 巢狀語法的第一個版本中，最令人意外的限制之一，就是無法巢狀化純元素標記名稱。這項限制已移除，因此下列 CSS 巢狀結構有效：

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

當您巢狀排序、未排序或定義清單時，這會變得非常實用：

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

為什麼可以允許這種巢狀結構？

這要歸功於 Chrome 工程師的探索與原型設計，以及社群和 CSS 工作群組的期望。

我們對 CSS 剖析器能否學會區分標記名稱 (div) 和屬性名稱 (visibility) 有相當疑慮，因為剖析器目前沒有預先查看的概念。為了瞭解權杖是屬性，瀏覽器需要預先查看，看看 : 是否會在未知的權杖後面出現。因此，在原始規格中，使用 & 符號向瀏覽器指出後續內容是巢狀結構，而非一般 CSS 屬性和值。

幸運的是，工程師發現當剖析器無法依照一般使用途徑將巢狀選取器解析為屬性時，可以以假設為選取器而非屬性的模式重新啟動。剖析作業會繼續進行，並將巢狀結構視為選取器巢狀結構。這項功能速度快且可靠，因此我們決定釋出這項語法。