Getting Started With EnquireJS

The introduction of Media Queries has allowed us to jump leaps and bounds in our web designs for mobile. However, CSS isn't the only code we need to deliver device-by-device as front-end developers.

We're missing the another huge component and potential user experience concern: JavaScript.

Fortunately, we're in luck because JavaScript has something very similar called matchMedia that will help us sniff out our browser size and deliver our code accordingly. Additionally, Nicky Williams has developed a really helpful library called Enquire.JS that acts as a wrapper to matchMedia making it a little more manageble and easier to use.

To use Enquire we simply register a query, like so:

enquire.register("screen and (min-width:400px)", {
    match: function() {
        // Fires at load AND on browser resize.
    },    
    unmatch: function() {
        // Fires ONLY on browser resize.
    }
});

Now when our page loads Enquire will check our browser size and compare it to the min-width we have set inside of our query. If successful then all of the code that we have specified inside of our match method will be fired immediately. Otherwise, it will be ignored and will not be fired unless the user resizes the browser window and successfully matches the dimensions we have set in our query.

That is all there is to it. The included unmatch method can be very helpful in certain situations but it is completely optional. I have just included it here for reference.

A Common Mistake

A common mistake that I've noticed developers making while using Enquire is that they assume 'unmatch' is a direct opposite of 'match'.

Instead of thinking of 'unmatch' as an opposite to 'match' we must realize that there are many other scenarios where code must be reset or changed upon leaving a query that is separated from the match itself.

For example, a developer wishes to deliver two different sets of JavaScript code: a set of code for the desktop and a set of code for mobile devices. Now, their assumption is that they will only need to register a single Enquire query that applies to their desktop resolution. Then, if the browser doesn't match that specific query then they can put all of their mobile code inside of the 'unmatch' and it will fire instead. However, this will only cause a lot of confusion because 'unmatch' doesn't fire at page load. Unmatch is designed specifically to un-set or reset code while transitioning between queries.

To remedy this we can simply implement the same practice we are familiar with inside of CSS: creating multiple queries.

First let's take a look at the incorrect assumption:

// Incorrect!
enquire.register("screen and (min-width:399px)", {
    match: function() {
        // Code for Desktop
    },
    unmatch: function() {
        // Code for Mobile
    }
});

Now, let's see the correct way to implement that code:

// Correct!
enquire.register("screen and (min-width:399px)", {
    match: function() {
        // Code for Desktop
    },
    unmatch: function() {
        // Code to un-set or reset when leaving this query.
    }
});

enquire.register("screen and (max-width:398px)", {
    match: function() {
       // Code for mobile 
    },
    unmatch: function() {
       // Code to un-set or reset when leaving this query. 
    }
});

Now, we have full control of our desktop and mobile code which will be delivered exactly as we expect it to and we can leverage the 'unmatch' method should we ever run into a situation where we may need it.