[译]使用 CSS Grid：以兼容不支持栅格化布局的浏览器

时间 2019-11-07

原文原文链接

原文地址：Using CSS Grid: Supporting Browsers Without Grid

原文做者：Rachel Andrew

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：Raoul1996

校对者：AceLeeWinnie、su-dan

摘要css

当使用任何 CSS 的新特性的时候，浏览器的兼容问题都必须去解决。与 Flexbox 和 CSS Grid 同样，在使用 CSS 新特性布局时，兼容性比性能加强更值得考虑。前端

在这篇文章中，我将探索现今处理浏览器兼容问题的方法。为了让咱们如今就用上 CSS 的新特性，咱们能够作出哪些努力，仍然给那些不支持新特性的浏览器提供很好的体验？android

咱们说的支持是什么？

在阐明如何在去支持那些自己不支持网格的浏览器以前，颇有必要搞明白支持的含义。支持也许是站点必须在列表中的浏览器上看起来彻底相同。这可能意味着对于全部的浏览器，你均可以不用去作一些收尾工做。这可能意味着你在测试这些浏览器的时候对他们能得到一致的体验而感到十分高兴。ios

一个相关的问题就是**你怎么肯定要支持的浏览器列表？**即便是一个全新的网站，也不该该拍脑壳就定了。对于今天的大多数的企业都曾经建立过网站。你可能有一些分析工具用于查看网站支持的浏览器，可是要注意这些工具不会检测对移动端的支持状况。若是在较小屏幕上表现不佳，人们便不会在手机上访问这个网站！git

若是没有任何的分析工具，你能够在 Can I Use 上面导入你所在位置的数据。github

在 Can I Use 这个网站上，你能够导入所在位置的使用状况数据。 (预览大图)web

一样值得在这里牢记网站的目标。例如，但愿吸引生活在印度等新兴市场的访问者的网站应该确保能在这些国家用户使用的浏览器中正常运行。后端

我仅仅只须要担忧旧浏览器吗？

截止发稿，Edge，Chrome，Firefox，Opera，Safari，iOS Safari 都支持了网格布局。浏览器

IE10 和 IE11 支持带有 -ms 前缀的原始规格。对于你正在使用的旧浏览器来讲：安全

Internet Explorer 9（若是仅考虑新的规范，则为IE 11及更低版本）
Edge 15 及如下
Firefox 52 以前的版本
Safari 和 iOS Safari 10.1 版本以前
Chrome 57 以前的版本
Samsung Internet 6.2 以前的版本

然而，正如上一节所述，这些流行的桌面端和移动端浏览器在新兴市场中已经更经常使用。这些浏览器还不支持网格布局。好比说从世界范围来看，UC 浏览器占用了 8.1% 的流量，俨然是世界第三大流行的浏览器。可是若是碰巧你住在美国或者欧洲，可能你历来都没有据说过。

(图片来源) (预览大图)

UC 浏览器不支持网格布局。它不只针对低功耗设备进行了优化，也适用于那些流量费昂贵地区的用户。这是咱们在开始规划支持的一个重要考虑因素。

有没有 CSS Grid 的 Polyfill（垫片）？

在第一次遇到 CSS Grid 的时候，一个显而易见的问题是：“我可使用 polyfill 吗？”不幸的是，即便有这样的好事，对于整个布局来讲，一个神奇的 polyfill 既不太可能出现，也不是一个好主意。

使用旧的布局方式，网格几乎作不到这一点。因此，为了在不支持的浏览器中复制网格布局，须要在 JavaScript 中作不少的工做。即便在资源充足的计算机上，使用了快速渲染引擎，在计算高度和元素的定位方面仍是可能会带来一些使人生厌的体验。咱们已经知道，不支持网格的浏览器是新兴市场上低功耗设备上最多见的较老，或者较慢的浏览器。为何硬要在这些设备上放一堆 JavaScript 呢？

不要搜索一个 polyfill，而是要考虑如何使用网格布局为那些不支持的浏览器提供更好的体验。在支持的浏览器上，使用网格能够用最少的 CSS 创造复杂的布局，但同时仍然要为那些不支持的浏览器提供良好的体验。这样会比仅仅在这个问题上抛出一个 polyfill 多一些工做，可是这样作的话，你能够保证能提供良好的体验，反而让网站在全部的地方显示相同不是最重要的目标。

网格布局降级方案

那么，咱们如何为正在使用的设备和浏览器提供定制的支持？事实证实，CSS 中有你要的答案。

