CSS 巢狀結構放寬語法更新

在 Chrome 120 中啟用類似巢狀結構。

Adam Argyle
Adam Argyle
X GitHub

今年稍早，Chrome 在 112 推出了 CSS 巢狀結構，現在在每個主要瀏覽器中都支援這項功能。

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：117。
  • Safari：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 屬性和值。

幸運的是，工程師發現，當剖析器無法如一般使用傳遞，將巢狀選取器剖析為屬性時，可能會以假設選取器 (而非屬性) 的模式重新啟動。剖析，確認巢狀結構為選取器巢狀結構。這項功能速度快且可靠，因此我們決定釋出這項語法。