Modernizr to check for css3d transforms and flexbox include ie10

Question

I'm trying to figure out what build of modernizr I need to use in order to detect support for css3d transforms and flexbox in a way to also allow ie10 to pass.

Having looked at http://caniuse.com/#search=flexbox and http://caniuse.com/#search=3d ie10 seems to be partially supporting these with several exceptions like old syntax for flexbox and no support for preserve-3d.

Looking at modernizers download options there are following:

1. Flexbox
2. Flexbox (legacy)
3. Flexbox (tweener)
4. CSS 3d transforms
5. CSS Transform Style preserve 3d

So my question is which ones do I need and how can I use them to set support check where ie10+ broswers (and all big boys like chrome, firefox etc..) pass?

Answer 1

With Modernizr you don't bother checking for specific browser versions. Modernizr uses JavaScript to add classes to the html element of the user's page. If the user's browser supports a feature, Modernizr will add a class with the name of that feature. If the user's browser does not support a feature, Modernizr will add a class 'no-' + feature-name. You write your css or JavaScript to check if the html element contains the class of the feature you want to support.

/* For all browsers */
.foo {
  display: inline-block;
}

/* For browsers that support Flexbox */
.flexbox .foo {
  display: flex;
}

/* For browsers that don't support Flexbox. I never use the 'no' classes
as I add features, not remove them. */
.no-flexbox .foo {
  display: inline-block;
}

Ideally it should never be a 'pass' or 'fail' situation. You should try to support older browsers the best you can, adding extra functionality and features for those that use the latest browser versions.

Here is the breakdown of the Modernizr Flexbox options:

1. Flexbox - browsers that support the current syntax (display: flex;)
2. Flexbox (legacy) - browsers that support the old 2009 syntax (display: box;)
3. Flexbox (tweener) - IE 10 (display: flexbox;)

If you are starting from scratch then you don't need 2 & 3. Those would be used to support sites built before the syntax was ironed out.

Deciding which Modernizr features to include depends on the features you plan to use. You should just start off using the full Modernizr library, then when you have completed your site, go back and build a reduced version using only the features you ended up using in your code.