CSS 巢狀結構放寬語法更新

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

Adam Argyle
Adam Argyle

今年稍早,Chrome 於 112 年推出 CSS 巢狀結構, 目前支援 Google 的各大瀏覽器

瀏覽器支援

  • 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 屬性和值

幸好有工程師發現,剖析器無法剖析 如同一般使用票證,巢狀選取器可以合併為屬性 重新啟動時,會假設使用選取器而非屬性。剖析 繼續,並確認巢狀為選取器巢狀結構。速度夠快 因為這個問題足以發表這個語法。