杭州高端建站：使用CSS网格——支持没有网格的浏览器

使用任何新的CSS时，必须解决浏览器支持的问题。当新的CSS用于布局时，与Flexbox和CSS Grid一样，这更是一个考虑因素，而不是我们可能认为是增强的东西。

杭州高端建站在本文中，我将探讨如何处理浏览器支持。我们可以做些什么来让我们现在使用新的CSS，并且仍然为不支持它的浏览器提供了很好的体验？

支持意味着什么？

在决定如何在没有网格支持的情况下支持浏览器之前，有必要弄清楚支持的含义。支持可能意味着该网站必须在列表中的所有浏览器中看起来完全相同。这可能意味着您很高兴能够在所有浏览器中提供一些最后的润色。这可能意味着您正在测试这些浏览器，但他们非常高兴能够获得简化的体验。

一个链接的问题是你如何提出支持的浏览器列表？即使是一个全新的网站，也不需要猜测。对于今天的大多数企业来说，新网站不会是他们建立的第一个网站。您可能需要一些分析来查看正在使用的浏览器，尽管您需要注意它们不会被完全移动不友好的站点所扭曲。如果无法在小屏幕上使用，人们将不会在手机上访问该网站！

如果您没有任何相关分析，则可以查看“ 我可以使用 ”中的数据，您可以在其中导入您所在位置的数据。

同样值得在这里记住网站目标。例如，希望吸引居住在印度等新兴市场的访问者的网站希望确保该网站在这些国家/地区使用的浏览器中运行良好。

这是我应该担心的旧浏览器吗？

编写Edge，Chrome，Firefox，Opera，Safari，iOS Safari的时间都支持网格布局。

IE10和IE11支持带有-ms前缀的原始规范。对于您正在寻找的旧浏览器：

• Internet Explorer 9（如果仅考虑新规范，则为IE 11及以下版本）

• 边缘15及以下

• Firefox版本低于52版

• Safari和iOS Safari早于10.1版

• Chrome版本低于57版

• 三星互联网比版本6.2更早

但是，如上一节所述，这些流行的桌面和移动浏览器加入了新兴市场中更常用的浏览器。这些浏览器尚未采用网格。例如，如果我们采用全球视图，UC浏览器的流量占总流量的8.1％ - 这是全球第三大流行浏览器。如果您碰巧住在美国或欧洲，您可能从未听说过它。

UC浏览器不支持网格布局。它也是针对低功率设备优化的浏览器，也适用于昂贵且经常计量数据的用户。在我们开始制定支持战略时，这是一个需要考虑的重要事项。

有一个CSS网格Polyfill？

当第一次遇到CSS Grid时，一个显而易见的问题是，“我可以使用polyfill吗？”不幸的是，即使有这样的事情，整个布局的魔法填充也不太可能即将使用或者是一个好主意。

Grid使用较旧的布局方法完成了几乎不可能的事情。因此，为了在没有支持的浏览器中复制Grid，您需要在JavaScript中进行大量工作。即使在资源充足的计算机上，使用快速渲染引擎也可能会在计算高度和定位项目时为您提供一些janky体验。我们已经知道，不支持网格的浏览器是新兴市场中较低功率设备上最常见的较旧，较慢的浏览器或浏览器。你为什么要在这些设备上强制使用一堆JavaScript？

而不是搜索polyfill，考虑如何使用Grid Layout实际上为那些不支持它的浏览器提供更好的体验。Grid允许您创建复杂的布局体验，以最少的CSS支持浏览器，同时仍然为没有支持的浏览器提供良好的体验。是的，这不仅仅是在问题上投入一个填充物，而是通过这样做，你确保支持意味着提供良好的体验，而不是让网站看起来是最重要的目标。

为不了解网格布局的浏览器提供支持

那么，我们如何提供针对所使用的设备和浏览器量身定制的支持？事实证明，CSS有你的答案。

浏览器忽略CSS他们不明白

