CSS 概览面板

在 Chrome DevTools 中，通过 Cmd+Shift+P → “CSS 概览”打开 CSS 概览面板。点击“捕获概览”即可分析当前页面的整个样式表。该面板会汇总颜色、字体、媒体查询和未使用的声明。

颜色部分会按类型列出页面 CSS 中使用的每个颜色值，包括十六进制值、红绿蓝值、命名颜色和渐变色标。点击某个颜色后，可以查看使用它的项目和属性，从而发现非预期的颜色差异以及颜色调色板的过度扩张。

字体部分会列出应用于页面的每种字体族、字体大小和字体粗细组合。它可以揭示字体栈回退、突出显示不一致的字号层级，并显示每种组合应用于哪些项目。

媒体查询部分会列出每条 @media 规则、其断点以及其中的声明数量。该概览可以揭示断点不一致的问题——在一个代码库中，团队有时会积累 15 个以上略有差异的断点值。

CSS 概览会标记由于优先级冲突或选择器不匹配而始终未被应用的声明。这不同于覆盖率分析——它无需用户交互来激活规则，就能发现始终被覆盖的规则。

该面板会突出显示相对于背景未达到 WCAG AA 或 AAA 对比度要求的文本颜色。点击对比度问题后，会在 DOM 中选中对应项目，因此无需使用其他工具即可轻松修复无障碍问题。

请在重大重新设计之后，或开始接手现有代码库时使用 CSS 概览。颜色摘要可以显示实现偏离设计令牌的程度。字体摘要则能在用户察觉之前揭示排版不一致。

请在同一应用的多个页面上运行 CSS 概览。比较这些页面的颜色和字体摘要，可以发现页面之间的偏差——某些组件的排版或颜色与其他页面中的对应组件不同。

请从 CSS 概览中导出颜色数据，并将其与设计令牌调色板进行比较。概览中存在但令牌调色板中没有的颜色，属于硬编码值，应转换为令牌引用，并移除这些独立值。

请列出 CSS 概览中的断点，识别重复值和近似重复值（例如不同开发者使用的 768px、769px 和 770px），将它们整合到设计系统的断点尺度中，并更新所有媒体查询，使其使用 CSS 自定义属性或 SCSS 变量。

CSS 概览会分析链接的样式表，但不会分析内联样式或运行时生成的样式。JavaScript 在初始渲染后添加的动态类可能不会出现。要完整覆盖动态样式，请结合覆盖率分析和手动检查。

CSS 概览可以检测哪类无障碍问题？

CSS 概览提供页面级审计，涵盖颜色、字体、媒体查询断点和对比度问题。请使用它检测设计偏差、调色板过度扩张、排版不一致和无障碍缺陷，避免这些问题积累成难以梳理且代价高昂的技术债务。