Supporting older browsers

 

在本模块中,我们建议使用Flexbox和Grid作为设计的主要布局方法. 但是,您网站的访问者会使用较旧的浏览器,或者不支持您使用的方法的浏览器. 网络上总是如此-随着新功能的开发,不同的浏览器将对不同的事物进行优先级排序. 本文介绍了如何使用现代Web技术,而又不会锁定使用旧技术的用户.

Prerequisites: HTML基础知识(研究HTML简介 ),以及有关CSS如何工作的想法(研究CSS样式框 简介 ).
Objective: 了解如何在较旧的浏览器上为您的布局提供支持,这些浏览器可能不支持您要使用的功能.

What is the browser landscape for your site?

每个网站的目标受众都不相同. 在决定采取哪种方法之前,请先确定使用旧版浏览器访问您网站的访问者数量. 如果您有要添加或替换的现有网站,这很简单,因为您可能具有可用的分析方法,可以告诉您人们正在使用的技术. 如果您没有分析功能,或者这是一个全新的网站,那么诸如Statcounter之类的网站可以提供按位置过滤的统计信息.

您还应该考虑设备的类型以及人们使用您网站的方式,例如,您可能期望移动设备的数量高于平均水平. 应始终考虑辅助功能和使用辅助技术的人员,但对于某些站点而言,这一点可能更为关键. 以我的经验,开发人员通常非常担心1%的用户在旧版本的Internet Explorer中的使用体验,而根本没有考虑太多具有可访问性需求的用户.

What is the support for the features you want to use?

一旦知道了访问您网站的浏览器,就可以评估要使用的任何技术的支持程度,以及为没有该技术的访问者提供替代方法的难易程度. 通过在每个页面上提供详细说明CSS属性的浏览器兼容性信息,我们正在MDN上为您提供方便. 例如,看一下grid-template-columns的页面. 该页面底部是一个表格,其中列出了主要的浏览器以及它们开始支持该属性的版本.

另一种流行的了解功能支持程度的方法是" 我可以使用"网站. 该站点列出了大多数Web平台功能,以及有关其浏览器支持状态的信息. 您可以按位置查看使用情况统计信息-如果您在一个网站上的用户主要来自世界某个特定区域,则很有用. 您甚至可以关联您的Google Analytics(分析)帐户,以根据您的用户数据进行分析.

了解用户所拥有的技术以及对可能要使用的东西的支持,可以使您处于做出所有决定并了解如何最好地支持所有用户的好地方.

Support doesn't mean "looks the same"

一个网站可能无法在所有浏览器中看起来都一样,因为您的某些用户将在手机上查看该网站,而另一些用户将在大屏幕上查看该网站. 同样,您的某些用户将使用旧的浏览器版本,而其他用户则使用最新的浏览器. 您的某些用户可能正在听屏幕阅读器向您朗读的内容,或者放大了页面即可阅读. 支持所有人意味着提供防御性设计的内容版本,以便在现代浏览器上看起来不错,但对于较旧浏览器的用户仍然可以在基本级别上使用.

基本的支持来自良好地组织内容,以便使页面的正常流程有意义. 功能手机非常有限的用户可能不会获得太多的CSS,但是内容会以一种易于阅读的方式流动. 因此,结构良好的HTML文档应始终是您的起点. 如果删除样式表,您的内容有意义吗?

一种选择是保留网站的一般视图,以作为使用非常古老或有限浏览器的人们的后备. 如果使用这些浏览器访问该网站的人很少,那么花时间尝试为他们提供与现代浏览器相似的体验可能没有商业意义. 最好花一些时间在使站点更易于访问的事情上,从而为更多的用户提供服务. 在纯HTML页面和所有花哨的内容之间有一个中间点,而CSS实际上使创建这些后备非常简单.

Creating fallbacks in CSS

CSS规范包含的信息说明了将两种布局方法应用于同一项目时浏览器的作用. 这意味着存在一个定义,如果浮动项目(例如,也是使用CSS网格布局的网格项目)会发生什么. 将此信息与浏览器会忽略不了解的CSS的知识结合在一起,您便可以使用我们已经介绍的传统技术创建简单的布局,然后在了解它的现代浏览器中使用Grid布局覆盖这些布局.

在下面的示例中,我们浮动了三个<div>因此它们可以连续显示. 任何不支持CSS Grid Layout的浏览器都将把这行框视为浮动布局. 成为网格项目的浮动项目失去了浮动行为,这意味着通过将包装器变成网格容器,这些浮动项目成为了网格项目. 如果浏览器支持"网格布局",它将显示网格视图,如果不支持,则忽略和display: griddisplay: grid相关的属性,并使用浮动布局.

* {box-sizing: border-box;}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}
<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>

注意 :一旦将已清除的项目变成网格项目, clear属性也将无效,因此您可以使用带有已清除的页脚的布局,然后将其转换为"网格布局".

Fallback Methods

有许多布局方法可以与此浮动示例相似的方式使用. 您可以选择一种最适合您需要创建的布局模式的布局.

