Interoperability: Enquire.js doesn't execute Respond.js fired css media-queries

Question

OK, so I use Respond.js a polyfill for mediaqueries on legacy browsers (ie8 being the most important).

At the same time I'm investigating in using Enquire.js which enables executing js-code based on media-query matches.

Tested in isolation this stuff works:

• respond.js executes media-queries defined in css correctly for IE8
• enquire.js executes javascript code correctly based on media-queries matching css. (for NON-legacy browsers)

However the combi doesn't seem to work. I.e:

Enquire.js doesn't execute javascript based on a media-query which gets enabled through respond.js (for legacy browsers)

Since Respond.js contains Paul Irish's polyfill for MatchMedia which (as per: Enquire's documentation) should be enough for legacy support, I'm not sure what could be wrong.

So just to be checking: this combination should work right?

Answer 1

I'm the author of enquire, so i'll help where i can.

I've just browsed through the respond.js source to find out how it works. Respond extracts any media queries from your CSS, then depending on the width of the window it will create new style blocks containing that CSS if the media query matches (this is why it only supports simple media queries such as max/min-width). This of course means that it will not help enquire JS, as it is simulating media queries.

The inclusion of the matchMedia polyfill is actually a red herring. All that does is create an equivalent to the matchMedia browser API. Thus if the browser only supports very limited set of media queries (as IE8 does), it will not expand it's capabilities, it will only allow you to work within it's means. I made this mistake myself at first!

I don't know if this will help you, but enquire's register method can accept a third parameter, shouldDegrade which is a signal to enquire that you intend the functionality to always run if the browser is deemed incapable. Thus if you pass in true, the match function will always be executed for incapable desktop browsers (whilst still being conditional for capable browsers). This will allow you to deliver a desktop experience to older browsers, especially useful in mobile-first approaches.

Happy to help further if you have any more questions

Answer 2

Try removing the inclusion of matchMedia from respond.js, and then loading match.media and enquire.js after respond.js. Worked for me in IE 7 and 8 with enquire v 2.0.2.

Answer 3

I found a solution that seems to work for IE8

1.Very important ! Remove match.media from respond JS if you use it (if not it will silently fail in IE)

2.Include Modernizr with at least mediaqueries testing, load, shiv : http://modernizr.com/download/#-shiv-mq-cssclasses-teststyles-load

3.In < head > (because we need respondjs in head)

<script src="../../common/vendor/modernizr/modernizr.custom.js"></script>
<script>
    Modernizr.load([
        // Test need for CSS media query polyfill
        {
            test: Modernizr.mq("only all"),
            nope: "../../common/vendor/respond/respond.min.js"
        }
    ]);
</script>

4.Before < /body > tag to load polyfill and your scripts

<script>
    Modernizr.load([
        {
            test: window.matchMedia,
            nope: [
                "../../common/vendor/polyfills/media.match.js",
                "../../common/vendor/polyfills/matchMedia.addListener.js"
            ]
        },
        '../../common/vendor/enquire/enquire.min.js',
        '../../common/scripts/script.js'
    ]);
</script>

I hope it will work for you !