[译] 由 CSS 网格系统的创造者们所讲述的故事

时间  2019-11-21
标签 css 网格 系统 创造者 讲述 故事 栏目 CSS 繁體版
原文   原文链接

一个来自编辑者的小提醒： 咱们想要感谢 Microsoft Edge 团队，由于他们分享了与许多对 CSS 网格系统的发展有杰出贡献的专家的采访手稿。在编辑这份关于 CSS 网格系统历史的文章中，这些手稿十分珍贵。同时，你也能够在 Channel 9上观看他们制做的关于这些采访的短视频 Creating CSS Grid。css

在 2017 年 10 月 17 日，微软的 Edge 浏览器发布了 CSS 网格系统。基于许多缘由，这是 CSS 历史上的一个里程碑。首先，它意味着全部的主流浏览器如今都支持这个使人惊叹的布局工具。这个很棒的案例体现了主流浏览器在统一标准上的成功以及跨浏览器之间的合做。可是最后，或许是最有趣的一点，此次事件将一个原本超过20年为周期进行循环制定标准的过程，今后改写。html

原本就不是一个新想法

现代的网格布局系统自从工业革命以来就已经存在，网格一直是这么多世纪以来使用的一种设计工具。就其自己而言，CSS 基于网格的布局从一开始就不该该是一件使人震惊的事。前端

从 Bert Bos 博士处得知，他同时也是与 Håkon Wium Lie 一块儿的 CSS 共同创造者，他对于网格布局已经思考过好久了。android

“最初的 CSS 很是简陋”，Bos 回想到，“CSS 自己只是一种在当时的小屏幕下建立文档视图的工具，20 年前，屏幕很小。因此，当咱们发现咱们或许能够为文档建立样式，咱们原觉得，既然有了一套建立样式的系统方式，还能对文档作什么呢？”ios

对于这个问题，书籍和杂志中的布局方法给了咱们巨大的启发。css3

“每一页的内容是独立的，可是每一页都有一个肯定的布局” Bos 说。“每一页的页码是在固定位置的。而且图片老是靠左，靠右或者居中。咱们也想要模仿这样。”git

在初期阶段，浏览器的开发者们认为咱们这个想法实现起来会太过复杂，然而网格布局的概念逐渐地流行了起来。在 1996 年，Bos, Lie 和 Dave Raggett 共同提出了一个“frame-based（基于边框的）”布局模型。以后，在 2005 年，Bos 发布了 Advanced Layout Module（高级布局模块），此文档以后变成了 Template Layout Module（样式布局模块）。尽管在 web 设计的社区中有关于此的大量关注与热情，可是没有一个提案可以真正在浏览器中实现。github

再一次动情

随着网格概念正在有条不紊的被 CSS 工做组讨论，大多数人当时都但愿其中的一个提案能够最终被采纳。而最终，真正被采纳的提案是由一群在微软的开发者所提出的，他们一直在寻找一个健壮的布局工具是为了更好的开发他们 web 端的产品。web

Phil Cupp 当时一直是从新设计 Microsoft Intune（一款计算机管理工具）的 UI 团队的负责人。Silverlight 是一个源于 Windows Presentation Foundation 的强大布局工具的浏览器插件，而 Cupp 是 Silverlight 的狂热粉丝，而且甚至当时一开始就打算以这种方式去从新构建新的 Microsoft Intune。然而以后，Microsoft 一直在 Windows 8 的计划准备阶段要使用 web 端的技术打造应用。在得知此以后，Cupp 想要 Intune 这款产品也照着作，可是他很快就意识到 web 现阶段急需一款更出色的布局工具。算法

因而，他加入了一个新的团队，为了可以专一于将已经存在于 Silverlight —— 一个相似于网格系统的布局方式 —— 引入 web 端。有趣的是，团队中的人已经意识到了这个需求。同时，许多开发者当时正在专一于 iPhones 和 iPads，这两种设备只须要开发者专一于两种不一样的而且不变的画面大小（也有多是 4 种，若是考虑横竖屏）。因而，Windows 不得不支持大量的不一样的屏幕大小，分辨率和形状因子。对了，还有可变化大小的屏幕。简而言之，Microsoft 急切须要一个健壮而且灵活的布局工具对于 web 端的设计，尤为假使 web 端 将会成为开发 Windows 原生应用的平台。

