CSS 网格布局(grid)-渐进增强(八)

洲_
117 阅读4分钟
  • 在 2017 年开始各个浏览器就开始支持网格布局(grid)
  • 到今天基本上可以正常使用了, 但如果还是要兼容旧浏览器该怎么办呢?

网格布局兼容性

端类型浏览器前缀grid支持时间grid最早版本flex支持时间flex最早版本
ChromePC端webkit2017-03-09572012-07-31/2013-08-2021/29
EdgePC端ms2015-07-28/2017-10-1712/162015-07-2812
FirefoxPC端moz2017-03-07522013-04-0220
OperaPC端webkit2017-03-21442013-07-02/2013-08-2715/16
SafariPC端webkit2017-03-2710.12013-10-22/2015-09-307/9
Chrome Android移动端webkit2017-03-16572013-02-27/2013-08-2125/29
Firefox for Android移动端moz2017-03-07522013-04-0220
Opera Android移动端webkit2017-09-27432013-05-21/2013-09-1814/16
Safari on iOS移动端webkit2017-03-2710.32013-09-18/2015-09-167/9
Samsung Internet移动端webkit2017-08-236.02013-09-25/2014-10-171.5/2.0
WebView Android移动端webkit2017-03-16572013-12-09/2014-09-034.4/37
  • 时间和版本中使用了 /, 表示 需要添加前缀/不需要添加前缀

在浮动布局中使用

  • 通过上面的表格可以看出来网格布局在2017年就开始支持了, 到现在也已经发展了很多年了
  • 我们可以在生产环境中使用网格布局来实现我们页面上的布局
  • 如果老项目中使用了浮动布局, 我们在使用网格布局时, 原来的浮动布局将会失效
  • 我们不需要因为使用网格布局而去修改原来的代码(即: 设置 float: node)
display: grid;
gap: 6px;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;

image.png

  • 如果我们给子元素上设置 float: right;, 是没有效果的
  • 当然如果你原来是浮动布局, 你想改用网格布局, 那是不需要修改原来的浮动属性的
  • 同样的当我们设置为网格布局, 在子元素上设置 display: inline-block 也是没效果的

使用特性查询

  • 如果我们需要支持的浏览器确实不支持网格布局时, 我们可以通过 @supports 规则检查 CSS 属性和值的支持
  • 还记得媒体查询的使用方法吗? 他们的用法是差不多的, 那下面我们就来试一下
@supports (display: grid) {
    /* 在这里为支持网格布局的浏览器做任何事情。 */
    .c1 {
        background-color: red;
    }
}
@supports (display: ruby) {
    /* 在这里为支持 `display: ruby` 的浏览器做任何事情。 */
    .c2 {
        background-color: green;
    }
}

image.png

  • 我的浏览器是支持 display: grid 的, 所以第一个元素的背景色变为了红色
  • 我的浏览器是不支持 display: ruby 的, 所以第二个元素的背景颜色没有变化, ruby layout

小结

  • 网格布局到现在也已经发展了很多年了, 可以在生产环境中使用了
  • 使用网格布局后有部分属性设置会失效, 如 float 和 display: inline-block
  • 如果确实需要判断浏览器是否支持网格布局并做进一步优化, 可以使用 @supports 进行处理

相关文档

参考文档

avatar
文章
阅读
粉丝