新的Chrome：CSS概述

Chrome 推出了一个酷炫的实验性新功能！现在，我们可以快速查看网站使用的 CSS 概览，从颜色数量到未使用的声明数量，甚至包括已定义的媒体查询总数。

需要注意的是，这是一个实验性功能。这意味着它仍在开发中，您需要先启用它才能在 DevTools 中使用。

• 打开 DevTools（Mac 上按 Command Option I；Windows 上按 Control Shift I）
• 前往 DevTools 设置（Mac 上按 ? 或 Function F1；Windows 上按 ? 或 F1）
• 点击打开 实验 部分
• 启用 CSS 概览 选项

然后，您会在 DevTools 菜单栏中看到一个新的“CSS 概览”选项卡（设置关闭后）。如果您没有看到它，请确保它没有隐藏在溢出菜单中。

请注意，报告分为多个部分，包括颜色、字体信息、未使用的声明和媒体查询。这些信息非常全面，而且一目了然。

这个功能非常实用！我很喜欢这种工具开始集成到浏览器中的趋势。想想看，这不仅能帮助前端开发者，还能促进我们与设计师的协作。例如，设计师可以打开它，检查我们的工作，确保从调色板到字体堆栈的一切都完整无缺。

以上是新的Chrome：CSS概述的详细内容。更多信息请关注PHP中文网其他相关文章！