Home » Web » CSS » Importing CSS Breakpoints Into JavaScript

Importing CSS Breakpoints Into JavaScript

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 to ArticlePermalink


Importing CSS Breakpoints Into JavaScript is a post from CSS-Tricks

Feed Source: CSS-Tricks
Article Source: Importing CSS Breakpoints Into JavaScript

About Admin

Powered by WP Robot