哇，我没想到会这样！HTTP Archive 发布了这份名为 Web Almanac 的大型“网络现状”报告，邀请客座作者探索来自 580 万个网站的数据。
Una Kravetz 和 Adam Argyle 撰写了 CSS 章节。其目的是从大量数据中提取易于理解的见解。所以，我在这里分享我对这一章节的想法，以期更快速地阅读，这本身也具有一定的讽刺意味，但无论如何，让我们开始吧。
- **83% 的网站使用了
rgba()，但只有 22% 使用了rgb()。**在我看来，这完全说得通，因为如果您问我，rgb()并不是一个特别有用的颜色格式。正是“a”（alpha）赋予了该格式控制透明度的能力，而这种能力直到最近才在最流行的格式十六进制中以 8 位十六进制代码 的形式可用。但即使这样，它也不如rgba()好用。hsla()可以说是最好的颜色格式。 - **白色和黑色毫无疑问是最流行的两种命名颜色。**我经常使用它们，而且是直接使用名称。我甚至会修改 CSS 提交，使用
white代替#FFF，使用black代替#000，因为我认为这样可以减少认知负担。 - **
em的流行度是rem的两倍。**哇。我自己更喜欢rem，因为它不太挑剔，而且更易预测。理论上，我仍然喜欢 根元素使用 px，组件使用 rem，文本元素使用 em 的想法，但我并不确定自己是否曾干净利落地实现过。 - **类是选择器类型中当之无愧的领导者。**考虑到使用数量，它们比其他任何选择器都领先 10 倍以上。我很高兴看到这一点。它们具有低但不至于太低的特异性值。它们拥有用于操作它们的良好 API。它们的全部用途就是充当样式挂钩。它们与元素无关。这正是进行样式设置的正确方法。样式越扁平，遇到的麻烦就越少。更让我惊讶的是，每个元素的平均类数为 1。不过，我真的很想知道小数部分。是 1.1？1.4？1.00001？
- **天啊。Flexbox 用于一半的网站，而 Grid 仅用于 2%？！**浏览器支持并没有那么大区别。我非常清楚它们都非常有用，可以一起使用，并且用于不同的目的，但我发现 Grid 通常更有用，并且个人使用它的频率比 Flexbox 高。
- **我原本以为网站上加载字体的中位数平均值为 0，但实际上是 3！**我认为 CSS-Tricks 只有一个（在撰写本文时是 Rubik，仅用于标题。本网站的正文字体是
system-ui。）但实际上是 4，因为预加载、子集以及粗体与常规字体等。我想知道可变字体何时会开始产生影响。我认为它会随着时间的推移降低这个数字。Open Sans 和 Roboto 的使用频率是其他任何加载字体的三倍，整个列表都是 Google 字体，除了 Font Awesome 的一些实例。 - **有趣的是，一些主要的库可以在全球/通用范围内扭曲某些功能的使用统计数据。**我记得 YouTube 的播放按钮过去是如何使用名为 SMIL 的 SVG 技术“变形”为暂停按钮的。但由于 YouTube 的规模非常庞大，因此看起来互联网流量中有很大一部分包含 SMIL，而实际上只是一些网站上单个按钮。
filter也出现在了报告中。虽然滤镜很酷，但实际上它恰好位于 YouTube 嵌入和 Font Awesome 的样式表中，因此使用它的网站比例（78%）看起来非常惊人。 - **在大量使用过渡和动画的页面中，过渡的使用频率大约是动画的两倍，但过渡在第 50 个百分位数的使用频率是动画的六倍。**在我看来，这感觉很合理。过渡通常更有用，但是动画越多，您就越需要使用高级工具，例如关键帧。
- **看起来大多数网站大约有 45 个媒体查询。**目前尚不清楚这些是不同的媒体查询，还是在样式表中的其他位置重复的相同媒体查询。如果它们都是不同的，那似乎有点多，因此我怀疑这只是一个工具问题，人们使用嵌套媒体查询来提高编写清晰度，它们会冒泡出来，但不会合并，因为这在特异性方面太奇怪了。我很想知道人们使用了多少个唯一的媒体查询。对我来说，媒体查询数据最引人入胜的一点是
min-width和max-width的使用率不相上下。如果让我猜测，我会认为max-width会远远领先。 - **每个网站大约有 6 个样式表。**这可能很难判断，因为此类资源通常托管在 CDN 上，但我真的很想知道有多少是为网站手动编写的，有多少来自第三方。分配比例是 3 比 3 还是 1 比 5？
报告 中还有更多内容，而 CSS 只是 20 个章节中的一个。所以，快去挖掘吧！
很有趣。我想知道如果将不使用工厂（A/V/R）的人员分离出来，这些统计数据会如何变化。我今天晚些时候必须阅读一下。
嗯——SMIL 不是“SVG 技术”——它本身就是一项技术——在 SVG 中使用它是由于 XML 中的 X：）
哦，酷！您还能在哪些其他方面使用 SMIL？
我没有看到太多 SMIL 的使用——其中有一些想法，例如 svg 中的 [switch]、css 动画或 VTT 中的内容——这确实是 SMIL 风格的；我们无法使用它，因为没有浏览器实现过它——这并不是什么损失——所有内容都可以用 js 重现
嗯，这不是很明显吗？
Flex在大多数列表中都很有用，而grid更多的是特定的布局内容。使用grid创建一个随内容扩展的灵活布局比使用flexbox复杂得多。Grid依赖于定义的框，而flexbox主要均匀地分布内容。是的，这些说法都是正确的。听起来您认为“均匀分布内容”是比 Grid 所做的其他事情更受网站需求的功能。好的。我认为正好相反。虽然说真的，我无法想象在没有两者的情况下构建大多数网站。
大多数情况下，我认为更多的人只是更了解 Flexbox，因此它的使用率更高。
对我来说，是 IE11 的中等支持让我无法使用 Grid。
我认为 Flexbox 比 Grid 使用得多的一个原因是支持问题。如果您必须支持 IE，Grid 就会变得非常痛苦。
但是当我看到人们使用 Flexbox 来居中一个单一的
<div />时，我感到更加痛苦。我还认为还有两三个其他因素至少会产生一些影响
与 Flexbox 相比，Grid 有点难。我们可能会争辩说它并不差，而且围绕 Grid 的学习资料确实很棒。但是，从二维到三维的转变存在概念上的飞跃，加上新的语法（以及有人提到的 IE11 的中等支持），学习和实施比任何可感知的益处都需要付出更多努力。
Bootstrap 尚未支持它。基于 Flexbox 的网格系统的丰富性使得实现 Grid 变得轻而易举，尤其是因为网格类与之前的基于 960/1140 的网格系统几乎是一一对应的，因此过渡非常容易。
大多数网站不需要它。事实上，我仍然认为网站设计的向下压力降到了单列。对于大多数人来说，在移动设备上表现出色比在大屏幕上整洁更重要，因此这就是能量所在。
我不知道 Grid 是否真的会比现在获得更多采用，除非一个主要框架（Bootstrap 5？）将其作为其布局系统的默认设置。
em使用得更多是因为浏览器支持的时间更长。当然，rem更容易，这就是它被发明的原因！从数量上看，可以安全地推测“45 个媒体查询”指的是 45 个查询，可能是在 sass 生成的文件中，而不是 45 个断点。