乐趣区

关于前端:利用-CSS-Overview-面板重构优化你的网站

本文将向大家介绍 Chrome 87 开始反对的 CSS Overview Panel,并且介绍如何更好地利用这个面板。通过 CSS Overview Panel,可能能够帮忙咱们:

  1. 更精确(高保真)的 还原设计稿,辅助设计走查环节
  2. 更好的 精简咱们的 CSS 代码
  3. 辅助进行网站的 可拜访性晋升
  4. 对网站款式的整体详情有更清晰的意识

什么是 CSS Overview Panel

CSS Overview Panel 直译过去就是 CSS 概览面板,它是从 Chrome 87 开始反对的一项实验室性能。

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

默认这个实验室性能是敞开的,也就是咱们关上控制台是看不到的,那么咱们如何关上呢?两种形式:

  1. 从 DevTools 的 Setting 下的 Experiment 菜单中,启用 CSS Overview
  2. 关上 DevTools,通过 Cmd + Shift + P 呼出 Command Menu,输出 Show CSS Overview

CSS Overview Panel 有什么性能?

OK,关上 CSS Overview 之后,去到你心愿审查的网站下。点击按钮:

几秒之后,该插件机会对以后页面的 CSS 进行剖析,输入一份简略的报告(有点相似于 LightHouse):

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

能够看到,整个面板分为几个模块(上面我切到 DevTool 中文模式贴图展现):

  1. Overview Summary(整体概述):整体 CSS 信息详情,例如元素数量,样式表数量,款式规定数量等等。

  1. Colors(应用色彩详情):列举出了页面中应用到的所有色彩相干信息,背景色应用了哪些、文字色应用了哪些、边框应用了哪些色彩、文本与其背景色色彩对比度,能够通过点击追溯到具体某个色彩应用在哪个元素

  1. Font info(字体信息):掂量字体的应用状况以及它们在样式表中呈现的频率。包含字体分量和行高指标,能够抉择字体指标来显示受影响的元素,能够通过点击溯源

  1. Unused declarations(未应用的款式规定):未应用的 CSS 规定,能够通过点击追溯到具体款式代码。

  1. 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 订阅珍藏。

如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。

退出移动版