本文将向您介绍Chrome87开始支持的CSSOverviewPanel，以及如何更好地利用这个面板。通过CSSOverviewPanel，可以帮助我们：更准确（高保真）的还原设计稿，协助设计走查更好的精简我们的CSS代码，协助提升网站的可访问性，提升整体概览网站风格的清晰认识什么是CSSOverviewPanelCSSOverviewPanel直译为CSSOverviewPanel，这是从Chrome87开始支持的实验室功能。属于控制台下的一个TABDevTool：默认情况下，这个实验室功能是关闭的，也就是我们打开控制台是看不到的，那我们怎么打开呢？两种方式：DevTools设置下的Experiment菜单，EnableCSSOverview打开DevTools，通过Cmd+Shift+P调出CommandMenu，输入ShowCSSOverviewCSSOverviewPanel有什么作用？OK，打开CSSOverview后，进入你要审核的网站。点击按钮：几秒钟后，插件会分析当前页面的CSS，输出一个简单的报告（有点类似LightHouse）：这里我找了一张GIF图进行简单演示：如你所见，整个面板分为几个模块（下面我切到DevTool中文模式贴图展示）：1.OverviewSummary（整体概览）：整体的CSS信息概览，比如元素个数，样式表个数，个数风格规则等等。2.Colors（使用颜色概览）：列出页面中使用的所有与颜色相关的信息，使用了哪种背景颜色，使用了哪种文字颜色，使用了哪种边框颜色，以及文字与背景的对比颜色。点击可以追溯到哪个元素使用了特定的颜色3.Fontinfo（字体信息）：衡量字体的使用情况以及它们在样式表中出现的频率。包括字体粗细和行高指示器，可以选择字体指示器显示受影响的元素，点击可以追踪4.未使用的声明（未使用的样式规则）：未使用的CSS规则可以通过点击追踪到具体的样式代码。5.媒体查询（mediaquery）：CSS媒体查询的详细信息（例如最小/最大宽度值）以及它们在样式表中出现的频率。可以点击查看具体的媒体查询相关代码如何更好地利用CSSOverview？那么，我们应该什么时候开始使用它或者它能帮助我们做什么呢？个人认为一些核心点：更准确（高保真）还原设计稿，辅助设计走查链接在对设计稿还原要求较高的页面。在设计走查链接中，非常适合使用这个面板来检查页面的颜色使用和字体使用是否符合规范。因为通常设计师会制定一系列规范，比如在什么地方使用什么颜色/字体。但是因为前端在重构设计稿的过程中，由于某些原因（比如颜色选择器不够准确，理所当然地认为有些颜色值是黑色或白色）。然后使用Color和Font模块，你可以清楚地找到不在规范范围内的颜色或字体并进行修改。更好地简化我们的CSS代码的意义很容易理解。使用Unuseddeclarations（未使用的样式规则）模块，我们可以很好的找到未使用的CSS代码，确认后移除。我认为协助提高网站的可访问性是非常有意义的。辅助功能（Accessibility），也称为A11Y，是网站开发过程中非常重要的一环。它的另一个名字是无障碍设计。提高网站可访问性通常的意思是帮助一些残障人士更好地使用我们的网站。当然，把无障碍相关的内容做好，其实对大家更友好。因为在一些特殊的场景下，我们也可能会被禁用，如下图所示：在CSSOverview面板中，唯一与accessibility相关的就是Color模块下的对比度（Contrastissues）：这里在页面中列出显示文本的地方，其文本颜色和背景颜色是否符合WCAGAA[1]规范要求的对比度值。最权威的互联网无障碍规范——WCAGAA[2]规范规定，所有重要内容的色彩对比度需要达到4.5:1或以上（字号大于18时为3:1或以上），以便具有良好的可读性。这里有一个概念——色彩对比。简单的说，描述的是两种颜色之间的亮度差异。当应用到我们的页面中时，大多数情况是背景颜色（background-color）和内容颜色（color）之间的对比。借用一张图——知乎——推荐的15款UI设计工具，助你轻松无障碍[3]：很明显，上面最后一个例子，文字已经很不清晰了，普通用户已经很难看懂了。而利用好CSSOverview中的这个功能，我们可以很容易的找到不规范的地方，进行修改，增强我们页面的可访问性。关于网页无障碍的更多内容，可以浏览我的文章——前端良好实践的不完全指南[4]，以更清楚地了解网站风格的整体概况。最后一点，通过整体面板上的信息，可以让我们对自己的网站有更深入的了解，进而可以辅助我们优化页面，引导我们在性能优化和页面重构上的新方向。最后当然是CSSOverviewPanel的功能远不止以上几点，还有更多的场景等待我们继续挖掘。我觉得这个Panel是我们打开之后就舍不得关掉的一个功能。合理的使用，大量的使用，可以成为我们开发过程中非常好的工具。参考文献[1]WCAGAA:https://www.w3.org/Translations/WCAG21-zh/[2]WCAGAA:https://www.w3.org/Translations/WCAG21-zh/[3]知乎--推荐15款UI设计工具，助你轻松无障碍：https://zhuanlan.zhihu.com/p/349761993[4]前端优秀实践不完全指南：https://github.com/chokcoco/cnblogs文章/issues/26
