Modernizr, IE10, and Flexbox Fallbacks

I like to write my css components using flexbox first and then following up with fallbacks afterward. By using Autoprefixer (for automatically taking care of vendor prefixes) and Modernizr (for feature detection, specifically flexbox) together, this process is quite easy.

.MyComponent {
//flexbox styles for awesome browsers
}

.no-flexbox .MyComponent {
//non-flexbox styles like floats
//sad pandas
}

I prefer this method because I can clearly see where I’ve added specific styles to account for the lack of flexbox. Mainly this is for IE9; it doesn’t support flexbox at all. IE10 supports a weird, halfway variation of it, and IE11 has proper support (with some bugs).

While doing some crossbrowser checks, I noticed in IE10 my flexbox layout on a component was getting .no-flexbox styles, where I was only expecting IE9 to get them. I know IE10 supports a weird version of flexbox but it’s basically still flex, right? Why would modernizr flag it as no-flexbox? I did some googling, and came across an issue on the Modernizr github page. The issue is asking for removal of no-flexbox class for IE10. Patrick Kettner, Modernizr team member, clarifies the issue:

[…] This is a detect for flexbox the API, not flexbox the concept. IE 10 does not implement flexbox. It implements a version of flexbox based on an old outdated draft that works literally no where else. saying that it does support flexbox is disingenuous at best. There are no real codepaths that work for both versions of the spec.

Since IE10 technically doesn’t implement flexbox, how can I write a flexbox-first component and call out IE9 like in my example above? Thankfully, Patrick provides a good solution:

yeah, I’d recommend .no-flexbox.no-flexboxtweener .element

This is because IE10 flags positive for flexboxtweener from Modernizer. By doing the check above, IE10 won’t be lumped in with IE9 when trying to style for no-flexbox. So I can rewrite my component like this:

.MyComponent {
//flexbox styles for awesome browsers
}

.no-flexbox.no-flexboxtweener .MyComponent {
//non-flexbox styles like floats
//still sad pandas
}

Modernizr has updated their flexbox docs to account for this complexity. You can download a customized build of Modernizr that checks for flexbox and flexbox tweener here.


Originally published on CodePen.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.