属性不会影响所选元素以及原因

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

图片 1

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

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

图片 2

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

图片 3

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

  • https://www.mozilla.org/en-US/firefox/70.0beta/releasenotes

(文/开源中国)