在与不一样的微软团队之间努力达成第一份草案以后，Cupp 和他的团队发布了一款网格布局工具，即在 2011 年 IE10 发布 -ms- 前缀以后。他们紧随其后发布了草案 draft Grid Layout spec，随后此草案也正式在 2012 年进入 W3C。

固然，这也不是第一次甚至也不是第三次 W3C 收到一份关于网格布局的提案。但此次不一样的是，他们还对草案进行了一次可评估的实现。不只如此，咱们，做为开发者，最终也有了能够真正上手的机会。网格布局今后就不只仅是理论上的可能性了。

少数的几个具备前瞻性的 web 设计者和开发者好比在其中最重要的 W3C 的客邀教授 Rachel Andrew，开始试着对刚出炉的提案进行改进。

“我刚接触到 CSS 网格布局是在法国，一个由 Bert Bos 领导的工做室。而且我不会说法语，可是我看到了演示而且试着去操做” Andrew 回想到。“我看到他在说明……一个布局模板的草案。我认为他真的在就印刷版而讨论而且使用这种工具去建立印刷式的布局，可是当我亲眼看到那个草案时，我感受，不，我认为这是 web 所须要的东西。这是咱们真正须要而且可用的工具。 因而，我开始钻研于此，而且开始逐渐懂得它的意图，而且试着实现了一些简单的例子。”

“以后，当我看到微软对于网格系统的实现，我意识到这是一个真正能够用来开发而且向别人展现的工具。我当时想要尝试这个新事物，不只仅是由于有趣，也是由于我喜欢去在尝试的同时也让更多的人参与进来。事实上，我一直在这样作，由于我知道这种提案老是昙花一现后就没有人真正会继续讨论了，因而就再次消失了。可是，我绝对有信心网格布局这个提案不会消失，这将会是被世人看到而且让人激动的事物。使人欣慰的是，咱们最终让它进入了浏览器，使得更多的人可使用它。”

草案的进化

由 Cupp 向 W3C 提案的而且已经在 IE10 上实现的草案，并非咱们如今的网格系统。它是通向正确方向的一小步，但远没有达到完美。

“Phil Cupp 的提案是一个十分有迹可循的系统，”Elika Etemad 回想到，他是 W3C 的受邀教授，也是 CSS 网格系统布局模型的编辑者。“当时手头只有少数须要处理的系统，而且都没有名称，没有模板，什么都没有。可是有一个布局算法，他们坚信能够有效，由于他们已经进行了实验性的实现。”

“Bert [Bos] 最开始想出的网格模型才是我加入 CSS 工做组的缘由，”谷歌的一位 CSS 网格模型的编辑者 Tab Atkins 回想到。“在当时，我一直在学习许多糟糕的布局小技巧而且也看到了使用 CSS 网格模型写页面的可能性。以后，我看到了 Phil Cupp 的关于网格模型的草稿，而且发现，基于它以后的算法，它完美的解决了布局的问题，我意识到这就是应该存在的事物。”

这一样也是一个使人信服的提案，由于不一样于以前的过于死板的布局提案，这个提案是为了响应式的网格系统。

“你能够很清楚网格单元的大小，” Etemad 解释到，“可是你也能够说，网格的大小就是内容所占据的。”而且这也是咱们须要去进一步发展的方向。

然而，这个草案并非像许多 CSS 工做室认为的那么的拿来即用。因此网格布局的工做室期待引进一些以前的探索想法。

“咱们真正喜欢 Bert [Bos] 的提案是由于网格布局的优雅的交互实现，从而使得直观上去布局变得容易。” Etemad 说道。“这就像是 ASCII 艺术格式去建立一个图片模板，你能够输入你的代码，好比图片的列宽和行高。你能够将此嵌入到相同的 ASCII 图表，这也使得别人懂得你在干什么变得容易。”

当时是 CSS 工做组的共同主席的 Peter Linss 也建议将网格的 线 概念包含到提案中（而不只仅只是讨论 轨迹 ）。他相信加入这个熟悉的图像设计概念会使得这个提案对于设计者变得更加易于理解。

