Firefox 70 将引入“非活跃 CSS”，快速排查 CSS 属性

在最新的 Firefox 70 Beta 版本中，引入了一项名为“Inactive CSS”（非活跃 CSS）的功能，DevTool 新工具将为开发者展示哪些 CSS 属性不会影响所选元素以及原因，这将大大节省开发者的时间。

图0：Firefox 70 将引入“非活跃 CSS”，快速排查 CSS 属性

具体情况是，当选中一个元素时，元素的 CSS 属性如果对其没有影响，那么这个属性旁边会显示一个信息框，说明其不会起作用，并且解释原因。以上图为例：flex-grow 的设置不会在 .outer-wrapper 中生效，因为它不是一个 flex 项。此外，信息框中还会给出改进建议。

此前 Firefox 在 v65 中也引入一项新奇的 CSS 功能 Flexbox Inspector。

图1：Firefox 70 将引入“非活跃 CSS”，快速排查 CSS 属性

Flexbox Inspector 可以帮助开发者了解 CSS Flebox 元素的大小、位置与嵌套情况。只要开发者在标记视图中选定了 Flex 容器或其它元素，那么就会自动出现 Flexbox 信息，开发者可以在布局面板中的 Inspector 标签下看到相应内容。

图2：Firefox 70 将引入“非活跃 CSS”，快速排查 CSS 属性

这些 CSS 工具对于前端工程师或者故障排查都能提供极大的便利，具体情况可以查看：

本文文字及图片出自 OSchina

你也许感兴趣的：