All geek questions in one place

Discover Flex-Box Support with CSS3 @supports

I plan to implement flexbox solutions for my layout if they are supported, and I am going to detect objects if they are supported using CSS3 @support{...} requests.

But what do I need to check? Since @support request functions @support for support for this style and then implement styles, if supported, what should I look for support?

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

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

+4
source share
2 answers

Browsers that implement display:box / display:flexbox and display:flex hardly support @supports . Also, until yesterday, Firefox did not support flex-wrap . Meanwhile, Internet Explorer 11, supporting display:flex , does not support @supports .

So, you'd better use a JavaScript solution like Modernizr, or just assume that the browser supports display:flex if your users can use Firefox / Chrome on any platform or MSIE11 on Windows 8. If you want to support iPhone, remember the prefix properties and flexibility -webkit- and use display:-webkit-flex .

Since flexbox automatically overrides the float, and the flex property allows you to override the width, maybe you can just mix CSS for display:flex browsers with those that do.

+2
source

Flexbox (Standard draft) support + Support for feature requests:

  • Opera added support as in the same version (12.1)
  • Firefox added support as in the same version (22), but did not support flex-wrap until 28
  • Android added support both in the same version (4.4)
  • Chrome added Flexbox support in 21, but did not support feature requests up to 28

No browser that supports only one of the older Flexbox drafts supports feature requests.

The only practical use of functional queries in conjunction with Flexbox at this point in time is to determine if the browser supports flex-wrap: wrap . However, the number of browsers used that support display: flex , not flex-wrap: wrap , pretty much means that you consider them statistically insignificant.

 .foo { display: -ms-flexbox; display: -webkit-flex; } @supports (flex-wrap: wrap) { display: flex; }

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

+2
source

Source: https://habr.com/ru/post/1479668/

More articles:


All Articles