CSS 使用情况
按页面和样式表查看检查时使用的 CSS 大小及占比。本次未使用的样式可能在用户交互后或其他页面中使用。
在线 CSS 审计
了解页面加载了多少 CSS、检查时使用了哪些样式，以及哪些规则重复。颜色、字体、层叠和错误汇总在同一报告中。
结果格式
报告展示 CSS 来源、指标和信号
先查看 CSS 大小和使用情况，再检查颜色、字体、层叠及验证错误。
用于说明报告的示例数据。您页面的实际结果将在检测后显示。
样式表来源
比较外部样式表与页面内嵌样式。每个来源都提供大小及检查时已用和未用代码量。
| 来源 | 类型 | 使用率 | 未使用 |
|---|---|---|---|
| app.css | 外部 | 48 KiB / 72 KiB | 72 KiB · 60% |
| components.css | 外部 | 32 KiB / 8 KiB | 8 KiB · 20% |
| 内联样式 | 内联 | 6 KiB / 2 KiB | 2 KiB · 25% |
- 来源
- app.css
- 类型
- 外部
- 使用率
- 48 KiB / 72 KiB
- 未使用
- 72 KiB · 60%
- 来源
- components.css
- 类型
- 外部
- 使用率
- 32 KiB / 8 KiB
- 未使用
- 8 KiB · 20%
- 来源
- 内联样式
- 类型
- 内联
- 使用率
- 6 KiB / 2 KiB
- 未使用
- 2 KiB · 25%
先找到样式表来源和重复的声明，检查这些重复是否属于相同组件及状态。修改源代码后，重新检查并对比报告。
我们检查的内容
完整的 CSS 清单，而非泛泛建议
报告汇总样式来源和大小、代码使用情况、选择器优先级、重复声明、设计参数及验证错误。
体积和来源
我们收集 CSS 总大小、样式表来源数量，并分别统计内联和外部样式表。
选择器特异性
比较选择器特异性的最小值、平均值和最大值，了解影响规则优先级的权重。最复杂的选择器会单独列出。
重复声明与 !important
查看规则、选择器和声明数量，重复的属性与值组合，以及使用 !important 的示例。
媒体查询和前缀
我们显示最常见的媒体查询，并统计带供应商前缀的 CSS 属性：-webkit-、-moz-、-ms- 和 -o-。
颜色、字体、z-index 和错误
报告输出唯一颜色值、检测到的 font-family 值、数值 z-index 值以及 CSS 验证错误示例。
它是如何工作的
从 URL 到页面的完整 CSS 摘要
输入页面网址。Milten 会在浏览器中打开页面、收集样式表并生成报告，无需集成到构建流程。
加载页面并收集 CSS
报告列出检查的 URL、日期和样式来源，并将页面内嵌样式与外部样式表分开显示。
测量 CSS 使用情况和选择器优先级
查看已使用的 CSS 量、规则和声明数量，以及特异性最高的选择器。
构建用于 CSS 审查的表格
检查重复声明、!important、媒体查询、浏览器前缀、颜色、字体、层叠及 CSS 错误。
常见问题
关于 CSS 审计的常见问题
关于 CSS 使用情况、选择器优先级、!important、报告内容和检查时长的解答。
未使用的 CSS 如何影响速度？
浏览器在渲染页面前会下载、解析并应用 CSS。不必要的规则越多，首次渲染延迟的风险越高，界面也越难维护。
为什么要检查选择器特异性？
特异性有助于在 CSS 规则冲突时判断选择器优先级。特异性过高的选择器会增加后续修改的难度，因为覆盖它们需要更强的规则。
是否应该删除所有 !important 声明？
不是。!important 会改变声明的优先级，也可能是有意设置的。报告会指出值得调查的位置。替换前，请先检查层叠关系和组件状态。
报告中会包含哪些数据？
报告包含网址和日期、样式来源与大小、代码使用情况、选择器及特异性、重复声明、!important、媒体查询、浏览器前缀、颜色、字体、层叠及 CSS 错误。
页面检查需要多长时间？
单页检查通常不到一分钟。时长取决于资源数量、网络状况以及页面加载后稳定所需的时间。