【译】Chrome的新功能：CSS概述

原文地址：New in Chrome: CSS Overview 作者：Robin Rendle

这是Chrome中一个实验性的新奇功能，我们可以通过这个能力来获取一个网站上CSS的使用情况——从使用了哪些色值到未使用的声明数量，甚至是已定义的媒体查询总数等等。

再次声明，这是一项实验性功能。这不仅意味着其还在完善中，还意味着必须启用这个能力才能在DevTools中使用。

启用步骤：

1. 打开DevTools（Mac环境，Command+Option+I；Windows环境，Control+ Shift+ I）
2. 打开DevTools设置（Mac环境，Function+F1；Windows环境，F1）
3. 点击实验选项
4. 启用CSS Overview选项

Chrome DevTools实验设置窗口的屏幕截图，其中显示了选中的CSS Overview选项。

接着，关闭设置后，我们就能在DevTools菜单中看到一个名为CSS Overview的标签。如果没看到的话，请确保不是隐藏在溢出菜单中了。

Screenshot of the CSS Overview window in Chrome DevTools. It shows an overview of the elements, selectors, styles and colors used on the site, which is CSS-Tricks in this screenshot.

请注意，该报告是分为多个部分的，包括概要、颜色、字体信息、未使用的声明、媒体查询。我们可以从小小的面板中获取到很多信息。

这是不是很棒。我喜欢浏览器中开始加入这类工具。思考一下，这不仅能帮助前端人员，还有助于我们与设计师之间的合作。譬如，设计师可以通过这个能力，来检查我们开发的页面中有关色值的内容是否都是符合要求的。