The major problem with this is that hard coding a pixel value is not a good long term solution. CSS media queries can easily be changed during a projects lifespan, and it’s easily forgotten to update both the CSS and JS to when changing values for browser width. You’ll also probably end up with a bunch of JS-files that has dozens of different widths.

Set with CSS, get with Javascript

Since our media queries is set by the CSS, why not have the CSS tell our Javascript what media query we’re currently inside? That way our JS will never have to worry about what width values we set.

So we’re going to build a few SCSS-mixins that’ll define and output our breakpoints right inside the web page with the help of pseudo-elements. We’ll also build a Javascript function that will parse that information and trigger a custom event that we can use for writing functions for our different media queries.

This content-attribute is what we’ll be hooking our Javascript on to later.

And the last CSS we’ll do is to use all our three media queries on the body element, where we’ll call our define-breakpoint mixin with the names of the media queries. I feel like outputting our media query names in the body element is the cleanest way since it’s always a part of each page. You can also output it in the html-element, either is fine.

The Javascript

So, now we’ve outputted our media queries into the page in a clean way. Let’s create a Javascript function that gets the content inside our body:after element and triggers a custom event which we can listen to. Let’s start with the foundation:

The first thing we do is checking if the browser supports getting our pseudo element content with the help of window.getComputedStyle. Next we’ll define our variables that we’ll be needing and finally we’ll fire up our initiation function.

Next up is writing our init function and a resize listener with an event trigger:

The only thing needed in the init function is to check whether or not the browser is capable of getting the styles, this is true for all modern browsers except Internet Explorer 8 which is neat.

After that we call our resize listener, which will get the text content of our body’s :after element and trigger a custom event that we can listen to. We also compare the last known breakpoint to the current one, if those two aren’t the same, meaning we’ve entered a new breakpoint, we’ll trigger the breakpoint-change event.

And that’s all we need. We can now listen to our custom event and do whatever we want when the media queries triggers in the browser.

The issue with the Modernizr approach, however, is that one is duplicating the definition of one’s breakpoint sizes between CSS and JavaScript. The approach specified in the article resolves this by allowing referencing of breakpoints by name.

I’ve got a much better solution that doesn’t use CSS at all! It is pure Javascript; no jQuery and no CSS media queries. The breakpoints are set up and managed in Javascript. I’ll have it up on GitHub soon as I work out how GitHub works.