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

火狐社区

登录    注册

用新浪微博连接 QQ互联

Mozilla.org用CSS Grid小试身手

yingliu Mozilla员工 发表于 2017-4-12 14:22:54 | 显示全部楼层 [复制链接]
3 1557
本帖最后由 yingliu 于 2017-4-12 14:39 编辑

最近,各大浏览器终于将兼容 CSS Grid 了(Firefox 52 和 Chrome 57 已开始提供支持,Edge 也有此计划)。Mozilla 团队想借此文展现一下CSS Grid 的几大特性,并让 Mozilla 自己的设计与开发人员也在 mozilla.org 官网上实验这个技术。于是,Mozilla 建立了在线示范的网站来呈现 Grid 的特点和功能,并且提供一些有用的资源。因为 mozilla.org 的网页开发者是用 Grid 从零开始打造这个网站的,所以他们也得到了宝贵的实践经验。

整个网页(包括页面上方的图像)都是以 CSS Grid 制作的。
1OwOm6fckw.png

网络上本来就已经有取之不尽的范例和说明,这些资源足以帮助开发者们了解 CSS Grid 的基本概念,所以可以很轻松地开始编排网页。例如,Mozilla的开发人员Jen SimmonsRachel Andrews就提供了好用的 Grid 实例和课程,MDN 上也找得到 CSS Grid 的详细操作说明。

在设计这个网页时,Mozilla 的目标是:
  • 向开发和设计人员展现 CSS Grid 的潜力;
  • 将目前唯一一个内建于浏览器的 Grid 开发者工具——Firefox Developer Tools: Grid Inspector 介绍给大家认识;
  • 在 Mozilla.org 上架一个以 Grid Layout 编排而成的网页;
  • 证明任何人只要掌握了 CSS 的基本原则,就能轻松使用 CSS Grid 来编排网页。

Grid 具备强大的版面布局功能。Mozilla希望能通过此示范网站展示其几大功能特性。以下是几个目前已经上线的功能,但除了这几项以外,还有许多非常有趣的功能供大家挑选。

此外,开发人员们还想在示范网站上用 Firefox 的GridInspector 工具来炫技。此工具能让你在编排版面或研究其他以 CSS Grid 布局的范例时,直接在浏览器上查看网格的网格线。

在展示网页上使用 Firefox Grid Inspector

2Mvp4v7A.png

欢迎访问此示范网站,并反馈您的想法或建议。通过这样的交流,Mozilla 希望能帮您学会并开始使用 CSS Grid。

除了本文以外,负责设计此示范网站的前端开发人员也将会写相关的文章,与大家分享他们的 CSS Grid 初体验!


英文原文

隐元 老狐狸
发表于 2017-4-12 20:27:41 | 显示全部楼层
杰出的mozilla总是在改善用户的体验!
lonr 小狐狸
发表于 2017-4-12 21:28:49 | 显示全部楼层
语法好复杂呀
310971373 狐狸精
发表于 2017-4-13 09:23:55 | 显示全部楼层
支持支持!!!前端开发神器
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发新帖
论坛更多 »
火狐微信
快速回复 返回顶部 返回列表