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

Jecelyn Yeen
Jecelyn Yeen

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

開啟「CSS 總覽」面板

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

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

    選單中的 CSS 總覽。

    您也可以使用「Command」選單開啟「CSS 總覽」面板。

    在「Command」選單中顯示 CSS 總覽指令。

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

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

    擷取 CSS 總覽。

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

    清除總覽。

瞭解 CSS 總覽報表

報告由以下五個部分組成：

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

  2. 顏色。您網頁的所有顏色。系統會依類型 (例如背景顏色、文字顏色等) 分類顏色。這個專區也會顯示對比度偏低的文字。

    顏色。

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

    使用該顏色的元素清單。

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

    將滑鼠遊標懸停在特定元素上，即可在網頁上醒目顯示該元素。

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

  3. 字型資訊：網頁中的所有字型及其顯示頻率，依字型大小、字型粗細和行高分組。如要查看受影響的元素清單，請按一下元素的位置 (類似「顏色」部分)。

    字型資訊。

  4. 未使用的宣告。沒有任何效果的樣式 (依原因分組)。

    未使用的宣告。

    舉例來說，由於內容會決定內嵌元素的高度和寬度，因此未使用上述兩個宣告。如要查看對應的元素，請按一下出現的位置。

  5. 媒體查詢：您網頁中定義的所有媒體查詢，以遞減方式排序。如要查看受影響元素的清單，請按一下各個元素出現的位置。

    媒體查詢。