Importing CSS Breakpoints Into JavaScript

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

Say you need your JavaScript to do something when a CSS media query breakpoint changes. That’s what matchMedia is for, but that isn’t as supported as media queries are and requires you to maintain those breakpoints is both CSS and JS.

People have been inventing solutions for this for a while. Even right here on CSS-Tricks, like Enquire.js, an animations based technique that avoids resize events, and even utilizing Sass.

Mike Herchel’s solution is to change the :before content on the body and grab that value as the window resizes. That value will change when the CSS breakpoints hit, allowing you to react in JavaScript.

Three thoughts: 1) If you’re binding on resize, probably debounce. 2) If you can’t or don’t want to debounce, at test if the value has actually changed before performing any more work. 3) Have a good naming strategy for the breakpoints.

Direct Link →