CSS 巢狀結構放寬語法更新

在 Chrome 120 版中啟用 Lookahead 巢狀功能。

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 Working Group 的渴望。

目前，我們能夠教導 CSS 剖析器，以區分標記名稱 (div) 和屬性名稱 (visibility)，因為剖析器目前並沒有任何概念。為瞭解權杖是屬性，瀏覽器需要提前檢查 : 是否遵循不明權杖。因此，在原始規格中，& 符號用於向瀏覽器指出後面接著的是巢狀結構，而不是一般的 CSS 屬性和值。

幸運的是，工程師發現若剖析器無法按照一般消耗傳遞將巢狀選取器剖析為屬性，則可能以假設是選取器 (而非屬性) 的模式重新啟動。剖析恢復作業，並以選取器巢狀形式確認巢狀結構。速度夠快且穩定可靠，足以足以釋出語法。