这是一个chrome中令人兴奋的实验性新功能，通过它我们可以详细了解网站上css的使用情况——从使用的色值到未使用的声明数量，甚至包括已定义的媒体查询总数等。
需要再次强调的是，这是一项实验性功能，这意味着它仍在开发中，并且需要启用才能在DevTools中使用。
启用方法如下：
首先，打开DevTools（在Mac环境中使用Command+Option+I；在Windows环境中使用Control+Shift+I）。然后，打开DevTools设置（在Mac环境中使用Function+F1；在Windows环境中使用F1）。在实验选项中启用CSS Overview功能。
Chrome DevTools实验设置窗口的截图，显示了选中的CSS Overview选项。
立即学习“前端免费学习笔记（深入）”；
关闭设置后，我们就能在DevTools菜单中看到一个名为CSS Overview的标签。如果没有看到，请检查是否被隐藏在溢出菜单中。
Chrome DevTools中CSS Overview窗口的截图。展示了网站（此处为CSS-Tricks）上使用的元素、选择器、样式和颜色的概述。
请注意，该报告分为多个部分，包括概要、颜色、字体信息、未使用的声明、媒体查询。我们可以从这个小小的面板中获取大量信息。
这不是很棒吗？我非常喜欢浏览器中增加这样的工具。这不仅能帮助前端开发人员，还能促进我们与设计师之间的合作。例如，设计师可以通过这个功能来检查我们开发的页面中有关色值的使用是否符合他们的要求。
以上就是【译】Chrome的新功能：CSS概述的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
435
收藏
