Question

我计划在我的布局中实施flexbox解决方案，如果它们受到支持，我将使用CSS3的@support{...}查询来支持功能检测。

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

换句话说，flexbox的所有实现都支持哪种样式？

我认为这将是2009年Flexbox实施的display:box;，2011年短期实施的display:flexbox;，以及当前和最终实施规范的display:flex;？

Answer 1

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;
}

相关：Flexible box model - display : flex, box, flexbox?

Answer 2

实施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-前缀和flex属性并使用display:-webkit-flex。

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

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

2 个答案: