Chrome 120 中启用了先行嵌套。
今年早些时候,Chrome 在 112 版中推出了 CSS 嵌套功能, 。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<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
属性和值。
幸运的是,一位工程师发现,当解析器无法解析 将嵌套选择器定义为属性,它可能是 在假设有选择器而非属性的模式下重启。解析 确认该嵌套为选择器嵌套。速度足够快 以至于系统确定足以释放语法。