4

I am planning on implementing flexbox solutions to my layout if they are supported and I am going to feature-detect if they are supported with CSS3's @support{...} queries.

But what should I test is supported? Since feature @support queries look for support of a given style and then implement styles if supported, of what should I look for support?

In other words, what style do all implementations of flexbox support?

I would think it would be the display:box; for the 2009 flexbox implementation, display:flexbox; for the shortlived 2011 implementation, and display:flex; for the current and final implementation of the spec?

Irfan Mir
  • 2,107
  • 8
  • 27
  • 33

2 Answers2

3

Flexbox (Standard draft) support + Feature Query support:

  • Opera added support for both in the same version (12.1)
  • Firefox added support for both in the same version (22), but didn't support flex-wrap until 28
  • Android added support for both in the same version (4.4)
  • Chrome added support for Flexbox in 21, but didn't support feature queries until 28

No browser that exclusively supports either of the old Flexbox drafts has support for feature queries.

The only practical use for feature queries in combination with Flexbox at this point in time is to detect if a browser supports flex-wrap: wrap. However, the number of browsers still in use that support display: flex and not flex-wrap: wrap is pretty much the point where you can consider them to be statistically insignificant.

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

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

Related: Flexible box model - display : flex, box, flexbox?

Community
  • 1
  • 1
cimmanon
  • 67,211
  • 17
  • 165
  • 171
2

The browsers that implement display:box / display:flexbox and display:flex are unlikely to support @supports. Furthermore, until yesterday, Firefox did not support flex-wrap. Meanwhile, Internet Explorer 11, while supporting display:flex, does not support @supports.

So you are better off with a JavaScript solution like Modernizr or just assume the browser supports display:flex if your users are likely to use Firefox/Chrome on any platform or MSIE11 on Windows 8. If you would like to support iPhone, remember to -webkit- prefix and flex properties and use display:-webkit-flex.

Since flexbox automatically overrides floats and the flex property allows you to override width, chances are you can just mix the CSS for non-display:flex browsers with those that do.

Henry
  • 1,339
  • 13
  • 24