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


Tags: css,flexbox,modernizr

Problem :

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.



Solution :

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.


    CSS Howto..

    How do I continue to allow the user to click until a certain point?

    How to prevent fixed image from scrolling down?

    How to remove property from a child element?

    How to prevent the jump during css transition?

    How to remove “padding” from ionic card

    How To select a specific Div from its Class with JS

    How to replicate this css media jquery using javascript to support IE

    How to style a tag for current div with css?

    How to animate top % after a delay?

    How to activate a CSS property according to a variation in PHP code or URL direction?

    css: How to change row color of a table after its been selected and clicked away

    How to get the value of last assigned property in Sass or CSS?

    How to scroll a fixed div when I resize the browser window

    How do I prevent a child element from inheriting parent element's attached attribute (in notched navigation)?

    LESS: how to use dumpLineNumbers

    How to make div size bigger?

    How to fill the anchor element's height to 100% in html?

    How to create a triangle in CSS3 using border-radius

    How to remove margin and padding from css table

    Bootstrap glyphicon/nav bar showing popup window

    How to show sorting order if column width is smaller than caption in free jqgrid

    How do CSS sprites work?

    How to create vertical list of items in CSS?

    how to add border to image css on blogger

    How to override style of single RichFaces component

    How to Implement YUI Compresser in a website [closed]

    How to add css to a HTML div which has no class or id

    How can I alter this CSS so that it only applies to a certain div?

    Track cursor hover position and show hide menu similar to OSX dock / Windows start bar

    Don't understand how to control css elements with jQuery css