共计 2264 个字符，预计需要花费 6 分钟才能阅读完成。
本文将向大家介绍 Chrome 87 开始反对的 CSS Overview Panel，并且介绍如何更好地利用这个面板。通过 CSS Overview Panel，可能能够帮忙咱们：
- 更精确（高保真）的 还原设计稿，辅助设计走查环节
- 更好的 精简咱们的 CSS 代码
- 辅助进行网站的 可拜访性晋升
- 对网站款式的整体详情有更清晰的意识
什么是 CSS Overview Panel
CSS Overview Panel 直译过去就是 CSS 概览面板，它是从 Chrome 87 开始反对的一项实验室性能。
属于控制台 DevTool 下的一个 TAB：
默认这个实验室性能是敞开的，也就是咱们关上控制台是看不到的，那么咱们如何关上呢？两种形式：
- 从 DevTools 的 Setting 下的 Experiment 菜单中，启用 CSS Overview
- 关上 DevTools，通过
Cmd + Shift + P呼出 Command Menu，输出Show CSS Overview
CSS Overview Panel 有什么性能？
OK，关上 CSS Overview 之后，去到你心愿审查的网站下。点击按钮：
几秒之后，该插件机会对以后页面的 CSS 进行剖析，输入一份简略的报告（有点相似于 LightHouse）：
这里我找到了一个 GIF 图，进行一个简略的演示：
能够看到，整个面板分为几个模块（上面我切到 DevTool 中文模式贴图展现）：
- Overview Summary（整体概述）：整体 CSS 信息详情，例如元素数量，样式表数量，款式规定数量等等。
- Colors（应用色彩详情）：列举出了页面中应用到的所有色彩相干信息，背景色应用了哪些、文字色应用了哪些、边框应用了哪些色彩、文本与其背景色色彩对比度，能够通过点击追溯到具体某个色彩应用在哪个元素
- Font info（字体信息）：掂量字体的应用状况以及它们在样式表中呈现的频率。包含字体分量和行高指标，能够抉择字体指标来显示受影响的元素，能够通过点击溯源
- Unused declarations（未应用的款式规定）：未应用的 CSS 规定，能够通过点击追溯到具体款式代码。
- Media queries（媒体查问）：CSS 媒体查问的细节（如最小 / 最大宽度值）以及它们在样式表中呈现的频率。能够通过点击查看具体媒体查问相干代码
如何更好的利用 CSS Overview？
那么，咱们应该在什么时候开始应用它或者它可能帮忙咱们做些什么呢？我集体认为一些比拟外围的点：
更精确（高保真）的还原设计稿，辅助设计走查环节
在对设计稿还原有更高要求的页面上，在设计走查环节，非常适合利用这个面板去查看页面的色彩应用、字体应用是否合乎标准。
因为通常设计师会制订一系列标准，譬如什么中央用什么色彩 / 字体。然而因为前端在重构设计稿的过程中，因为某些起因（譬如取色器不够准确，想当然的认为某些色值是彩色或者红色）。
那么利用 Color 和 Font 模块，能够明确的找到不在标准内的色彩或字体，进行批改。
更好的精简咱们的 CSS 代码
这一点十分好了解，利用 Unused declarations（未应用的款式规定）模块，咱们能够很好的找到未被应用的 CSS 代码，在确定后剔除掉。
辅助进行网站的 可拜访性晋升
这一点我认为还是十分有意义的。可拜访性（Accessibility），又称为 A11Y 我网站开发过程中十分重要的一环。它的另外一个叫法是 无障碍设计。
晋升网站可拜访性的通常意义在于帮忙一些残障人士，更好的应用咱们的网站。当然，做好可拜访性相干的内容其实是对所有人都更友善的。因为在一些，非凡场景下，咱们也可能是 残障人士，如下图：
而在 CSS Overview 面板中，惟一与可拜访性相干的是 Color 模块下的对比度（Contrast issues）：
这里它列举进去了页面上有文本展现的中央，它的文字色彩和背景色彩是否合乎 WCAG AA 标准所规定须要达到的对比度数值。
最权威的互联网无障碍标准 —— WCAG AA 标准规定，所有重要内容的色调对比度须要达到 4.5:1 或以上（字号大于 18 号时达到 3:1 或以上），才算领有较好的可读性。
这里就有一个概念 — 色彩对比度，简略地说，形容就是两种色彩在亮度（Brightness）上的差异。使用到咱们的页面上，大多数的状况就是背景色（background-color）与内容色彩（color）的比照差别。
借用一张图 — 知乎 — 助你轻松做好无障碍的 15 个 UI 设计工具举荐：
很显著，上述最初一个例子，文字曾经十分的不清晰了，失常用户都曾经很难看得清了。
而利用好 CSS Overview 外面的这个性能，咱们能够轻松的找到不达标的中央，进行批改，加强咱们页面的可拜访性。
对于 Web 可拜访性的更多内容，你能够浏览我的这篇文章获取更多信息 — 前端优良实际不齐全指南
对网站款式的整体详情有更清晰的意识
最初这一点，通过整体面板的信息，咱们可能对咱们的网站有一个更粗浅的意识，它也能够反过来辅助咱们对页面进行各项优化，领导咱们的性能优化、页面重构的新方向。
最初
当然，CSS Overview Panel 的性能远不止上述几点，还有更多场景期待咱们持续开掘。我认为这个 Panel 是咱们关上了就不违心再关掉的一个性能，正当利用，多多利用它，可能成为咱们开发环节中十分好的一个工具。
本文到此结束，心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。