本文將向大家介紹 Chrome 87 開始支持的 CSS Overview Panel，并且介紹如何更好地利用這個面板。通過 CSS Overview Panel，可能可以幫助我們：

• 更準(zhǔn)確（高保真）的還原設(shè)計稿，輔助設(shè)計走查環(huán)節(jié)
• 更好的精簡我們的 CSS 代碼
• 輔助進(jìn)行網(wǎng)站的可訪問性提升
• 對網(wǎng)站樣式的整體概況有更清晰的認(rèn)識

什么是 CSS Overview Panel

CSS Overview Panel 直譯過來就是 CSS 概覽面板，它是從 Chrome 87 開始支持的一項實驗室功能。

屬于控制臺 DevTop 下的一個 TAB：

默認(rèn)這個實驗室功能是關(guān)閉的，也就是我們打開控制臺是看不到的，那么我們?nèi)绾未蜷_呢？兩種方式：

• 從 DevTops 的 Setting 下的 Experiment 菜單中，啟用 CSS Overview
• 打開 DevTops，通過 Cmd + Shift + P 呼出 Command Menu，輸入 Show CSS Overview

CSS Overview Panel 有什么功能？

OK，打開 CSS Overview 之后，去到你希望審查的網(wǎng)站下。點擊按鈕：

幾秒之后，該插件機會對當(dāng)前頁面的 CSS 進(jìn)行分析，輸出一份簡單的報告（有點類似于 LightHouse）：

這里我找到了一個 GIF 圖，進(jìn)行一個簡單的演示：

可以看到，整個面板分為幾個模塊（下面我切到 DevTop 中文模式貼圖展示）：

Overview Summary（整體概述）：整體 CSS 信息概況，例如元素數(shù)量，樣式表數(shù)量，樣式規(guī)則數(shù)量等等。

Cpors（使用顏色概況）：羅列出了頁面中使用到的所有顏色相關(guān)信息，背景色使用了哪些、文字色使用了哪些、邊框使用了哪些顏色、文本與其背景色顏色對比度，可以通過點擊追溯到具體某個顏色使用在哪個元素

Font info（字體信息）：衡量字體的使用情況以及它們在樣式表中出現(xiàn)的頻率。包括字體重量和行高指標(biāo)，可以選擇字體指標(biāo)來顯示受影響的元素，可以通過點擊溯源

Unused declarations（未使用的樣式規(guī)則）：未使用的 CSS 規(guī)則，可以通過點擊追溯到具體樣式代碼。

Media queries（媒體查詢）：CSS媒體查詢的細(xì)節(jié)（如最小/最大寬度值）以及它們在樣式表中出現(xiàn)的頻率?？梢酝ㄟ^點擊查看具體媒體查詢相關(guān)代碼

如何更好的利用 CSS Overview？

那么，我們應(yīng)該在什么時候開始使用它或者它能夠幫助我們做些什么呢？我個人認(rèn)為一些比較核心的點：

更準(zhǔn)確（高保真）的還原設(shè)計稿，輔助設(shè)計走查環(huán)節(jié)

在對設(shè)計稿還原有更高要求的頁面上，在設(shè)計走查環(huán)節(jié)，非常適合利用這個面板去查看頁面的顏色使用、字體使用是否合乎規(guī)范。

因為通常設(shè)計師會制定一系列規(guī)范，譬如什么地方用什么顏色/字體。但是由于前端在重構(gòu)設(shè)計稿的過程中，因為某些原因（譬如取色器不夠精確，想當(dāng)然的認(rèn)為某些色值是黑色或者白色）。

那么利用 Cpor 和 Font 模塊，可以明確的找到不在規(guī)范內(nèi)的顏色或字體，進(jìn)行修改。

更好的精簡我們的 CSS 代碼

這一點非常好理解，利用 Unused declarations（未使用的樣式規(guī)則）模塊，我們可以很好的找到未被使用的 CSS 代碼，在確定后剔除掉。

輔助進(jìn)行網(wǎng)站的可訪問性提升

這一點我認(rèn)為還是非常有意義的?？稍L問性（Accessibility），又稱為 A11Y 我網(wǎng)站開發(fā)過程中非常重要的一環(huán)。它的另外一個叫法是無障礙設(shè)計。

提升網(wǎng)站可訪問性的通常意義在于幫助一些殘障人士，更好的使用我們的網(wǎng)站。當(dāng)然，做好可訪問性相關(guān)的內(nèi)容其實是對所有人都更友善的。因為在一些，特殊場景下，我們也可能是殘障人士，如下圖：

而在 CSS Overview 面板中，唯一與可訪問性相關(guān)的是 Cpor 模塊下的對比度（Contrast issues）：

這里它羅列出來了頁面上有文本展示的地方，它的文字顏色和背景顏色是否符合 WCAG AA 規(guī)范所規(guī)定需要達(dá)到的對比度數(shù)值。

最權(quán)威的互聯(lián)網(wǎng)無障礙規(guī)范 —— WCAG AA規(guī)范規(guī)定，所有重要內(nèi)容的色彩對比度需要達(dá)到 4.5:1 或以上（字號大于18號時達(dá)到 3:1 或以上），才算擁有較好的可讀性。

這里就有一個概念 -- 顏色對比度，簡單地說，描述就是兩種顏色在亮度（Brightness）上的差別。運用到我們的頁面上，大多數(shù)的情況就是背景色（background-cpor）與內(nèi)容顏色（cpor）的對比差異。

借用一張圖 -- 知乎 -- 助你輕松做好無障礙的15個UI設(shè)計工具推薦：

很明顯，上述最后一個例子，文字已經(jīng)非常的不清晰了，正常用戶都已經(jīng)很難看得清了。

而利用好 CSS Overview 里面的這個功能，我們可以輕松的找到不達(dá)標(biāo)的地方，進(jìn)行修改，增強我們頁面的可訪問性。

關(guān)于 Web 可訪問性的更多內(nèi)容，你可以瀏覽我的這篇文章獲取更多信息 -- 前端優(yōu)秀實踐不完全指南

對網(wǎng)站樣式的整體概況有更清晰的認(rèn)識

最后這一點，通過整體面板的信息，我們能夠?qū)ξ覀兊木W(wǎng)站有一個更深刻的認(rèn)識，它也可以反過來輔助我們對頁面進(jìn)行各項優(yōu)化，指導(dǎo)我們的性能優(yōu)化、頁面重構(gòu)的新方向。

最后

當(dāng)然，CSS Overview Panel 的功能遠(yuǎn)不止上述幾點，還有更多場景等待我們繼續(xù)挖掘。我認(rèn)為這個 Panel 是我們打開了就不愿意再關(guān)掉的一個功能，合理利用，多多利用它，能夠成為我們開發(fā)環(huán)節(jié)中非常好的一個工具。

到此這篇關(guān)于利用 CSS Overview 面板重構(gòu)優(yōu)化你的網(wǎng)站的文章就介紹到這了,更多相關(guān)CSS Overview 面板重構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！