Using Modernizr with Flexbox
Last week, Modernizr was updated to version 3, and with that upgrade gained some useful new tests for flexbox support. You now get four separate flexbox tests, producing eight different classes on your <html> tag that you can use to target browsers with different levels of flexbox support.
| Test | Supporting class | Non-supporting class | Useful for |
|---|---|---|---|
| Flexbox | flexbox |
no-flexbox |
Targeting browsers that support the current syntax |
| Flexbox (legacy) | flexboxlegacy |
no-flexboxlegacy |
Targeting/excluding browsers that support the old 2009 syntax, such as Safari 6 or Android 4.3 |
| Flexbox (tweener) | flexboxtweener |
no-flexboxtweener |
Targeting/excluding IE 10 |
| Flex line wrapping | flexwrap |
no-flexwrap |
Targeting browsers that support flex-wrap, or excluding browsers that support flexbox but don’t support flex-wrap |
The four flexbox tests you can include in your Modernizr 3 build.
The most notable change is that you can now test whether the browser supports the flex-wrap property specifically. This is useful because some browsers supported the up-to-date flexbox spec without any browser prefix, but didn’t support the flex-wrap property within that spec. This was problematic because it meant that you couldn’t exclude these browsers by simply not including their browser-prefixed properties. They would get the same flexbox code you provided to full-featured browsers, but if you used flex-wrap in that code, the layout had the potential to break horribly.
The Modernizr site states that it’s Firefox that suffers from this limitation, but this is inaccurate. It’s only old versions of Firefox, specifically 22 through 27. Firefox is currently (as of September 2015) at version 40, so it’s unlikely that you still have a significant number of users on your site using version 27. However, the flex-wrap test is still useful as a safeguard for the small number of users that might be affected by a catastrophic layout failure that might occur if you write a layout that depends on the flex-wrap property.
(more…)
