如何更好的利用 CSS Overview?

那么,我们应该在什么时候开始使用它或者它能够帮助我们做些什么呢?我个人认为一些比较核心的点:
 
更准确(高保真)的还原设计稿,辅助设计走查环节
在对设计稿还原有更高要求的页面上,在设计走查环节,非常适合利用这个面板去查看页面的颜色使用、字体使用是否合乎规范。
 
因为通常设计师会制定一系列规范,譬如什么地方用什么颜色/字体。但是由于前端在重构设计稿的过程中,因为某些原因(譬如取色器不够精确,想当然的认为某些色值是黑色或者白色)。
 
那么利用 Color 和 Font 模块,可以明确的找到不在规范内的颜色或字体,进行修改。
 
更好的精简我们的 CSS 代码
这一点非常好理解,利用 Unused declarations(未使用的样式规则)模块,我们可以很好的找到未被使用的 CSS 代码,在确定后剔除掉。
 
辅助进行网站的可访问性提升
这一点我认为还是非常有意义的。可访问性(Accessibility),又称为 A11Y 我网站开发过程中非常重要的一环。它的另外一个叫法是无障碍设计。
 
提升网站可访问性的通常意义在于帮助一些残障人士,更好的使用我们的网站。当然,做好可访问性相关的内容其实是对所有人都更友善的。因为在一些,特殊场景下,我们也可能是残障人士.
CSS Overview Panel
 
而在 CSS Overview 面板中,唯一与可访问性相关的是 Color 模块下的对比度(Contrast issues):
 
 
这里它罗列出来了页面上有文本展示的地方,它的文字颜色和背景颜色是否符合 WCAG AA 规范所规定需要达到的对比度数值。
 
最权威的互联网无障碍规范 —— WCAG AA规范规定,所有重要内容的色彩对比度需要达到 4.5:1 或以上(字号大于18号时达到 3:1 或以上),才算拥有较好的可读性。
这里就有一个概念 -- 颜色对比度,简单地说,描述就是两种颜色在亮度(Brightness)上的差别。运用到我们的页面上,大多数的情况就是背景色(background-color)与内容颜色(color)的对比差异。

【本文关键词】:CSS Overview Panel