“当咱们最开始设想 CSS 网格系统时，咱们过于在一个以应用为主导的模型中考虑，”微软的 Rossen Atanassov 回想到，以前她也是此提案的编辑者。“可是网格的概念已经不是新概念了，我意思是，网格已经存在很长时间了。而且传统的网格类型一直是基于线段的。咱们可能一直有些忽略线段了。当咱们意识到能够将对于应用端的实现和对于网格排版印刷一方面的理论进行结合，对于我我的，是真正激励我继续发展网格系统的最 兴奋 的瞬间之一。”

因此 CSS 工做组开始稍微调整微软的建议去包含这些想法。最终的结果使得你能够认为网格系统是轨迹，或者线段，或者模板，甚至是三者的结合。

固然，达成这一目标并不容易。

打磨，不断打磨

你能够想象到的是，在微软的提议，Bos 的先进布局，Linss 对于网格线段的添加这三种不一样的想法中作折中，不是简单的剪切和复制，这里有许多比较微妙的小方面和边界条件须要去确认。

“我认为一些比较微妙的东西在一开始就已经占据了这三个不一样提议的方方面面，咱们一直想要去结合这三个提议而且产生出一个新的系统，一个足够优雅接受全部提议的连贯的系统。”Etemad 说到。

一些想法从第一阶段就是不合适于 CSS 网格系统。Bos 的概念，举个例子，容许任意的对于网格布局的继承好像就是该网格的一个孩子同样。这就是常常被引用做为“子网格”的特色，可是并无进入 CSS 网格布局 1.0。

“子网格一直是最早在众多被指出的提案中被说起的”，Atanassov 说到，“而且一直以来是一个被眷顾的提案但也遇到了一点困难在整个过程当中。由于它使得提案的工做很大程度上的犹豫不决。同时也让许多对其的开发人员望而却步。但这也是最令我兴奋的一个事情。而且我知道咱们将会成功解决它而且它将会变得伟大。只不过要多花些时间。”

一样，处理映射到网格线的内容有两种选择。一方面，您可让网格自己具备固定维度轨道，并根据溢出的内容调整溢出内容映射到哪一个网格线结束。或者，您可让轨道增加以包含内容，以便它在预约义的网格线处结束。不能两个兼而有之，由于它能够建立一个循环依赖，因此该小组决定搁置这个问题。

最终，鉴于 CSS 工做组对于提案的三个主要目标，咱们作出了一些修改。以下：

  1. 功能强劲： 他们想要 CSS 网格系统让设计者在表达他们的想法时，感到“以简单的方式制做简单的东西，而且使得设计复杂的事物变得可能”如同 Etemad 的想法同样；
  2. 健壮性： 他们想要确保不会有任何的缺口使得布局塌陷，滚动禁止，或者内容忽然的消失变得可能；
  3. 还有性能卓越： 若是背后的算法不能足够快的去优雅的处理真实世界的状况，好比浏览器重设事件或是动态内容加载，他们知道，若是这样的事情发生，将会使得用户变得极其沮丧。

“这就是为何设计一个新的 CSS 布局系统须要不少时间”，Etemad 说到。“这花费了许多时间，付出了许多努力，还有不少为其贡献人的爱心。”

真正上场

在一个候选提议（又称最后一版的草稿）能成为一个正式的提议（通俗地讲就是标准），W3C 须要去查看至少两个独立的，可共同使用的实现。微软当时已经实现了他们的提议，可是内容已经修改了很多在那之上，他们也但愿其余浏览器在他们投入更多的开发人员和精力去更新提议以前，可以接过这个火炬。__为何？__其实，他们当时有一点担忧，由于另外一个看起来颇有前途的布局提议：CSS 区域。

CSS 区域提供了一种方式，可以在页面中的一系列预约义的“区域”内流动，从而实现复杂的布局。微软在早前发布了一款 CSS 区域的实现，同时在 IE10 以后加入了一个前缀。一个小改动的支持 CSS 区域的版本也在 WebKit 中加入了。Safari 也跟随着，和 Chrome 同样（在那时仍然运行着 WebKit 内核）。可是以后谷歌在 Chrome 中放弃了，火狐也反对这个提案而且表示永远不会进行开发。因而，这个想法如今被打入冷宫。甚至 Safari 在下一次版本更新时也会放弃对 CSS 区域的支持。简单得说，微软想要确保，在投入更多的开发人员以前，网格不会遭受以前 CSS 区域的命运。