漂浮清晰
如上所示,如果浮动或清除的项目变为flex或grid项目,则float和clear属性将不再影响布局.
display: inline-block
如果某个项目具有display: inline-block set但变成了flex或grid项,则此方法可用于创建列布局,将忽略inline-block行为.
display: table
这些课程的简介中介绍的创建CSS表的方法可以用作后备方法. 如果将其设置为CSS表格布局的项目变为flex或grid项,则它们将失去此行为. 重要的是,不会创建用于修复表结构的匿名框.
Multiple-column Layout
对于某些布局,您可以使用multi-col作为后备,如果您的容器具有在其上定义的任何column-*属性,然后成为网格容器,则不会发生multicol行为.
Flexbox as a Fallback for Grid
由于受到IE10和11的支持, Flexbox具有比Grid更大的浏览器支持,尽管请在本课程稍后的内容中查阅信息,以说明较旧的浏览器对Flexbox的支持非常零散且令人困惑. 如果将flex容器制成网格容器,则应用于子项的所有flex属性都将被忽略.

对于旧版浏览器中的许多布局调整,您可能会发现以这种方式使用CSS可以提供​​不错的体验. 我们将基于较旧且得到良好支持的技术添加一个更简单的布局,然后使用较新的CSS来创建超过90%的受众可以看到的布局. 但是,在某些情况下,后备代码将需要包含新浏览器还将解释的内容. 一个很好的例子是,如果我们要在浮动项目中添加百分比宽度,以使列更像网格显示,则将其拉伸以填充容器.

在浮动版式中,百分比是根据容器计算得出的-33.333%是容器宽度的三分之一. 但是在Grid中,33.333%是从放置该项目的网格区域计算得出的,因此,一旦引入了Grid Layout,它实际上就变成了我们想要的大小的三分之一.

* {box-sizing: border-box;}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
  width: 33.333%;
}
<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>

为了解决这个问题,我们需要一种方法来检测是否支持Grid,并因此检测它是否会覆盖宽度. CSS在这里为我们提供了一个解决方案.

Feature queries

功能查询允许您测试浏览器是否支持任何特定的CSS功能. 这意味着您可以为不支持某些功能的浏览器编写一些CSS,然后检查该浏览器是否具有支持,如果支持,则放入您喜欢的布局.

如果在上面的示例中添加功能查询,则可以在知道网格支持的情况下使用它将项目的宽度设置回auto .

* {box-sizing: border-box;}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
  width: 33.333%;
}

@supports (display: grid) {
  .item {
      width: auto;
  }
}
<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>

在现代浏览器中,对功能查询的支持非常好,但是,应该注意的是,这些浏览器不支持CSS Grid,它也不支持功能查询. 这意味着上面详述的方法将适用于那些浏览器. 我们正在做的是首先在任何功能查询之外编写旧CSS. 不支持Grid且不支持功能查询的浏览器将使用他们可以理解的布局信息,并完全忽略其他所有内容. 支持功能查询的浏览器也支持CSS Grid,因此将运行网格代码和功能查询中的代码.

功能查询规范还包含测试浏览器是否不支持功能的能力-仅在浏览器支持功能查询时才有用. 将来,随着缺乏功能查询支持的浏览器的消失,一种检查缺少支持的方法将行得通. 但是,目前,请使用做旧CSS的方法,然后覆盖它以获得最佳支持.

Older versions of Flexbox

在旧版浏览器中,您可以找到Flexbox规范的先前版本. 在撰写本文时,这主要是Internet Explorer 10的问题,该Internet Explorer为Flexbox使用-ms-前缀. 这也意味着存在一些过时的文章和教程. 这本有用的指南可帮助您检查正在查看的内容,如果在非常旧的浏览器中需要Flex支持,也可以提供帮助.

The IE10 and 11 prefixed version of Grid

CSS Grid规范最初是在Internet Explorer 10中原型化的. 这意味着虽然IE10和IE11没有现代网格支持,但它们确实具有非常有用的Grid布局版本,尽管与本网站上记录的现代规范有所不同. IE10和11实现的前缀为-ms- ,这意味着您可以在这些浏览器中使用它,并且非Microsoft浏览器将忽略它. 但是Edge仍然理解旧的语法,因此请注意在现代网格CSS中所有内容均被安全覆盖.

网格布局中的渐进增强指南可以帮助您了解IE版本的网格,并且在本课程结束时,我们还包括一些其他有用的链接. 但是,除非在旧版IE中有大量访问者,否则您可能会发现最好集中精力创建适用于所有不支持的浏览器的备用.

Testing older browsers

由于大多数浏览器都支持Flexbox和Grid,因此很难测试较旧的浏览器. 一种方法是使用在线测试工具,例如Sauce Labs,如跨浏览器测试模块中所述.

您还可以下载并安装虚拟机,并在您自己的计算机上的包含环境中运行浏览器的旧版本. 访问旧版本的Internet Explorer尤其有用,为此,Microsoft提供了一系列虚拟机供免费下载 . 它们适用于Mac,Windows和Linux操作系统,因此,即使您未使用Windows计算机,这也是在旧的和现代Windows浏览器中进行测试的好方法.

Summary

您现在已经掌握了放心使用Grid和Flexbox等技术的知识,可以为较旧的浏览器创建后备,并可以使用将来可能出现的任何新技术.

See Also

In this module