审查 CSS 片段
格式化 CSS 片段,复制 CSS 审查报告,再检查压缩和颜色对比。
- 1. CSS
格式化片段并复制包含 selector、token、cascade、specificity 和清单信号的报告。
- 2. CSS Min
若要共享压缩 CSS,请检查压缩率、注释移除和 minify 审查报告。
- 3. Color
当片段改变前景或背景颜色时,用 WCAG 对比标准检查 color token。
压缩 CSS,移除注释和多余空白,用于快速检查压缩结果。
输入 / 输出
输入、输出和复制操作集中在这个主区域。示例和检查内容放在下方。
本地会话
输入状态只保存在此浏览器中,可在无账号时恢复上次工作区。
完成主要输入/输出流程后,再打开需要的示例、检查清单和相关工具。
审查 CSS 片段
格式化 CSS 片段,复制 CSS 审查报告,再检查压缩和颜色对比。
格式化片段并复制包含 selector、token、cascade、specificity 和清单信号的报告。
若要共享压缩 CSS,请检查压缩率、注释移除和 minify 审查报告。
当片段改变前景或背景颜色时,用 WCAG 对比标准检查 color token。
复制前检查
常见失败情况
相关工具
指南
完成主要输入/输出流程后,再打开需要的示例、检查清单和相关工具。
.card { display: flex; gap: 16px; color: #111; }/* handoff note */ @media (min-width:768px) { .grid { display:grid; } }#hero .title { color: rgb(10, 20, 30); }CSS 示例
Selector block
1
声明数
2
Media query
0
输出行数
1
复制前检查选择器、取值、@ 规则和压缩后大小。
自定义属性
0
未检测到自定义属性。
颜色值
1
#111
@ 规则
0
未检测到 @ 规则。
压缩率
16%
移除空白和注释后的预估减少比例。
选择器预览
片段中最先发现的选择器。
CSS 审查报告
复制包含 selector、token、cascade、specificity、压缩、警告和清单信号的交接报告。
输出模式
压缩
Selector block
1
.card
声明数
2
自定义属性
0
未检测到自定义属性。
颜色值
1
#111
@ 规则
0
未检测到 @ 规则。
重复选择器
否
ID 优先级风险
否
包含注释
否
压缩率
16%
审查备注
审查清单
# CSS 审查报告 - 检查时间: 浏览器复制时间 - 输出模式: 压缩 - 字符: 37 - 输出行数: 1 - Selector block: 1 - 声明数: 2 - 自定义属性: 0 - 颜色值: 1 - @ 规则: 0 - 重复选择器: 否 - ID 优先级风险: 否 - 包含注释: 否 - 压缩率: 16% - 原始 CSS 不包含在此报告中;需要时另附已脱敏片段。 ## 审查备注 - 此轻量 formatter 适合小片段。大型 stylesheet 提交前请运行项目 formatter。 ## 审查清单 - 发布前在目标 breakpoint、theme 和 browser 中测试 CSS。 - 确认选择器顺序、重复选择器和 specificity 符合预期 cascade。 - 复制前将自定义属性和颜色 token 与设计系统比较。 - 压缩或粘贴到文档时保留许可证和交接注释。 - 提交大型 stylesheet 变更前运行项目 formatter 或 build pipeline。
可复制输出
.card{display:flex;color:#111;}