jacty

Eric的归档博文:CSS Grid!

jacty · 2016-12-29翻译 · 723阅读 原文链接

Grid布局来了,Grid布局来了。千真万确,各大浏览器将发布对Grid布局的支持。唔哈哈哈哈~

什么?什么?什么?你说什么?

2017年3月,Chrome和Firefox将开始默认支持Grid布局。其中,Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid,所以,谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持,那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。

发布日期会不会跳票?

一些奇葩的问题可能延后版本支持。发布日期因此跳票。然而,目前版本的浏览器已实装Grid的相关实现代码,当开发者们认为可以公开发布了,他们往往都会如期发布。

所以,Grid将在明年3月得到支持?

是的!

还有等多久我才能开始使用Grid? 两年还是三年?

2017年3月就可以开始使用了。所以,是大概4个月后。

但是,不会得到全局(全浏览器)支持。

圆角属性目前都尚未得到全局支持,但我相信你一定用过。

所以,你是在忽悠我?!

事实是,布局与设定元素的UI样式有所不同。如果你有着大量的IE9用户基础,把布局转到Grid,或者只用Grid,可能会有点棘手。但我相信在老浏览器上,你一定有可行的布局方案,不是么?

当然

如我之前所说,Grid将在2017年3月得到公开支持。因为任何支持Grid的浏览器都支持@supports(),所以,可以使用@supports()来为支持Grid的浏览器做Grid布局,而对于不支持Grid的浏览器使用float和inline-block结合的方式布局。之前,Jen Simmons写过一篇介绍@supports()的文章,而我写过一篇介绍如何使用它增强开发体验的短文。在使用Grid的时候也可以使用这条思路:首先使用兼容度高的布局方案,然后在@supports()中封装最新发布的布局方案。最后,逐步优化已有的布局使之接近设计稿。

对同一个页面写两套不同的布局方案似乎效率太低。

我同意这个观点。从某个角度来看,学习Grid是一种必然。那为何不选择在工作中学习它呢? 与其占用额外时间编写与业务毫不相干的示例来学习它, 不如使用你已经理解并知道如何使用的布局方式来实践。这将使得你在工作中建立自己的一套思路,游刃有余且提升工作效率。

我不如等别人开发出一个框架出来再使用吧?

当然可以,然而需要知道的是:Jen Simmons发现 Grid其实就是一个框架。使用一个框架来抽象出另一个框架似乎毫无意义。当然,还是会有人去这么做的。 以后可能会有 Gridstraps, GAMLs 以及 1280.gses 而你有什么? 当这些框架面世,如果你打算使用其中之一的话,你不得不花费大量时间和精力来学习使用它。我建议你投资这些时间到学习实实在在的Grid上,以便你可以建立自己的布局方案, 而不是被框架中设定的假想需求所绑架。

Grid听起来像是tables 2.0。我想大家都不会否认使用table布局是多么糟糕的一个主意吧。

使用table标签来布局的确是个糟糕的主意,尤其在它很火的那段时间。需要大量的hack来实现边框,还无法实现圆角。大家不喜欢它的原因是,任何页面都需要50KB的HTML标签和3个服务器请求, 而给一个页面完整布局的消耗是这的一百倍之多。此外,table将一切都定死在布局中,使得内容难以阅读、理解以及被搜索。大家厌恶它的原因不是它难以阅读,而是它难以阅读外还使用麻烦。

使用Grid布局,你可以使用简单、易于理解的标签,且可以任意自由得排版布局。比如,你可以将源码的最后一个元素放在布局的最前面。你可以对调页面上相邻的两个元素。不再会有诸如“如何排列这些元素以使得他们布局正确?”的难题。你按需排列他们,然后再给他们设定布局即可。这是我遇到的样式与结构分离的最佳解决方案。

不仅如此,因为CSS transform, clipping, float等属性的存在,你不需要把所有需求都交给grid布局来完成。在视觉创意上,有无限可能。你无法想象,我也无法想象。无人可以。

所以Grid解决了我们遇到的任一布局问题么?

不,目前还是存在一些小缺陷。Subgrid暂且不会发布,所以之后会出现一些类grid的布局方案,他们本应该是很简单的,但事实可能是很难甚至无法实现。比如,你不能直接对一个grid的cell或者area设定样式;所有grid的area和cell必须为矩形,所以无法创建L型的grid area。Grid的gap在指定轴上只能有一个值,非常像table中的border-spacing

你通常想绕过这些限制,但是他们终究还是存在的,至少目前是。此外,可能会发现一些bug。如果不是bug,则可能是文档未能述及的一些使用场景。但有很多人已经很努力得查找bug和为各种使用场景提供支持了。这是固定流程以使grid进入到目前这个公开发布的状态。

如果火狐和Chrome延迟一个或者两个版本支持Grid,而其他浏览器按时支持了,怎么办?

这种情况下,需要更长的一段时间来使得你封装在@supports()中的Grid被这些延迟支持的浏览器认识。不是什么大问题。这种方法对MS Edge同样奏效。Edge尽管是第一家使用私有后缀解析Grid的浏览器,然而,它目前还是不认识Grid语法。一旦Edge开始能够解析Grid的新语法和新行为后,你的CSS就能开始正常工作了。火狐和Chrome等其他浏览器也是如此。

好吧,那么我该去哪里学习Grid?

网上有许多好的资源,以后会有更多的。如下是目前一些优质的学习资料:

  • The Experimental Layout Lab of Jen Simmons — great for seeing layout examples in action using a variety of new technologies. If you’re laser-focused on just Grid, then start with example #7, “Image Gallery Study”, but the whole site is worth exploring. Bonus: make sure to responsively test the top of the page, which has some great Grid-driven rearrangements as the page gets more narrow.

  • Rachel Andrews’ Grid By Example — a large and growing collection of examples, resources, tutorials, and more. There’s a whole section titled “Learn Grid Layout” that’s further broken up into sections like “UI Patterns” and “Video tutorial”.

  • CSS-Tricks’ A Complete Guide to Grid — a boiled-down, pared-down, no-nonsense distillation of Grid properties and values. It might be a bit bewildering if you’re new to Grid, but it’s the kind of resource you’ll probably come back to again and again as you’re getting familiar with Grid.

  • CSS Grid Layout specification — if all else fails, you can always go to the source, Luke.

但是,记住!在2017年3月前,你访问如上这些网站,你需要确认你的浏览器已经打开了Grid支持的标志,以便其中的示例能够运行。Igalia在开启CSS Grid布局中对此有所介绍,而Rachel在中一个浏览器页面有更深入的探讨。

以前总是被布局问题所困扰,现在恐怕不会了

是的,是的,我能感同身受。但现实就是这样的,Grid来了。 开始准备吧。

相关文章