“咱们当时有开发人员马上就说到，哇哦，这太棒了，咱们必定要作。”Atanassov 回忆到。“可是这是一方面...说到，这确实很棒，咱们应该作这个。因而下一步就是增长资源而后给开发人员付工资让他们去真正地实现这个想法。”

“也有一些其余开发人员的想法 —— 其中一个是来自谷歌的提案编辑 —— 可是也有一些迟疑去贡献代码，”微软的 Greg Whitworth 回忆到，一个来自 CSS 工做组的成员。“贡献代码才是真正重要的。”

一个有趣的形式变化是，媒体公司 Bloomberg 雇佣了 Igalia，一个开源项目的顾问，去同时帮助 Blink 和 WebKit 进行 CSS 网格系统的开发。

“回到2013年，[Bloomberg] 与咱们进行接触...由于他们当时有十分针对性的需求关于定义和使用类网格的结构，”同时是开发者和合做伙伴的 Sergio Villar Senin 回忆到。“他们主要是让咱们帮助他们实现 CSS 网格布局系统的一些针对性的需求，而且也是为了 [Blink and WebKit] 去实现。”

“[Igalia 的工做] 的帮助是极大的，由于以后开发者能够发现这个提案是真的有可能帮助他们开发网站的工具，”Whitworth 补充到。

可是尽管有着两个已经对于提案的实现，一些人仍是仍然关心这个提案可否真正被使用。毕竟，仅仅是由于一个渲染引擎是开源的并不意味着它的负责人会接受每一次新的版本更新。而且即便他们赞成，如同 CSS 区域经历过的同样，也不能保证这些功能继续存在。幸运的是，许多设计者和开发者都对网格系统感兴趣而且开始向浏览器提供商去施压以便于实现这个新的布局系统。

“CSS 网格布局在那时有一个关键性的转变” Whitworth 说到。“随着 Rachel Andrew 的加入，在有关于 CSS 网格的网站 Grid by Example 上，他建立了许多样例而且激起了人们的兴趣，从而开始真正去推广它而且向全部的 web 开发者展现网格系统到底能作什么以及它是如何解决问题的。”

“以后，再过不久，Jen Simmons [一个在 Mozilla 的设计布道师]建立了一个叫作 Labs 的网站，她放了许多她使用 CSS 网格系统作的样例而且将对于 CSS 网格系统的热爱和动力在社区中得以保持。”

网格系统同时促进了传统和非传统的布局方式。这里有一个网格布局的案例来自于 Jen Simmons 的实验室，能够再 Edge 16 上浏览。若是你更喜欢在非 Windows 上用 Edge 浏览，你也能够在 BrowserStack 上浏览 (须要帐户)。

随着设计思想的领导者好比 Andrews 和 Simmons 不断地陈述 CSS 网格系统功能的强大和多样，web 设计者社区变得愈来愈活跃。他们开始在相似于 CodePen 的网站上，分享他们的想法而且开发他们本身的网格技巧。咱们并不会常常花功夫在这一方面，可是开发者们的热情可以支持甚至去使得一个提案变成标准。

“咱们能够去写一个提案，咱们能够去实现它，可是若是没有开发者的实际需求或者具体对于功能的使用，不管咱们付出多少的努力都没有意义。” Whitworth 说到。

不幸的是，如同像 CSS 网格系统这样的提案，对于其具体的实现的开销常常会使得浏览器的提供商难以作出承诺。因而，没有浏览器对于提案的具体实现，就没有开发者去踩坑和实验，也就很难激发你们的热情。没有了开发者的热情，浏览器开发商就不情愿投入资金去验证是否这个想法可以得到利润。我相信你能发现这个问题。实际上，这也是至少至今，为何 CSS 区域提案逐渐暗淡的缘由之一（移动芯片组的性能是另外一个被引用的缘由）。

