乐趣区

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

jiezi

本文将向大家介绍 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 订阅珍藏。

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

退出移动版