如何利用 CSS Overview 面板重构优化你的网站


Posted in HTML / CSS onOctober 24, 2021

本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel,并且介绍如何更好地利用这个面板。通过 CSS Overview Panel,可能可以帮助我们:

  • 更准确(高保真)的还原设计稿,辅助设计走查环节
  • 更好的精简我们的 CSS 代码
  • 辅助进行网站的可访问性提升
  • 对网站样式的整体概况有更清晰的认识

什么是 CSS Overview Panel

CSS Overview Panel 直译过来就是 CSS 概览面板,它是从 Chrome 87 开始支持的一项实验室功能。

属于控制台 DevTop 下的一个 TAB:

如何利用 CSS Overview 面板重构优化你的网站

默认这个实验室功能是关闭的,也就是我们打开控制台是看不到的,那么我们如何打开呢?两种方式:

  • 从 DevTops 的 Setting 下的 Experiment 菜单中,启用 CSS Overview
  • 打开 DevTops,通过 Cmd + Shift + P 呼出 Command Menu,输入 Show CSS Overview

CSS Overview Panel 有什么功能?

OK,打开 CSS Overview 之后,去到你希望审查的网站下。点击按钮:

如何利用 CSS Overview 面板重构优化你的网站

几秒之后,该插件机会对当前页面的 CSS 进行分析,输出一份简单的报告(有点类似于 LightHouse):

这里我找到了一个 GIF 图,进行一个简单的演示:

如何利用 CSS Overview 面板重构优化你的网站

可以看到,整个面板分为几个模块(下面我切到 DevTop 中文模式贴图展示):

Overview Summary(整体概述):整体 CSS 信息概况,例如元素数量,样式表数量,样式规则数量等等。

如何利用 CSS Overview 面板重构优化你的网站

Cpors(使用颜色概况):罗列出了页面中使用到的所有颜色相关信息,背景色使用了哪些、文字色使用了哪些、边框使用了哪些颜色、文本与其背景色颜色对比度,可以通过点击追溯到具体某个颜色使用在哪个元素

如何利用 CSS Overview 面板重构优化你的网站

Font info(字体信息):衡量字体的使用情况以及它们在样式表中出现的频率。包括字体重量和行高指标,可以选择字体指标来显示受影响的元素,可以通过点击溯源

如何利用 CSS Overview 面板重构优化你的网站

Unused declarations(未使用的样式规则):未使用的 CSS 规则,可以通过点击追溯到具体样式代码。

如何利用 CSS Overview 面板重构优化你的网站

Media queries(媒体查询):CSS媒体查询的细节(如最小/最大宽度值)以及它们在样式表中出现的频率。可以通过点击查看具体媒体查询相关代码

如何利用 CSS Overview 面板重构优化你的网站

如何更好的利用 CSS Overview?

那么,我们应该在什么时候开始使用它或者它能够帮助我们做些什么呢?我个人认为一些比较核心的点:

更准确(高保真)的还原设计稿,辅助设计走查环节

在对设计稿还原有更高要求的页面上,在设计走查环节,非常适合利用这个面板去查看页面的颜色使用、字体使用是否合乎规范。

因为通常设计师会制定一系列规范,譬如什么地方用什么颜色/字体。但是由于前端在重构设计稿的过程中,因为某些原因(譬如取色器不够精确,想当然的认为某些色值是黑色或者白色)。

那么利用 Cpor 和 Font 模块,可以明确的找到不在规范内的颜色或字体,进行修改。

更好的精简我们的 CSS 代码

这一点非常好理解,利用 Unused declarations(未使用的样式规则)模块,我们可以很好的找到未被使用的 CSS 代码,在确定后剔除掉。

辅助进行网站的可访问性提升

这一点我认为还是非常有意义的。可访问性(Accessibility),又称为 A11Y 我网站开发过程中非常重要的一环。它的另外一个叫法是无障碍设计。

提升网站可访问性的通常意义在于帮助一些残障人士,更好的使用我们的网站。当然,做好可访问性相关的内容其实是对所有人都更友善的。因为在一些,特殊场景下,我们也可能是残障人士,如下图:

如何利用 CSS Overview 面板重构优化你的网站

而在 CSS Overview 面板中,唯一与可访问性相关的是 Cpor 模块下的对比度(Contrast issues):

如何利用 CSS Overview 面板重构优化你的网站

这里它罗列出来了页面上有文本展示的地方,它的文字颜色和背景颜色是否符合 WCAG AA 规范所规定需要达到的对比度数值。

最权威的互联网无障碍规范 —— WCAG AA规范规定,所有重要内容的色彩对比度需要达到 4.5:1 或以上(字号大于18号时达到 3:1 或以上),才算拥有较好的可读性。

这里就有一个概念 -- 颜色对比度,简单地说,描述就是两种颜色在亮度(Brightness)上的差别。运用到我们的页面上,大多数的情况就是背景色(background-cpor)与内容颜色(cpor)的对比差异。

借用一张图 -- 知乎 -- 助你轻松做好无障碍的15个UI设计工具推荐

如何利用 CSS Overview 面板重构优化你的网站

很明显,上述最后一个例子,文字已经非常的不清晰了,正常用户都已经很难看得清了。

而利用好 CSS Overview 里面的这个功能,我们可以轻松的找到不达标的地方,进行修改,增强我们页面的可访问性。

关于 Web 可访问性的更多内容,你可以浏览我的这篇文章获取更多信息 -- 前端优秀实践不完全指南

对网站样式的整体概况有更清晰的认识

最后这一点,通过整体面板的信息,我们能够对我们的网站有一个更深刻的认识,它也可以反过来辅助我们对页面进行各项优化,指导我们的性能优化、页面重构的新方向。

最后

当然,CSS Overview Panel 的功能远不止上述几点,还有更多场景等待我们继续挖掘。我认为这个 Panel 是我们打开了就不愿意再关掉的一个功能,合理利用,多多利用它,能够成为我们开发环节中非常好的一个工具。

到此这篇关于利用 CSS Overview 面板重构优化你的网站的文章就介绍到这了,更多相关CSS Overview 面板重构内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
CSS基础详解
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
小程序实现悬浮按钮的全过程记录
Oct 16 #HTML / CSS
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
一个用php3编写的简单计数器
2006/10/09 PHP
探讨如何把session存入数据库
2013/06/07 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
Laravel下生成验证码的类
2017/11/15 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
最新奶茶店创业计划书
2014/01/25 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
旅游活动总结
2014/08/27 职场文书
2015年复活节活动总结
2015/02/27 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis