请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

用新浪微博连接 QQ互联

Firefox开发者版本新增CSS网格及高亮功能

yingliu Mozilla员工 发表于 2017-1-25 16:23:40 | 显示全部楼层 [复制链接]
2 1897
本帖最后由 yingliu 于 2017-1-25 16:25 编辑

CSS 网格 (Grid) 排版功能已被新增到 Firefox 52 开发者版本(Developer;立刻下载!)。并很快将加入 Chrome 中 (希望 Safari 与 Edge 也尽快加入)。不久的将来就能在现有常用的浏览器上通过网格开发网页了。

CSS网格.png

网格排版功能让用户省去 HTML相关的版面配置考虑,仅需 CSS 网格线就能呈现所需的效果。此外也可适用媒体查询(Media Query)或不同的情况。你也可将 CSS 网格作为替代方案,取代如 Twitter 的「Bootstrap」或「Skeleton」;此两种框架必须搭配精确且紧密的 CSS 类别架构,才能定义内文网格线。

目前的 Web 开发方式,常常会碰上破版或程序代码膨胀 (Code bloat) 等情形,维护成本也较高,但 CSS 网格却有潜力改变版面配置方式,进而降低相关风险。Jen Simmons 将之称为「Real Art Direction forthe Web」;RachelAndrew 也通过「Grid by Example」通知、分享、宣传网格的优点。如果你刚接触 CSS 网格排版功能,请一定要看下面这个视频:


如视频中所示,网格强调工具可协助呈现出网页中的网格线。另外正在规划其他相关工具,将持续改善网格的功能。

若要体验此工具,请先确认自己已安装最新版的 Firefox 开发者版本,接着开启具备网格的页面(推荐先体验这些展示页面)。进入「工具 (Tools)」→「Web开发者 (Developer)」→「查看器 (Inspector)」,找到其上显示了「grid;」属性的元素,再点击「grid」旁的图标,就会出现网格。

Firefox 开发者工具团队已规划后续网格强化功能,要提供更简单易用的 CSS 网格。你可通过下列记录追踪进度:

另可通过 bug 1181227 追踪以上问题。



海豚之家 社区新人
发表于 2017-1-27 12:57:46 火狐社区移动版 | 显示全部楼层
谢谢分享!
310971373 狐狸精
发表于 2017-2-4 10:26:01 | 显示全部楼层
开发工具越来越便利了,加油!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发新帖
论坛更多 »
热门活动更多 »
  • [免费报名]量子火狐中国社区见面会 Firefox Quantum Fan Meeting[...

    立即参与
火狐微信
快速回复 返回顶部 返回列表