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

Jecelyn Yeen

使用 CSS Overview 面板可更好地了解网页的 CSS 并找出潜在的改进机会。

概览

CSS 概览面板会生成一份报告，其中包含您网站的 CSS 统计信息。此报告会收集有关所有 CSS 出现情况（甚至未使用的声明）的数据。CSS 概览面板可帮助您通过网页突出显示或在元素面板中直接链接到受影响的代码来进一步调查出现问题的网页。

了解如何运行和重新运行 CSS 概览报告以及如何了解 CSS 概览报告。

打开“CSS 概览”面板

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

  3. 依次选择 更多。 Customize and control DevTools > More tools > CSS Overview。

    菜单中的“CSS 概览”。

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

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

运行和重新运行 CSS 概览报告

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

    捕获 CSS 概览。

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

    清晰的概览。

了解 CSS 概览报告

该报告包含以下五个部分：

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

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

    颜色。

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

    使用相应颜色的元素的列表。

    如需突出显示页面上的元素，请将鼠标悬停在列表中的相应元素上。

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

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

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

    字体信息。

  4. 未使用的声明。所有无效的样式，按原因分组。

    未使用的声明。

    例如，上面的两个声明将不会被使用，因为内容决定了内嵌元素的高度和宽度。如需查看相应元素，请点击相应出现情况。

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

    媒体查询。