javascript - enquire.js legacy support

Question

I'm trying to figure out what the best way to get enquire.js to work on legacy browsers (ie 6-9). On enquire's site, it says to use modernizr to check for matchMedia support, then load a polyfill if it's not supported.

Modernizr.load([
    //first test need for polyfill
    {
        test: window.matchMedia,
        nope: "/path/to/polyfill.js"
    },

    //and then load enquire
    "/path/to/enquire.js"
]);

Looking at the polyfill that it suggests, it says that modernizr already includes it with Modernizr.mq().

    Used in:
    Respond.js
    FormFactor
    Modernizr
https://github.com/paulirish/matchMedia.js/

I've looked into this, but can't find a way to make this work.

Answer 1

enquire author here!

So there's always a little confusion about the matchMedia polyfill. It doesn't polyfill CSS3 media query support into legacy browsers. What it does is polyfill the matchMedia javascript API for those browsers that support CSS3 media queries but do not offer this API. See here for support for matchMedia. For instance, IE9 supports CSS3 media queries, but doesn't have the matchMedia JS API, this is the target of Paul Irish's matchMedia polyfill.

If you're looking for a fully featured polyfill, that gives decent media query suport to older browsers, can I suggest using David Knight's media-match? I have worked in conjunction with him to test this and have proven support all the way back to IE6 - it works a charm :) You can find that here: https://github.com/weblinc/media-match. You can conditionally load it exactly as I suggested with Modernizr, just replace the appropriate parts.

Hope that helps, happy to answer any further questions you have.