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

h4cd
 h4cd
发布于 2019年09月13日
收藏 19

在最新的 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 工具对于前端工程师或者故障排查都能提供极大的便利,具体情况可以查看:

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:Firefox 70 将引入“非活跃 CSS”,快速排查 CSS 属性
加载中

精彩评论

rouway
rouway
非常好的功能,經常很多css都不起效,有這個可以快速定位。
seakingii
seakingii
这个功能不错
xflcx1991
xflcx1991
版本号终于追到70了,快赶上Chrome了
无邪9527
无邪9527
点击[http://img01.sogoucdn.com/app/a/200678/c102810c92fb91608fe2f464a8dc1d81.gif]查看表情

最新评论(18

开源中国首席罗纳尔多
开源中国首席罗纳尔多
怎么看3d dom和怎么看这个元素绑定了对应事件的调用函数?
久永
久永
果然FF是业界良心!
有个问题想请问大佬,
如果想使用FF内核嵌入自己的程序,
该如何弄?哪里有资料?
生如秋叶
生如秋叶
实用,给火狐点赞!不过,期待啥时候再加上:打开CSS文件,显示哪些样式定义未在任何元素上生效
Liuzh_533
Liuzh_533
目前的 chrome 支持,结果不一定准确,需要看过所有页面才能更准确。
a_nuo
a_nuo
赞火狐一个
代码天下
代码天下
很实用
a
aguangvv
这才是火狐的正确打开方式
黄健聪Jeff
黄健聪Jeff
👍🏻
李永波
李永波
xflcx1991
xflcx1991
版本号终于追到70了,快赶上Chrome了
开源中国-首席村长
开源中国-首席村长
太好了,我将选用Firefox 70来开发网页项目!
返回顶部
顶部