利用 CSS Overview 面板重構優化你的網站-有解無憂

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

什么是 CSS Overview Panel

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

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

默認這個實驗室功能是關閉的，也就是我們打開控制臺是看不到的，那么我們如何打開呢？兩種方式：

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

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

這里我找到了一個 GIF 圖，進行一個簡單的演示：

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

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

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

在對設計稿還原有更高要求的頁面上，在設計走查環節，非常適合利用這個面板去查看頁面的顏色使用、字體使用是否合乎規范，

因為通常設計師會制定一系列規范，譬如什么地方用什么顏色/字體，但是由于前端在重構設計稿的程序中，因為某些原因（譬如取色器不夠精確，想當然的認為某些色值是黑色或者白色），

那么利用 Color 和 Font 模塊，可以明確的找到不在規范內的顏色或字體，進行修改，

這一點非常好理解，利用 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 是我們打開了就不愿意再關掉的一個功能，合理利用，多多利用它，能夠成為我們開發環節中非常好的一個工具，

本文到此結束，希望對你有幫助 ??

更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/327834.html

標籤：Html/Css