Simple flexbox check

- Posted in Uncategorized - 3 comments

I love Modernizr to check if a browser support a certain CSS feature, but I found myself in the situation where I only had to check for flexbox support.

In this case, it seems a bit ridiculous to load Modernizr. You can use the following code instead:

var doc = document.body || document.documentElement;
var style = doc.style;

if ( style.webkitFlexWrap == '' ||
    style.msFlexWrap == '' ||
    style.flexWrap == '' ) {
  doc.className += " supports-flex";
}

Via Ethan Marcotte’s article “Putting My Patterns through Their Paces”.

3 Comments

  • George says:

    Very cool, thanks for the tip. Need something similar for the small use cases of jQuery :)

  • Nice tip, would be trivial to use this to detect other features I’m sure.

    I wonder how much longer we’ll have a need for detecting flexbox; especially with the recent news of Microsoft dropping support for Internet Explorer 8, 9 and 10. Browser support is already pretty high across the board http://caniuse.com/#feat=flexbox

  • GreLI says:

    Microsoft isn’t dropping Internet Explorer 9—it’s the most current version of Internet Explorer in Windows Vista (which is still supported).

Leave a Reply

Your email address will not be published. Required fields are marked *