图片的第一部分是浏览器忽略了他们不理解的CSS。如果一个不支持CSS Grid的浏览器遇到grid-template-columns属性，它就不知道它是什么，所以抛出那条线并继续。

这意味着您可以使用一些旧的CSS，例如浮点数或display: table-cell为旧版浏览器提供网格类型布局，就像过去一样。不支持网格布局的浏览器将使用此布局并忽略所有网格指令。支持网格布局的浏览器将继续并发现网格指令并应用这些指令。此时我们需要考虑如果使用其他布局方法的项目成为网格项目会发生什么。

新布局知道旧布局

如果您的页面中的元素通过其他布局方法定位，那么在规范中定义的就是Grid的行为方式。

浮动或使用clear属性然后成为网格项的项目不再显示任何浮动或清除行为。好像这从未应用过。删除.grid下一个CodePen中应用于该类的所有属性，您可以看到我们如何浮动所有项目并清除第三个项目。但是，一旦我们进入网格布局，这将被忽略。

请参阅笔显示：网格覆盖浮点数并通过CodePen上的rachelandrew（@rachelandrew）清除。

同样如此inline-block。该值inline-block可以应用于子项，但只要父项具有display: grid内联块行为将不再应用。

display: table-cell当我需要创建列布局并在非支持的浏览器中对齐项目时，我经常使用CSS ，因为该vertical-align属性在您使用时可以正常工作display: table-cell。

如果您不熟悉，请阅读CSS布局的反英雄 - “display：table”。我不建议你今天使用它作为主要的布局方法，但它作为后备可能非常有用。

当您使用display: table-cell创建列时，CSS将创建所谓的匿名框。这些是表中缺少的部分 - 实际HTML表中的表格单元格将位于tr元素内部，并且将位于table元素内部。匿名框基本上修复了这些失踪的父母。table-cell但是，如果您的项目变为网格项目，则会在生成框之前发生这种情况，因此项目将再次表现为CSS表格显示从未发生过。

该vertical-align属性在Grid Layout中也不会应用一次，因此如果您在CSS表格布局中使用它，或者inline-block您可以安全地忽略它并使用Box Alignment for Grid Layout。您可以在下一个CodePen中看到由Grid Layout 使用display: table-cell和vertical-align覆盖的布局。

请参阅笔显示：网格覆盖显示：table-cell，以及CodePen上rachelandrew（@rachelandrew）的vertical-align。

您还可以使用Flexbox作为后备，如果您使用了flex属性或个人flex-grow，flex-shrink或者flex-basis项目上的属性，一旦它变为网格项，这些属性将被忽略。

最后，不要忘记在某些情况下可以使用多列布局作为后备。例如，在布置卡组件或图像列表时。它将以列而不是行显示项目，但在某些情况下可能很有用。您应用column-count或column-width在容器上使其成为多列容器，如果您再应用display:grid该column-*行为将被忽略。

功能查询

在大多数其他布局方法中，我们针对的是单个项目而不是其容器。例如，在浮动布局中，我们有一组项目，我们给出了百分比宽度，然后设置为float: left。这导致它们彼此相邻排列。只要我们最终不超过100％，我们就可以制作看似网格的东西。

.grid > * {
  float: left;  
  width: 33%;}

如果我们然后将该布局转换为CSS网格布局，我们在父网格上创建一个网格。我们应用于项目的唯一事情是关于跨越多少列的指令。

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

在我们的旧布局中，我们已经浮动了应用了大小的项目，在我们的新布局中，这些项目成为网格项目，并且通常我们不希望为这些项目提供大小，因为它们将从它们跨越的网格轨道获取该信息。

在这里，我们只是能够用另一种覆盖一种布局方法来解决问题。在浮动布局的示例中，项目已被赋予百分比大小，一旦该项目成为网格项目，大小将变为它所在的网格区域的百分比，而不是整个容器宽度的百分比。您可以通过使用Firefox Grid Inspector突出显示这些行来看到这一点 - 这些项目现在被压缩到Grid Cell的一侧。

这是功能查询可以提供帮助的地方。功能查询与媒体查询非常相似，而不是检查设备的宽度或方向，我们检查浏览器是否支持CSS功能。

