box support with CSS3 @supports

 

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?

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.

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.

  • Browser support for Flexbox
  • Browser 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?

    链接地址: http://www.djcxy.com/p/75616.html

    上一篇: 框无效的属性值

    下一篇: 支持CSS3 @supports