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

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

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

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

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。