Chrome 120 中启用了先行嵌套。
今年早些时候,Chrome 在 112 中推出了 CSS 嵌套,现在,它已内置于各大主流浏览器中。
不过,无效嵌套示例的第一篇文章中列出了该语法有一项严格要求,而且这些要求可能不尽人意。本后续文章将介绍从 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 属性和值。
幸运的是,工程师发现,当解析器未能按照正常的使用传递将嵌套选择器解析为属性时,该选择器可能会在假定选择器而不是属性的模式中重启。解析会恢复,并将嵌套确认为选择器嵌套。它足够快速、可靠,已确定足够高的速度来发布语法。