建站
咨詢
售后
建站咨詢
新聞中心
本文將向大家介紹 Chrome 87 開(kāi)始支持的 CSS Overview Panel，并且介紹如何更好地利用這個(gè)面板。通過(guò) CSS Overview Panel，可能可以幫助我們：
創(chuàng)新互聯(lián)不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對(duì)營(yíng)銷、技術(shù)、服務(wù)都有自己獨(dú)特見(jiàn)解，公司采取“創(chuàng)意+綜合+營(yíng)銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時(shí)，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來(lái)將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級(jí)，滿足企業(yè)一站式成都全網(wǎng)營(yíng)銷推廣需求，讓再小的成都品牌網(wǎng)站建設(shè)也能產(chǎn)生價(jià)值！
- 更準(zhǔn)確(高保真)的還原設(shè)計(jì)稿，輔助設(shè)計(jì)走查環(huán)節(jié)
- 更好的精簡(jiǎn)我們的 CSS 代碼
- 輔助進(jìn)行網(wǎng)站的可訪問(wèn)性提升
- 對(duì)網(wǎng)站樣式的整體概況有更清晰的認(rèn)識(shí)
什么是 CSS Overview Panel
CSS Overview Panel 直譯過(guò)來(lái)就是 CSS 概覽面板，它是從 Chrome 87 開(kāi)始支持的一項(xiàng)實(shí)驗(yàn)室功能。
屬于控制臺(tái) DevTool 下的一個(gè) TAB：
默認(rèn)這個(gè)實(shí)驗(yàn)室功能是關(guān)閉的，也就是我們打開(kāi)控制臺(tái)是看不到的，那么我們?nèi)绾未蜷_(kāi)呢?兩種方式：
- 從 DevTools 的 Setting 下的 Experiment 菜單中，啟用 CSS Overview
- 打開(kāi) DevTools，通過(guò) Cmd + Shift + P 呼出 Command Menu，輸入 Show CSS Overview
CSS Overview Panel 有什么功能?
OK，打開(kāi) CSS Overview 之后，去到你希望審查的網(wǎng)站下。點(diǎn)擊按鈕：
幾秒之后，該插件機(jī)會(huì)對(duì)當(dāng)前頁(yè)面的 CSS 進(jìn)行分析，輸出一份簡(jiǎn)單的報(bào)告(有點(diǎn)類似于 LightHouse)：
這里我找到了一個(gè) GIF 圖，進(jìn)行一個(gè)簡(jiǎn)單的演示：
可以看到，整個(gè)面板分為幾個(gè)模塊(下面我切到 DevTool 中文模式貼圖展示)：
1.Overview Summary(整體概述)：整體 CSS 信息概況，例如元素?cái)?shù)量，樣式表數(shù)量，樣式規(guī)則數(shù)量等等。
2.Colors(使用顏色概況)：羅列出了頁(yè)面中使用到的所有顏色相關(guān)信息，背景色使用了哪些、文字色使用了哪些、邊框使用了哪些顏色、文本與其背景色顏色對(duì)比度，可以通過(guò)點(diǎn)擊追溯到具體某個(gè)顏色使用在哪個(gè)元素
3.Font info(字體信息)：衡量字體的使用情況以及它們?cè)跇邮奖碇谐霈F(xiàn)的頻率。包括字體重量和行高指標(biāo)，可以選擇字體指標(biāo)來(lái)顯示受影響的元素，可以通過(guò)點(diǎn)擊溯源
4.Unused declarations(未使用的樣式規(guī)則)：未使用的 CSS 規(guī)則，可以通過(guò)點(diǎn)擊追溯到具體樣式代碼。
5.Media queries(媒體查詢)：CSS媒體查詢的細(xì)節(jié)(如最小/最大寬度值)以及它們?cè)跇邮奖碇谐霈F(xiàn)的頻率?？梢酝ㄟ^(guò)點(diǎn)擊查看具體媒體查詢相關(guān)代碼
如何更好的利用 CSS Overview?
那么，我們應(yīng)該在什么時(shí)候開(kāi)始使用它或者它能夠幫助我們做些什么呢?我個(gè)人認(rèn)為一些比較核心的點(diǎn)：
更準(zhǔn)確(高保真)的還原設(shè)計(jì)稿，輔助設(shè)計(jì)走查環(huán)節(jié)
在對(duì)設(shè)計(jì)稿還原有更高要求的頁(yè)面上，在設(shè)計(jì)走查環(huán)節(jié)，非常適合利用這個(gè)面板去查看頁(yè)面的顏色使用、字體使用是否合乎規(guī)范。
因?yàn)橥ǔＴO(shè)計(jì)師會(huì)制定一系列規(guī)范，譬如什么地方用什么顏色/字體。但是由于前端在重構(gòu)設(shè)計(jì)稿的過(guò)程中，因?yàn)槟承┰?譬如取色器不夠精確，想當(dāng)然的認(rèn)為某些色值是黑色或者白色)。
那么利用 Color 和 Font 模塊，可以明確的找到不在規(guī)范內(nèi)的顏色或字體，進(jìn)行修改。
更好的精簡(jiǎn)我們的 CSS 代碼
這一點(diǎn)非常好理解，利用 Unused declarations(未使用的樣式規(guī)則)模塊，我們可以很好的找到未被使用的 CSS 代碼，在確定后剔除掉。
輔助進(jìn)行網(wǎng)站的可訪問(wèn)性提升
這一點(diǎn)我認(rèn)為還是非常有意義的?？稍L問(wèn)性(Accessibility)，又稱為 A11Y ，是網(wǎng)站開(kāi)發(fā)過(guò)程中非常重要的一環(huán)。它的另外一個(gè)叫法是無(wú)障礙設(shè)計(jì)。
提升網(wǎng)站可訪問(wèn)性的通常意義在于幫助一些殘障人士，更好的使用我們的網(wǎng)站。當(dāng)然，做好可訪問(wèn)性相關(guān)的內(nèi)容其實(shí)是對(duì)所有人都更友善的。因?yàn)樵谝恍?，特殊?chǎng)景下，我們也可能是殘障人士，如下圖：
而在 CSS Overview 面板中，唯一與可訪問(wèn)性相關(guān)的是 Color 模塊下的對(duì)比度(Contrast issues)：
這里它羅列出來(lái)了頁(yè)面上有文本展示的地方，它的文字顏色和背景顏色是否符合 WCAG AA[1] 規(guī)范所規(guī)定需要達(dá)到的對(duì)比度數(shù)值。
最權(quán)威的互聯(lián)網(wǎng)無(wú)障礙規(guī)范 —— WCAG AA[2]規(guī)范規(guī)定，所有重要內(nèi)容的色彩對(duì)比度需要達(dá)到 4.5:1 或以上(字號(hào)大于18號(hào)時(shí)達(dá)到 3:1 或以上)，才算擁有較好的可讀性。
這里就有一個(gè)概念 -- 顏色對(duì)比度，簡(jiǎn)單地說(shuō)，描述就是兩種顏色在亮度(Brightness)上的差別。運(yùn)用到我們的頁(yè)面上，大多數(shù)的情況就是背景色(background-color)與內(nèi)容顏色(color)的對(duì)比差異。
借用一張圖 -- 知乎 -- 助你輕松做好無(wú)障礙的15個(gè)UI設(shè)計(jì)工具推薦[3]：
很明顯，上述最后一個(gè)例子，文字已經(jīng)非常的不清晰了，正常用戶都已經(jīng)很難看得清了。
而利用好 CSS Overview 里面的這個(gè)功能，我們可以輕松的找到不達(dá)標(biāo)的地方，進(jìn)行修改，增強(qiáng)我們頁(yè)面的可訪問(wèn)性。
關(guān)于 Web 可訪問(wèn)性的更多內(nèi)容，你可以瀏覽我的這篇文章獲取更多信息 -- 前端優(yōu)秀實(shí)踐不完全指南[4]
對(duì)網(wǎng)站樣式的整體概況有更清晰的認(rèn)識(shí)
最后這一點(diǎn)，通過(guò)整體面板的信息，我們能夠?qū)ξ覀兊木W(wǎng)站有一個(gè)更深刻的認(rèn)識(shí)，它也可以反過(guò)來(lái)輔助我們對(duì)頁(yè)面進(jìn)行各項(xiàng)優(yōu)化，指導(dǎo)我們的性能優(yōu)化、頁(yè)面重構(gòu)的新方向。
最后
當(dāng)然，CSS Overview Panel 的功能遠(yuǎn)不止上述幾點(diǎn)，還有更多場(chǎng)景等待我們繼續(xù)挖掘。我認(rèn)為這個(gè) Panel 是我們打開(kāi)了就不愿意再關(guān)掉的一個(gè)功能，合理利用，多多利用它，能夠成為我們開(kāi)發(fā)環(huán)節(jié)中非常好的一個(gè)工具。
參考資料
[1]WCAG AA:
https://www.w3.org/Translations/WCAG21-zh/
[2]WCAG AA:
https://www.w3.org/Translations/WCAG21-zh/
[3]知乎 -- 助你輕松做好無(wú)障礙的15個(gè)UI設(shè)計(jì)工具推薦:
https://zhuanlan.zhihu.com/p/349761993
[4]前端優(yōu)秀實(shí)踐不完全指南:
https://github.com/chokcoco/cnblogsArticle/issues/26
新聞標(biāo)題：利用CSSOverview面板重構(gòu)優(yōu)化你的網(wǎng)站
網(wǎng)頁(yè)網(wǎng)址：http://m.5511xx.com/article/dhcgpgi.html
