弹性元素可填充页面额外空间,属性不会影响所选元素以及原因

  • 栏目:基础 时间:2020-05-01 19:24
<返回列表

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

计划于本月 29 日发布的 Firefox 65 开发者工具中将加入 Flexbox Inspector 功能。

图片 1

图片 2

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

Flexbox Inspector 是一个新的开发者工具,可帮助开发者了解 Flebox 元素的大小、位置与嵌套情况。

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

CSS Flexbox(弹性盒子)是一种越来越流行的布局模型,它是一种用于在行或列中布局元素的一维布局方法,弹性元素可填充页面额外空间,也可以适当收缩以适合较小的空间,有助于构建强大的动态页面,但是它的学习曲线非常陡峭。开发者在一篇博客上具体介绍了该功能的研发背景与特性。作者说 Flexbox 的难度之大,甚至当初团队在开始 Flexbox Inspector 项目的时候都不确定自己足够了解 Flexbox,也不清楚将面临什么困难。

图片 3

经过一系列研究与设计,最终完成了 Flexbox Inspector 项目,作者表示,花了很大精力去做这个功能之后,他们担心它会被淹没在庞大的 Firefox 开发者工具集里,使得人们无法找到它或者不想去使用它。于是他们对此采取了积极主动的态度:只要开发者在标记视图中选定了 Flex 容器或其它元素,那么就会自动出现 Flexbox 信息,开发者可以在布局面板中的 Inspector 标签下看到相应内容。

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

图片 4

图片 5

目前该功能可以在 Firefox 开发者版本中试用,更具体内容查看原博客:

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

(文/开源中国)    

(文/开源中国)    

上一篇:在2.5版本以后开始支持注解的方式来配置依赖注入,Boot针对企业开发场景提供了各种『开箱即用』的 下一篇:没有了

更多阅读

弹性元素可填充页面额外空间,属性不会

基础 2020-05-01
在最新的 Firefox 70 Beta 版本中,引入了一项名为“InactiveCSS”(非活跃CSS)的功能,DevTool 新工...
查看全文

在2.5版本以后开始支持注解的方式来配置

基础 2020-05-01
Spring Boot2.2.0.M6 已发布,可以从里程碑仓库获取。 看完本文你将掌握如下知识点: spring在2....
查看全文

说吐槽可能不太合适,所以通常使用运算

基础 2020-05-01
近日名为 Evan Martin 的 Google 员工在 TypeScript 的 GitHub repo中发表了对 TypeScript的“吐槽”(就是...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有