CSS 總覽：找出 CSS 可能的改善項目

Jecelyn Yeen

Twitter GitHub 首頁

透過「CSS 總覽」面板進一步瞭解網頁的 CSS，並找出可能的改善項目。

開啟「CSS 總覽」面板

1. 開啟任何網頁，例如這個頁面。
2. 開啟開發人員工具。

3. 依序選取 「自訂及控制開發人員工具」 >「更多工具」 >「CSS 總覽」。

   

   或者，您也可以使用指令選單開啟「CSS 總覽」面板。

   

執行並重新執行 CSS 總覽報表

1. 按一下「擷取總覽」按鈕，產生網頁的 CSS 總覽報表。

   

2. 如要重新執行 CSS 總覽，請按一下「清除總覽」圖示 ，然後重複第一個步驟。

   

瞭解 CSS 總覽報表

報告由五個部分組成：

1. 總覽摘要。您網頁的 CSS 概要摘要。

2. 顏色。網頁上的所有顏色。顏色會按照類型分組，例如背景顏色、文字顏色等。這個部分也會顯示對比度低的文字。

   

   每種顏色都可以點選。舉例來說，假設 #DADCE0 邊框顏色與網站的色彩配置不符。如要取得使用這個顏色的元素清單，請按一下該顏色。

   

   如要醒目顯示網頁上的元素，請將滑鼠遊標懸停在清單中的元素上。

   

   如要在「元素」面板中開啟元素，請按一下清單中的元素。

3. 字型資訊。網頁上的所有字型及其出現頻率，以不同的字型大小、字型粗細和行高分組。(與「顏色」部分類似，如要查看受影響的元素清單，請按一下元素出現點)。

   

4. 未使用的宣告。所有沒有效果的樣式，依原因分組。

   

   舉例來說，上述兩個宣告皆未使用，因為內容會決定內嵌元素的高度和寬度。如要查看對應的元素，請按一下發生的情況。

5. 媒體查詢。您網頁上定義的所有媒體查詢，依出現次數遞減排序。如要查看受影響的元素清單，請按一下元素出現次數。