CSS 嵌套放宽语法更新

Chrome 120 中启用了先行嵌套。

Adam Argyle
Adam Argyle
X GitHub

今年早些时候，Chrome 在 112 版中推出了 CSS 嵌套功能， 。

浏览器支持

  • Chrome：120。 <ph type="x-smartling-placeholder">
  • 边缘：120。 <ph type="x-smartling-placeholder">
  • Firefox：117。 <ph type="x-smartling-placeholder">
  • Safari：17.2. <ph type="x-smartling-placeholder">

来源

不过，Google 对 语法（请参阅无效嵌套示例的第一篇文章）。 这篇后续文章将介绍规范以及 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 属性和值。

幸运的是，一位工程师发现，当解析器无法解析 将嵌套选择器定义为属性，它可能是 在假设有选择器而非属性的模式下重启。解析 确认该嵌套为选择器嵌套。速度足够快 以至于系统确定足以释放语法。