使用 CSS3 @supports 检测 flex-box 支持答案

【问题标题】：detecting flex-box support with CSS3 @supports使用 CSS3 @supports 检测 flex-box 支持
【发布时间】：2013-05-02 04:46:19
【问题描述】：

如果支持，我计划在我的布局中实施 flexbox 解决方案，并且我将通过 CSS3 的 @support{...} 查询来检测它们是否支持。

但是我应该测试什么是支持的？由于功能@support 查询寻找给定样式的支持，然后在支持时实现样式，我应该寻找哪些支持？

换句话说，所有的 flexbox 实现都支持什么风格？

我认为display:box; 用于 2009 年的 flexbox 实现，display:flexbox; 用于短暂的 2011 年实现，display:flex; 用于规范的当前和最终实现？

【问题讨论】：

标签： css

【解决方案1】：

实现display:box/display:flexbox和display:flex的浏览器不太可能支持@supports。此外，直到昨天，Firefox 还不支持flex-wrap。同时，Internet Explorer 11 支持display:flex，但不支持@supports。

因此，如果您的用户可能在任何平台上使用 Firefox/Chrome 或 Windows 8 上的 MSIE11，那么您最好使用像 Modernizr 这样的 JavaScript 解决方案，或者假设浏览器支持 display:flex。如果您想支持 iPhone，记住-webkit- 前缀和弹性属性并使用display:-webkit-flex。

由于 flexbox 自动覆盖浮动并且 flex 属性允许您覆盖宽度，因此您可以将非 display:flex 浏览器的 CSS 与那些这样做的浏览器混合使用。

【讨论】：

【解决方案2】：

Flexbox（标准草案）支持 + 功能查询支持：

Opera 在同一版本 (12.1) 中添加了对两者的支持
Firefox 在同一版本 (22) 中添加了对两者的支持，但直到 28 才支持 flex-wrap
Android 在同一版本 (4.4) 中添加了对两者的支持
Chrome 在 21 中增加了对 Flexbox 的支持，但直到 28 才支持功能查询

没有专门支持任何旧版 Flexbox 草案的浏览器支持功能查询。

此时，特征查询与 Flexbox 结合的唯一实际用途是检测浏览器是否支持flex-wrap: wrap。但是，仍在使用中支持 display: flex 而不是 flex-wrap: wrap 的浏览器数量几乎可以认为它们在统计上不显着。

.foo {
    display: -ms-flexbox;
    display: -webkit-flex;
}

@supports (flex-wrap: wrap) {
    display: flex;
}

【讨论】：