幸运的是，Bloomberg 愿意去扮演捐助者的角色而且为这个 CSS 网格系统进行募捐。因此，靠着它的帮助，谷歌发布了 CSS 网格系统的实如今 Chromium 56 安卓版，时间为 2017 年 1 月。随后在 3 月初，谷歌也在 Chrome 上推出了网格系统，也就是 Mozilla 在 Firefox 上推出的两天后。在当月结束以前，Opera 和 Safari 也支持了。

讽刺的是，最后一个支持的浏览器公司是微软。可是在这周的早些时候他们也在 Edge 上发布了。

“随着在 web 平台上 CSS 网格系统的真正出现，你一直在等一个机遇” Whitworth 说到，就在刚刚 Edge 支持网格系统以前。“你想要一个完美的提案，你也想要提案的开发者有趣，同时你也想要 web 开发者提出的许多需求。2016 年底到 2017 年初就是这样一个甜蜜点。全部的事情都发生了。咱们进一步升级了咱们的实现而且激动的要再次发布。”

“我从没有想起某一个功能的发布如同 CSS 网格系统同样。每个主流浏览器都将会在一年内发布他们本身的实现，而且将会是可共同合做的形式，由于咱们一直在标识后实现，测试，进一步开发新的功能，而且当这个新版本被认为是稳定的，全部的浏览器都会原生的支持。”

“随着每个新版本的发布都几乎同时”，Atkins 说到，“[网格系统]从一个想法，一个能够仅仅使用单一布局就进行开发而且不须要担忧快速出现缺陷的想法...这已是我想到的可以达成这一阶段的最快速度。”

网格系统对于 CSS 的意义

随着网格系统的支持再也不成为问题，咱们能够（也应该）开始使用这个使人惊奇的工具。对于咱们这种已经使用传统 CSS 快二十年的人，其中一个挑战就是，CSS 网格系统须要咱们有一种新的对于布局的思考模式。

“这已经不只仅是附上你的外边距值和属性对于每个独立的元素而且摆放他们，” Bos 说到。“你如今能够有一个不一样的模型，能够先设计布局，而后将不一样的元素拽入布局中。”

“它是咱们为 CSS 发明的最强大的布局工具，” Atkins 说。“它使页面布局如此简单易行...人们一直在寻求更好的布局。仅仅是出于做者能力的缘由，而且由于咱们使用的小技巧并无像旧的方法那样强大，只是把它放在一个很大的旧表元素中 — 这是一个很受欢迎的缘由；它让你作强大的复杂布局。这是维护最糟糕的事情，也是语义最糟糕的事情。而网格可让你恢复这种力量，这真是太棒了。”

“CSS 网格省略了咱们必须作的全部复杂的事情为了实现基本布局并使其看起来彻底没必要要，” Etemad 说道。“你能够直接与 CSS 引擎交谈，而不须要中间翻译。”

CSS 网格提供了不少功能，咱们不少人才刚刚开始掌握。看看咱们从哪里开始会颇有趣。

“我认为这将是变革性的，” Etemad 说。“它将把 CSS 变得返璞归真，即样式和布局语言，将全部逻辑从标记中解放出来，并容许咱们从一开始就一直试图从内容和样式中清晰地分离内容和样式。”

“我对 CSS 布局的将来感到兴奋，” Whitworth 说。“CSS 网格不是终点；它实际上只是一个开始。在 IE 10中...[咱们发布了] CSS 区域以及 CSS Exclusions。我认为随着网页设计师开始愈来愈多地使用 CSS 网格，他们会意识到 为何 咱们将全部这三个一块儿发布。也许咱们能够继续咱们用 CSS 网格系统作的事情，并继续改进这些规范。让供应商也但愿实现这些。让社区对他们感到兴奋，并进一步推进网络布局。”

Andrew 说：“我认为如今咱们已经拥有了网格系统，Exclusions 也是绝对有意义的。”“它为咱们提供了一种在[网格]中放置内容并在其周围包装文本的方法，而咱们没有任何其余方法能够作到这一点...而后这样的东西就如同区域...我但愿看到这种进步，由于...一旦咱们可以构建一个漂亮的网格结构，咱们就可能但愿经过它来传播内容。咱们没有办法作到这一点。”

“就我而言，这并不止于此；这只是开始。”

开始认识网格系统

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程