9 浏览器兼容

分析网站浏览器生态

每个网站论目标用户都是不同的，在决定采用哪种优化方式之前，你需要查明使用旧浏览器浏览你的站点的用户的数量。可以在 Startcounter 网站，查询用户访问数据

你应该考虑设备的类型和人们使用你的网站的方式。譬如，你的网站可能有超出平均数量的移动设备访问。或者，对于一些站点，无障碍和使用辅助性技术可能更加重要。开发者经常担心 1% 的使用旧版 IE 的用户的体验，而不去照顾多得多的有无障碍需求的用户。

查询浏览器是否支持特性

Can I Use 网站

了解你的用户浏览器支持的技术，这样你就可以很好地作出你的所有决定，知道最多能多好地支持所有用户。

构建回滚实现兼容

这是兼容旧浏览器最简单的方式，通过对 CSS 的覆写实现回滚

例如，浮动三个 <div>，它们显示在了一行中，并同时对其父容器设置网格布局。任何使用不支持 CSS 网格布局的浏览器的人将会看到以浮动布局实现的一列盒子。一个成为了网格物件的浮动物件失去了浮动的动作，就是说通过把 wrapper 变成网格容器，浮动物件变成了网格物件。如果浏览器器支持网格布局，它会显示网格视图，否则它会忽略 display: grid 相关的属性，使用浮动布局。

优雅的回滚：特征查询

可以通过特征查询，判断一个属性在浏览器可不可以使用。如下，如果浏览器支持网格布局，那么会给每个网格项设置自动宽度

@supports (display: grid) {
  .item {
    width: auto;
  }
}

对于那些既不支持某些属性，也不支持特征查询的浏览器，只能通过构建回滚的方式实现兼容

跨浏览器测试（TODO）

详见跨浏览器测试