直接答案:25 站中 11 站使用 CSS 自定义属性,共 548 个变量名、856 次 var() 引用;0 站在采样 CSS 里出现 prefers-color-scheme 或 color-scheme;1,159 个 @media 显示响应式仍以断点为主。E24 用 40 个变量完成 511 次引用,而 E25 声明 17 个变量却一次未用;E23 是 83 个变量、79 次引用。14 站完全没有 CSS 变量。
本文只读 CSS 文本,不执行脚本;用 JS 切换 class 的暗色模式不在统计内。
方法:HTML 内联样式 + 前 3 个外链 CSS
2026-11-09 12:41–12:45,对第 4 期 25 个缓存 200 首页实时请求 HTML,读取内联 <style> 与前 3 个外链 CSS;去掉注释后统计自定义属性声明(按名称去重)、var(--…) 引用、prefers-color-scheme、color-scheme 与 @media 数量。只读 CSS,不渲染。
| 口径 | 判定 | 边界 |
|---|---|---|
| 变量声明 | --name:,同名只计一次 | 不判断是否被引用 |
| var() 引用 | var(--…) 出现次数 | 不解析回退值 |
| 暗色模式 | prefers-color-scheme 或 color-scheme | JS class 切换不计 |
| @media | 所有 @media 块 | 不区分尺寸、打印或偏好 |
结果:变量有了,暗色模式没有
| 指标 | 数量 | 站点数 |
|---|---|---|
| 使用 CSS 变量的站点 | — | 11 |
| 变量声明(按站去重后合计) | 548 | 11 |
| var() 引用 | 856 | 11 |
| 声明了变量但 0 次引用 | 17 | 1 |
| prefers-color-scheme / color-scheme | 0 | 0 |
| @media | 1,159 | 24 |
| 站点 | 变量 | var() 引用 | @media |
|---|---|---|---|
| E24 | 40 | 511 | 73 |
| E23 | 83 | 79 | 87 |
| E03 | 73 | 55 | 96 |
| E06 | 69 | 55 | 53 |
| E09 | 73 | 45 | 71 |
| E14 | 73 | 45 | 116 |
| E22 | 73 | 46 | 99 |
| E17 | 27 | 4 | 207 |
| E12 | 15 | 4 | 14 |
| E08 | 5 | 12 | 0 |
| E25 | 17 | 0 | 5 |
变量的使用深度差别很大:E24 一个站就有 511 次引用,说明颜色与间距已收进变量层;E25 的 17 个变量一次未用,更像复制模板后留下的空壳。E17 有 207 个媒体查询,却只声明 27 个变量、引用 4 次,响应式主要靠逐条断点,而不是令牌。
暗色模式则是空白:25 站没有一处 prefers-color-scheme 或 color-scheme。这不等于所有站都没有暗色皮肤——可能由 JS 切 class 或未采样的样式表实现——但在 CSS 偏好层没有任何声明,意味着“跟随系统”这一最省事的路径没有被使用。
对验收的启示
- 先建最小令牌层。 至少覆盖品牌色、正文色、背景、间距与字号;11/25 站已有,14 站完全没有。
- 把暗色模式写进 CSS。 0 站使用 prefers-color-scheme;优先做系统跟随,再加手动切换。
- 清理死变量。 E25 声明 17 个、引用 0 次;死令牌会让主题层看起来完整,实际没有生效。
- 暗色下测对比度。 变量存在不代表对比度达标;切到暗色逐页检查正文、按钮、图片与表单。
- 断点与色彩偏好分开验收。 1,159 个 @media 说明响应式有投入,但颜色偏好是另一张清单。企业官网验收可参考网站建设服务。
局限
- 只取前 3 个外链 CSS:变量与暗色规则可能在未采样的样式表中,总数是下限。
- 不执行 JS:用脚本切换主题、动态注入 CSS 变量的实现看不到。
- 变量按名称去重:同名不同值的覆盖关系未解析。
- 边界:E17 只有 1 个外链 CSS,E18/E20 未取到,E25 全部为内联样式。
- 25 站 pilot:同一批装备企业样本,不外推行业。
数据与复算
匿名数据:equipment-homepage-design-tokens-2026.csv(25 行 × 10 列:CSS 文件/体积、变量、var() 引用、暗色查询、@media 与时间)。仓库内为 docs/research/2026-11-homepage-design-tokens.csv。
解析:scripts/design_token_probe.py;单元测试 scripts/test_content_design_token_probe.py(6 项,无网络)。运行:
python -m unittest scripts.test_content_design_token_probe
数据来源与口径
- 样本:第 4 期 25 个缓存为 200 的首页。
- 抓取:2026-11-09 12:41–12:45 Asia/Shanghai,串行,站间 0.5 秒,超时 15 秒。
- 样式:内联
<style>+ 前 3 个外链 CSS;去注释后计数。 - 口径:变量按名称去重;暗色模式查 prefers-color-scheme 与 color-scheme;@media 全量计数。
常见问题
0 站支持暗色模式,等于都没有吗?
不能这样下结论。本文只查 CSS 里的 prefers-color-scheme 与 color-scheme;用 JS 切 class 或放在未采样的样式表里都看不到。
CSS 变量越多越好吗?
不是。要看引用率:E25 声明 17 个变量却 0 次使用,E24 是 40 个变量、511 次引用,后者才真正形成了主题层。
CSS 变量带来什么?
把品牌色、间距、字号收在一处,换主题或做暗色模式时不用逐条覆盖;也让 !important 的需求下降。
为什么媒体查询这么多?
25 站共 1,159 个 @media,响应式布局仍主要靠断点;但颜色偏好没有跟上,暗色模式几乎缺席。
暗色模式怎么验收?
在系统里切到暗色,逐页检查背景、文字、图片、表单与图标的对比度,并确认手动切换可用,而不是只看变量是否存在。
数据能复核吗?
可以。公开 CSV 25 行 × 10 列;scripts/design_token_probe.py 有 6 项离线单测。