Join James Williamson for an in-depth discussion in this video Current support, part of CSS: Flexbox First Look.
This is a movie that I'm always a little hesitant about recording as I am positive that the support for flexbox at the time I record this is going to differ dramatically from the time when you view it. Still it's really helpful for you to get an overall picture of where flexbox is regarding broswer suppport. So that you can choose when it's effective to add to your projects. Flexbox is also really tricky, to discuss in terms of support, due to the differences in the flexbox syntax. The original 2009 version, was supported by some browsers, but wasn't gaining a lot of traction. This led Tab Atkins to take over the specification in 2011 and make sweeping changes to the syntax.
A handful of browsers added support for the 2011 version, most notably IE10. However, Tab wasn't done revising the syntax which led some people to call the 2011 syntax tweener syntax. In 2012, a new version was released and it reached a stable working draft. Multiple browsers have added support for the 2012 syntax both in prefixed and unprefixed versions. As you can imagine, this can make it rather difficult to work with flexbox. Older browsers either don't support it at all, or support the now dead 2009 syntax.
Internet Explorer 10, supports the 2011 tweener syntax, which almost no one else uses. All modern browsers going forward are supporting the 2012 version. So here's a brief list of browser support for flexbox, at the time of this recording. As you can see, Firefox only supports the 2009 syntax. However the new syntax is unprefixed currently in the nightly build. Now what does that mean? It means if you go and download the sort of beta nightly version of Firefox, it's available unprefixed in that.
Because it's unprefixed and nightly I expected it to be rolled out very, very soon. So by the time you watch this it may be already unprefixed inside Firefox. Google Chrome supports it in versions 22 and above but it uses a web kit prefix. Safari supports 2009 syntax from 5.1 and above. Opera supports it in 12.1 and above unprefixed and just fully great. So good on you, Opera. Internet Explorer versions 10 and above, but it uses the Microsoft prefix and it supports the older tweener syntax, that 2011 syntax. IOS on Safari supports the older 2009 syntax and Opera Mini does not play well at all with flexbox.
Opera Mobile versions 12 and above support it unprefixed as well. So Opera support is really, really good. For the Android browser, 2.1 and above support the 2009 syntax with the webkit prefix. But, new support should be coming very soon. And, surprise, surprise, the new Blackberry browser, 10 and above, supports flexbox in an unprefixed fashion. So, what does all this mean? Well, for the time being, it means that you should consider flexbox experimental. Unless you're developing an app that targets a supported browser.
To use flexbox in a production site, you'll need to use the 2012 syntax, feed Internet Explorer 10 tweener syntax, provide 2009 syntax support fallbacks for older browsers. And then provide non-flexbox fall-backs for non-supporting user agents. Sounds like fun, right? So does this mean that you should just plain out ignore flexbox? Well, no. Since 2012, the adoption of flexbox by browsers has been absolutely tremendous. Other than having to make minor considerations for Internet Explorer 10, once the older browsers can be dropped from your support list, flexbox is going to be ready to use.
I recommend checking caniuse.com frequently to see how support for flexbox is evolving and keeping an eye on when it makes sense to add to your own projects.
- Reviewing Flexbox support
- Defining elements
- Controlling element flow
- Wrapping content
- Defining display ratios
- Aligning single and multiple items
- Nesting flex containers