CSS 概览：发现潜在的 CSS 改进机会

叶杰林
Jecelyn Yeen
Twitter GitHub 首页

使用 CSS Overview 面板更好地了解网页的 CSS，并确定潜在的改进机会。

打开“CSS 概览”面板

  1. 打开任意网页，例如此网页。
  2. 打开开发者工具。

  3. 依次选择 更多。 自定义和控制开发者工具 > 更多工具 > CSS 概览。

    CSS 概览。

    或者，使用命令菜单打开 CSS 概览面板。

    在“命令”菜单中显示“CSS 概览”命令。

生成并重新生成“CSS 概览”报告

  1. 点击捕获概览按钮，生成网页的“CSS 概览”报告。

    获取 CSS 概览。

  2. 如需重新运行 CSS 概览，请点击 清除。 清除概览图标，然后重复第 1 步。

    清除概览。

了解“CSS 概览”报告

该报告包含五个部分：

  1. 概览摘要。网页的 CSS 的简要摘要。 概览摘要。

  2. 颜色。网页上的所有颜色。颜色按类型（例如背景颜色、文字颜色等）分组。此部分还会显示存在对比度问题的文字。

    颜色。

    每种颜色都是可点击的。例如，假设 #DADCE0 边框颜色与您网站的配色方案不匹配。如需获取使用此颜色的元素的列表，请点击相应颜色。

    使用该颜色的元素的列表。

    若要在网页上突出显示相应元素，请将鼠标悬停在列表中的相应元素上。

    将鼠标悬停在某个元素上，即可在网页上突出显示该元素。

    要在元素面板中打开相应元素，请在列表中点击相应元素。

  3. 字体信息：您网页上所有字体及其出现的位置，按不同的字体大小、字体粗细和行高分组。与颜色部分类似，如需查看受影响元素的列表，请点击相应元素出现的位置。

    字体信息。

  4. 未使用的声明。所有没有任何效果的样式（按原因分组）。

    未使用的声明。

    例如，以上两个声明都未使用，因为内容决定了内嵌元素的高度和宽度。如需查看相应元素，请点击发生实例。

  5. 媒体查询。您页面上定义的所有媒体查询，按出现次数降序排序。如需查看受影响元素的列表，请点击出现的元素。

    媒体查询。