WebGL Tutorial
and more

CSS前沿阵地

撰写时间:2024-03-09

修订时间:2024-03-15

CSS Nesting Module

CSS Nesting Module 目前虽尚处于Working Draft阶段,但已成为Baseline 2023,即2023年,各主流浏览器均已经支持。访问https://caniuse.com/查看当前主流浏览器支持该特性的细节。

Safari V17版本中,其作为功能标志是默认打开的,且已处于稳定的状态。

div.nested { background: #333; & div { margin: 0.5em; border: 1px solid gray; > p { padding: 0.2em 1em; color: yellow; } > p > span { color: lightgreen; } } }

Hello, CSS Nesting.

Another div, which is a common one.

如果上面的Hello, CSS Nesting.显示为彩色,说明您的浏览器支持该特性。否则,说明您所使用的浏览器已经落伍了。

目前发现在安卓手机上所使用的默认的浏览器,不支持的情况可能较多。原因是默认浏览器所选用的内核可能不支持,或内核版本可能过低。

但作为普通用户,他们并非技术人员,并不了解此点。色盲往往并不知道自己是色盲,并不知道自己眼中的世界与别人眼中的世界有天壤之别。这才是最致命的。

普通用户没有任何过错。错的是挂羊头卖狗肉的浏览器的无良开发商及维护商,往往标榜自己开发的浏览器有多厉害。但实际上,首先,他根本没有自己开发浏览器,而是直接使用了别人开发的内核,然后大力进行外饰包装。这还不要紧,他们甚至懒得及时更新自己浏览器的内核版本。

现在世界上真正在开发并升级、维护浏览器的,只有以下几家:

  1. Google的Chrome
  2. Mozilla的Firefox
  3. Apple的Safari
  4. 被奇虎360及昆仑万维所收购的Opera

而微软的Edge,使用的是Google开源的Chromium。

此技术真的是太香了。鉴此,本站开始使用。

更多细节,请访问W3CCSS Nesting Module

参考资源

  1. W3C: CSS Nesting Module
  2. caniuse.com
  3. The Chromium Projects