Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected

Question

I am using Modernizr v3 on my website to test for flexbox support.

Modernizr adds a "flexbox" body class for browsers that support it, and "no-flexbox" for browsers that do not. As browsers that don't support flexbox are only a minority of my audience, I have used the "no-flexbox" class to provide fall back CSS. For example:

.ad { /* Default CSS */
display: flex;
}

.no-flexbox .ad { /* Fallback CSS*/
display:table;
}

Everything works fine, except for IE10, as Modernizr adds a "no-flexbox" class to it, even though IE10 does support Flexbox, it is just using the older syntax. Therefore, on IE10 my layout is broken as it reads both the flex box and non-flexbox styles.

In this thread, it says that moderniser has a flexboxtweener style to IE10. Therefore, I thought I could rewrite my fall backs to use .no-flexboxtweaner instead of .no-flexbox.

The problem is that browsers that support the new flexbox syntax get given a no-flexboxtweaner class as well, so they read the fallback code.

How can I set it up so that only the browsers that do not support any form flexbox (regardless if it is new or old) get the "no" class.

I know I could do ".no-flexbox .ad, .no-flexboxtweaner .ad", but then that's bloating the CSS (plus running two Modernizr tests). I'd rather just have a single test/class.

Answer 1

I know I could do ".no-flexbox .ad, .no-flexboxtweaner .ad", but then that's bloating the CSS (plus running two Modernizr tests). I'd rather just have a single test/class.

Thats kindof silly, mate. It is a handful of bytes - almost all of which will be erased by gzipping your file. If you reallllly wanted to avoid it, you could create an additional Modernizr check that gives you any flexbox

Modernizr.addTest('anyflexbox', (Modernizr.flexbox || Modernizr.flexboxtweener))

that will create a new property called anyflexbox and you can style your css accordingly.

Answer 2

Detects support for the flex-wrap CSS property, part of Flexbox, which isn’t present in all Flexbox implementations (notably Firefox).

This featured in both the 'tweener' syntax (implemented by IE10) and the 'modern' syntax (implemented by others). This detect will return true for either of these implementations, as long as the flex-wrap property is supported. So to ensure the modern syntax is supported, use together with Modernizr.flexbox:

if (Modernizr.flexbox && Modernizr.flexwrap) {
  // Modern Flexbox with `flex-wrap` supported
}
else {
  // Either old Flexbox syntax, or `flex-wrap` not supported
}

Ref: https://modernizr.com/docs