浏览器忽略那些他们不懂的 CSS

图片的第一部分是浏览器略过他们不懂的 CSS。若是一个浏览器不支持 CSS Grid 布局，遇到 grid-template-columns 属性的时候，他不知道这是什么东西，因此就会跳过这行继续解析下面的内容。

这就意味着你须要用一些旧的 CSS，就像你过去那样，使用 float 或者 display: table-cell 在古老浏览器中实现网格样式的布局。不支持网格布局的浏览器将使用此布局而且忽略全部的网格声明。支持网格布局的浏览器将会继续寻找网格指令而且应用他们。这一点上，咱们须要考虑若是使用其余布局方法的项目成为网格项目的时候会发生什么状况。

新布局兼容旧布局

规范规定了若是你的页面上有使用其余布局方式定位的元素的时候，网格将会如何处理。

使用了浮动（float）或清除（clear）属性的元素，再应用网格成为网格元素的话，将再也不表现为浮动或清除，就像从没用过它们同样。在下一个 CodePen 中删除应用了 .grid 类的全部属性，你能够看到咱们全部的项目是如何浮动的，第三个项目是如何清除浮动的。可是在网格布局中，这将被忽略。

能够看下 rachelandrew (@rachelandrew) 在 CodePen 写的这个 Pen 使用 display: grid 覆盖 float 和 clear。

inline-block 一样也是如此。inline-block 能够设置给子项，可是只要父窗口应用了 display: grid，那么 inline-block 将失效。

我常用 CSS display: table-cell 来建立一个列布局，并在非支持网格的浏览器中对齐项目，由于这样 vertical-align 属性能够生效。

若是你之前不知道, 阅读 CSS 布局的反英雄 — “display:table”。我不建议你如今使用这个做为主要的布局方式，可是它能够做为一个很是有用的回退方案。

当你使用 display: table-cell 建立列，CSS 将建立所谓的 匿名框 。这些是表格的缺失部分 —— 真正的 HTML 表格中的单元格将在 table 元素里边的 tr 元素内。匿名框基本上解决了这些失踪的父元素。若是你的 table-cell 元素变成了一个网格元素。这样这个元素的 table 显示一样会失效，就像什么也没有发生。

vertical-align 属性在网格布局中仍然不适用。所以若是你能够在 CSS 表格布局或 inline-block中使用它，则能够安全的忽略该属性，尽情使用网格布局的框对齐方式。你能够在下一个 CodePen 中看到一个使用 CSS Grid 覆盖 display:table-cell 和 vertical-align 的布局。

能够看下 rachelandrew (@rachelandrew) 在 CodePen 写的这个 Pen display: grid 覆盖 display: table-cell 和 vertical-align。

你一样可使用 Flexbox 做为一个回退方案，一旦你在一个使用 flex 属性或者独立的 flex-grow，flex-shrink 或者 flex-basis 属性的元素上使用 grid 布局，它们（flex 等）一样会失效。

最后，请不要忘记多列布局在某种状况下能够做为一个回退方案。当对卡片或图像进行布局时，它将以列而不是行来显示每一项。可是在某些状况下多是有用的。在容器上应用 column-count 或者 column-width 使其成为多列容器。而后应用 display:grid 将忽略 column-* 行为。

特征查询

其余大多数布局方式中，大多都只是针对单个项目而不是其容器。例如在浮动布局中，咱们有一堆给定了百分比宽度的项目，为其设置左浮动（float: left）。这将让他们排列在一块儿。只要总数不超过父容器宽度的 100%，咱们就能够实现相似网格的效果。

.grid > * {
  float: left;  
  width: 33%;
}
复制代码

给定宽度的浮动元素给咱们相似网格的感受。 (预览大图)

若是咱们把布局方式换成 CSS Grid 布局，在父级上建立一个网格。咱们仅仅须要作的就是指定这些元素能横跨多少列。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 20px;
}
复制代码

在咱们之前的布局中，咱们为浮动元素给定了大小。在新的布局中，这些元素变成了网格元素，一般咱们并不会给这些元素大小，由于能够从跨过的网格轨迹上肯定。

在这里，咱们只是可以 用另外一个覆盖一个布局的方式 来解决问题。在浮动布局的例子中，一旦指定了百分比大小的元素成为网格元素的时候，大小就会变成它所在网格区域的百分比，而不是整个容器的百分比。你可使用 Firefox Grid Inspector 来高亮显示这些行 —— 这些元素如今被挤压到了网格单元的一侧。