在我们想要转换为网格布局的浮动布局示例中，我们只需要覆盖功能查询中的一个内容 - 我们希望将宽度设置回自动。

见笔显示：功能查询演示由rachelandrew（@rachelandrew上）CodePen。

用于支持不需要的浏览器的CSS需要做多少取决于您决定为那些旧浏览器创建不同布局的程度。

IE10和11版网格布局

虽然Edge现在已更新为现代网格布局，但IE10和11仅支持-ms在这些浏览器中首先附带前缀的早期版本。我们今天所知道的Grid规范最初来自Microsoft。到目前为止，我们还没有对这个旧的实现感到不满，我们应该很高兴他们启动了这个过程并首先给了我们Grid。您可以在其创建者的文章“CSS网格的故事”中阅读有关该故事的更多信息。

您可能决定根据浮动或其他布局类型为IE10和11提供后备体验，如上所述。这将使用功能的查询，未在IE10支持和11.只要你用这些来覆盖你的老方法检查工作好，我们将进行支持，那么在创建版本支持的浏览器，IE10和11将继续使用旧方法。

但是，您可以使用该-ms-grid版本来创建回退方法。但是这个前缀版本与现代网格布局不同，它是第一个版本和实验版本。自发货以来，五年左右的时间发生了变化。这意味着你不能只使用autoprefixer来添加前缀，这种方法可能会让IE10和11用户的体验比你什么都不做更糟糕。相反，您需要使用此不同且更有限的规范创建布局。

需要注意的要点如下：

1. 没有自动展示位置。您需要使用基于行的定位将每个项目放在网格上。

2. 所述grid-template-areas定位的ASCII技术的方法是不实现的一部分。

3. 没有网格间隙属性。

4. 您可以指定起始行和要跨越的轨道数，而不是指定起始行和结束行。

您可以在我的博客文章中找到所有这些属性的完整细分，我是否应该尝试使用网格布局的IE实现？

如果您拥有大量使用这些浏览器的用户，那么您可能会发现此旧规范很有用。绝对值得知道它存在，即使你只用它来解决几个真正的showstoppers的小问题。

如果我必须支持这些浏览器，为什么还要使用网格？

如果您的列表中有不支持的浏览器，并且您必须为它们提供与支持浏览器相同的体验，那么我确实会质疑是使用网格布局还是任何新的CSS。使用有效的方法。这种方法仍然完全有效。

如果您知道在短期内可能会从“必须相同”列表中删除一堆浏览器，您可能仍会考虑使用具有高级别回退的网格布局。特别是如果你知道你现在正在进行的开发将有很长的保质期。然后，您可以在以后丢失回退并仅使用网格版本。

但是，对您的支持可能意味着不支持的浏览器可能会获得某种程度的简化体验，并且您希望使用Grid Layout执行某些操作，如果没有它，则基本上是不可能的。现在是时候使用网格布局并为这些浏览器设计良好的非网格体验。

测试后备

关于测试这些后备的最后一点说明。测试回退的唯一真正方法是访问不支持CSS Grid的浏览器。一种方法是在不购买额外的计算机的情况下，下载Microsoft提供的虚拟机。然后，您可以在没有支持的情况下使用Internet Explorer版本进行测试。

您可以将UC浏览器下载到手机上，或者在Windows或虚拟机中使用桌面版。

还有一些工具，如BrowserStack，可让您访问运行各种浏览器的远程虚拟机。这些服务不是免费的，但它们可以为您节省大量时间来设置VM进行测试。

我见过人们建议切换你的功能查询以测试不存在的东西 - 例如测试支持display: gridx。这将相当不错。但是，您需要将所有Grid代码放在Feature Query Block中，而不是依赖于不支持它的浏览器忽略它的事实。如果没有意识到某些网格代码在特征查询之外已经结束，您很容易就会得到误报结果。即使您使用此方法进行快速检查，我也强烈建议您在实际的浏览器上进行一些测试。

杭州高端建站