这是一个chrome中令人兴奋的实验性新功能，通过它我们可以详细了解网站上css的使用情况——从使用的色值到未使用的声明数量，甚至包括已定义的媒体查询总数等。
需要再次强调的是，这是一项实验性功能，这意味着它仍在开发中，并且需要启用才能在DevTools中使用。
启用方法如下：
首先，打开DevTools（在Mac环境中使用Command+Option+I；在Windows环境中使用Control+Shift+I）。然后，打开DevTools设置（在Mac环境中使用Function+F1；在Windows环境中使用F1）。在实验选项中启用CSS Overview功能。
Chrome DevTools实验设置窗口的截图，显示了选中的CSS Overview选项。
立即学习“前端免费学习笔记（深入）”；
HMCSS是由河马工作室全新开发的通用的企业网站系统，是PHP+MYSQL的架构，采用DIV+CSS的方式进行网页布局，网站的功能包括有：企业简介，图片展示幻灯，产品图片滚动，企业荣誉，实力展示，产品分类及展示，网上招聘，在线留言，联系我们，在线地图等内容，另外还带有完整的管理后台，如网站SEO优化关键词等都可以自由设定。 HMCSS目前发布的是1.0版本，就是上述的这些内容。后面我们还要加上产品
关闭设置后，我们就能在DevTools菜单中看到一个名为CSS Overview的标签。如果没有看到，请检查是否被隐藏在溢出菜单中。
Chrome DevTools中CSS Overview窗口的截图。展示了网站（此处为CSS-Tricks）上使用的元素、选择器、样式和颜色的概述。
请注意，该报告分为多个部分，包括概要、颜色、字体信息、未使用的声明、媒体查询。我们可以从这个小小的面板中获取大量信息。
这不是很棒吗？我非常喜欢浏览器中增加这样的工具。这不仅能帮助前端开发人员，还能促进我们与设计师之间的合作。例如，设计师可以通过这个功能来检查我们开发的页面中有关色值的使用是否符合他们的要求。