在网格布局中，宽度将成为网格区域的百分比。(预览大图)

这是特征查询能够发挥做用的地方。特征查询相似于媒体查询，不是去检查设备的宽度和方向，而是去检查浏览器是否支持 CSS 功能。

在咱们想要变成网格布局的浮动布局示例中，咱们只须要在特征查询中内部重写一个东西 —— 咱们想要将宽度从新设置为自动。

查看 @rachelandrew 在 CodePen 写的这个 Pen：display: 特性查询 demo。

你须要重写多少用于不支持浏览器的 CSS，取决于你要为这些较旧的浏览器建立多少不一样的布局。

IE10 和 11 版本的网格布局

虽然 Edge 浏览器如今已经升级到支持现代网格布局，可是 IE10 和 IE11 只支持像早期版本那样，在这些浏览器加 -ms 前缀的写法。咱们今天所知道的网格规范最初来自于微软。对这个老的实现方案，咱们不是不高兴。咱们应该很高兴他们开始了这个过程，首先是给了咱们网格。你能够从这篇文章了解更多：CSS 网格的故事，来自它的创做者。

如上所述，你可能决定为 IE10 和 11 提供基于浮动或其余布局类型的回退方法。这个功能也能够正常工做，就像 IE10 和 11 不支持功能查询同样。只要使用这些功能来覆盖旧的方法来检查其支持状况，而后建立支持浏览器的版本，IE10 和 11 将使用较旧的方法。

你依旧可使用 -ms-grid 版原本建立回退方法。然而这个前缀的版本和现代网格布局不同，它是第一个版本，而且也是实验版本。自从运用五年左右以来，状况已经发生了变化。这意味着你不能只使用 autoprefixer 来添加前缀，这种方法可能会让 IE10 和 11 的用户体验比你不作任何处理还要糟。相反，你须要使用这个不一样的、更有先的规范来建立一个布局。

要注意的要点以下：

若是没有自动放置，你须要使用基于行的定位将每个元素放在网格上。
grid-template-areas ascii-art 方法不是实现的一部分。
不要设置网格间隙的属性
你能够不要指定开始行和结束行，而是去指定开始行和要跨越的列数。

你能够在个人博客文章中找到全部的这些属性的完整细目，我应该尝试使用 IE 的网格布局实现方案吗？

若是你有大量的用户使用这些浏览器，那么你可能会发现这个老规范是有帮助的。即便你只是用他来解决几个小问题，那这对你来讲也是值得的。

若是要支持这些浏览器，我何苦使用网格呢？

若是你的列表中有不支持的浏览器，那么你必须为他们提供和那些已经被支持的浏览器相同的体验。而后咱们就会怀疑是否是应该用网格布局，或者任何新的 CSS 特性。使用可行方案，这个方案最完美。

你可能还在考虑使用网格布局是否是有一个优良的回退方案，若是你知道，短时间内极可能你会从“必须是相同的”列表中抛弃一堆不兼容的浏览器。特别是若是你知道如今作的开发会有很长的维护周期。而后，你能够在晚一点的时候，只使用网格版本，丢掉回退方案。

可是，支持对于你来讲意味可能着会失去对一些浏览器的兼容来换取一些开发工做的简化，然而此时还非用网格布局不可，那么这是使用网格布局和针对不兼容浏览器单独设计非网格布局体验的时候。

向后兼容性测试

测试向后兼容性是最后一步。测试你的回退方案是否奏效的惟一方法就会使用不支持 CSS 网格的浏览器访问你的网站。使用下载微软提供的虚拟机的这种方式，你能够没必要购买其余电脑。而后，就能够用不支持网格布局的 Internet Explorer 进行测试。

你能够在手机上下载 UC 浏览器，或使用桌面版的 Windows 或者虚拟机。

还有好比说能够访问整个运行范围内浏览器的远程虚拟机工具 BrowserStack。这些服务不是免费的，可是他们而已为你节省大量设置测试虚拟机的时间。

BrowserStack能够访问到许多不一样的浏览器和操做系统。 (预览大图)

我看到有人建议切换特征查询值来测试一些不存在的东西。好比测试 display: gridx。这是能正常工做，可是你须要把全部的网格代码放到特征查询的代码块里边，而不是忽略浏览器会跳过不支持的 CSS 代码的事实。若是你不知道有些网格代码可能会结束在特征查询以外，那么你很容易会获得一个虚假的正确结果。即便你在使用这个方法进行快速检查，我仍然强烈建议你作一些真机测试。