Geek Answers Handbook

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

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

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

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

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

Everything works fine, except for IE10, because Modernizr adds the no-flexbox class to it, although IE10 supports Flexbox, it just uses the old syntax. Therefore, on IE10, my layout is broken because it reads the flex and non flexbox styles.

This thread says that the modernizer has a flexboxtweener style for IE10. So I thought I could rewrite my recline to use .no-flexboxtweanerinstead. no-flexbox.

The problem is that browsers that support the new flexbox syntax get the specified no-flexboxtweaner class, so they read the backup code.

How can I configure it so that only browsers that do not support any form of flexbox (whether it is new or old) get the class "no".

I know what .no-flexbox.ad, .no-flexboxtweaner.ad could do, but then it’s bloat CSS (plus running two Modernizr tests). I would prefer only one test / class.

+4
source share
2 answers

, .no- flexbox.ad,.no-flexboxtweaner.ad ", CSS ( Modernizr). /.

, . - gzipping . - , Modernizr, flexbox

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

anyflexbox, CSS.

+4

CSS flex-wrap, Flexbox, Flexbox ( Firefox).

"tweener" ( IE10), "" ( ). true , flex-wrap. , , Modernizr.flexbox:

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

: https://modernizr.com/docs

+1

More articles:


All Articles