利用 CSS Overview 面板重構優化你的網站
- 2021 年 10 月 20 日
- 筆記
- CSS進階, html,css,javascript, 插件擴展
本文將向大家介紹 Chrome 87 開始支持的 CSS Overview Panel，並且介紹如何更好地利用這個面板。通過 CSS Overview Panel，可能可以幫助我們：
- 更準確（高保真）的還原設計稿，輔助設計走查環節
- 更好的精簡我們的 CSS 代碼
- 輔助進行網站的可訪問性提升
- 對網站樣式的整體概況有更清晰的認識
什麼是 CSS Overview Panel
CSS Overview Panel 直譯過來就是 CSS 概覽面板，它是從 Chrome 87 開始支持的一項實驗室功能。
屬於控制台 DevTool 下的一個 TAB：
默認這個實驗室功能是關閉的，也就是我們打開控制台是看不到的，那麼我們如何打開呢？兩種方式：
- 從 DevTools 的 Setting 下的 Experiment 菜單中，啟用 CSS Overview
- 打開 DevTools，通過
Cmd + Shift + P呼出 Command Menu，輸入Show CSS Overview
CSS Overview Panel 有什麼功能？
OK，打開 CSS Overview 之後，去到你希望審查的網站下。點擊按鈕：
幾秒之後，該插件機會對當前頁面的 CSS 進行分析，輸出一份簡單的報告（有點類似於 LightHouse）：
這裡我找到了一個 GIF 圖，進行一個簡單的演示：
可以看到，整個面板分為幾個模塊（下面我切到 DevTool 中文模式貼圖展示）：
- Overview Summary（整體概述）：整體 CSS 信息概況，例如元素數量，樣式表數量，樣式規則數量等等。
- Colors（使用顏色概況）：羅列出了頁面中使用到的所有顏色相關信息，背景色使用了哪些、文字色使用了哪些、邊框使用了哪些顏色、文本與其背景色顏色對比度，可以通過點擊追溯到具體某個顏色使用在哪個元素
- Font info（字體信息）：衡量字體的使用情況以及它們在樣式表中出現的頻率。包括字體重量和行高指標，可以選擇字體指標來顯示受影響的元素，可以通過點擊溯源
- Unused declarations（未使用的樣式規則）：未使用的 CSS 規則，可以通過點擊追溯到具體樣式代碼。
- 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 是我們打開了就不願意再關掉的一個功能，合理利用，多多利用它，能夠成為我們開發環節中非常好的一個工具。
本文到此結束，希望對你有幫助 😃
更多精彩 CSS 技術文章匯總在我的 Github — iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
