|
|
51CTO旗下网站
|
|
移动端

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

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

作者:h4cd来源:开源中国|2019-09-15 19:00

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

https://www.mozilla.org/en-US/firefox/70.0beta/releasenotes
https://www.oschina.net/news/103673/flexbox-inspector-will-add-to-firefox-65

【编辑推荐】

  1. 4款公认强大的浏览器插件,装机必备……
  2. 浏览器扩展程序开发者对谷歌和 Mozilla 表示不满
  3. 为什么强烈推荐Java程序员使用Google Guava编程
  4. 微软第一个测试版的 Chromium 的 Edge 浏览器已经上线
  5. 苹果、Google、亚马逊、Facebook,遭“强势”反垄断调查
【责任编辑:张燕妮 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

用Python玩转excel

用Python玩转excel

让重复操作傻瓜化
共3章 | DE8UG

136人订阅学习

AI入门级算法

AI入门级算法

算法常识
共22章 | 周萝卜123

120人订阅学习

这就是5G

这就是5G

5G那些事儿
共15章 | armmay

120人订阅学习

读 书 +更多

Scrum敏捷项目管理

本书详细描述如何在复杂技术项目中使用Scrum,并结合真实的Scrum案例及专家洞识,在简明及高度概括的理论之上更侧重于实践,并不断强调Scru...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微