2024年：CSS在过去十年的总和还要多

撰写文章时，我经常会意外地深入一些与主题略微相关的有趣话题。最终，我不得不忍痛删除或存档数小时的研究和写作成果，因为我知道大多数读者点击文章时，都对内容有所预期，而我的那些与CSS无关的随笔显然不符合预期。

这种情况在我撰写周一关于At-rules的文章时就发生了。我原本只是专注于几种测试浏览器对CSS At-rules支持的方法。在此过程中，我开始意识到，哇，我们现在有这么多新的At-rules——我想知道今年有多少是新增加的。这就是我完成手头文章后掉入的兔子洞。

结果证明我的直觉是对的：2024年新增的At-rules数量超过了过去十年CSS的总和。

这一切都始于我自问：为什么@supports At-rule有了selector()包装函数，却还在等待at-rule()版本？我无法确定确切的原因，但我确信检查At-rules的支持性需求并不迫切，因为，嗯，那时At-rules并不多——直到最近，我们才迎来了At-rules的井喷式增长。

一些历史背景

大约在1998年CSS 2推荐发布时，@import和@page是唯一进入CSS规范的At-rules。这种情况一直持续到2011年CSS 2.1推荐引入了@media。当然，还有一些其他的At-rules，例如@font-face、@namespace和@keyframes等等，它们已经在各自的模块中首次亮相。这时，CSS放弃了语义版本控制，规范并没有呈现整体情况，而是按功能组织的各个模块。

题外话：最新的已接受的共识认为我们处于“CSS 3”阶段，但这已经是十年前的事了，一些人甚至说我们应该进入CSS 5阶段。无论我们处于哪个阶段，这都无关紧要，尽管这是一个正在讨论的话题。拥有一个命名的版本真的有用吗？

@supports At-rule于2011年在CSS条件规则模块第3级中发布——第1级和第2级并不正式存在，但指的是最初的CSS 1和2推荐。直到2015年，大多数浏览器才真正支持它，那时，现有的At-rules已经得到了广泛的支持。@supports只针对新的属性和值，旨在测试浏览器对CSS功能的支持，然后再尝试应用样式。

数据

截至今天，CSS中共有18个At-rules至少受到一个主要浏览器的支持。如果我们查看每个At-rule最初在CSSWG工作草案中定义的年份，我们可以看到它们都以相当稳定的速度发布：

但是，如果我们检查每年每个浏览器支持的At-rules数量，我们会发现浏览器活动存在巨大差异：

如果我们只关注主要浏览器发布每个At-rule的最后一年，我们会注意到2024年至今已经带来了惊人的七个At-rules！

我喜欢这样的思维实验。你正在研究的东西会导致对同一主题的研究；超出范围，但与主题相关。它可能不是你每天都会添加书签和参考的东西，但它是很好的谈资。至少，它证实了CSS发展迅速的感觉，就像自CSS 3首次发布以来从未见过的真正快速发展一样。

它也为我们拥有和不拥有的CSS功能提供了背景。最初没有at-rule()函数，因为那时At-rules很少。现在，我们新增加的At-rules数量超过了过去十年，因此，就在上周Chrome团队将该函数的状态从“新建”更新为“已分配”也就不足为奇了。

最后一点：我之所以会考虑At-rules，是因为我们已经更新了CSS Almanac，扩展它以包含更多CSS功能，包括At-rules。我正在努力完善它，你也可以通过成为客座撰稿人来提供帮助。

以上是2024年：CSS在过去十年的总和还要多的详细内容。更多信息请关注PHP中文网其他相关文章！