Media Query Change Detection in JavaScript Through CSS Animations | Responsive Web Design

Media Query Change Detection in JavaScript Through CSS Animations

An interesting approach to identifying Media Query changes though JS by including quick non-visual animations within each breakpoint and watching for the event. As the author points out it’s not really production ready (IE9 doesn’t support animations for instance) but a quirky technique.

Media queries are relevant to both CSS and JS. The need and desire to manage those in one place is real. There have been some clever ways to do this, like Jeremy Keith’s Conditional CSS. But in that case, the onus is on you to test after window state changes. You can get a true listener with MediaQueryList, but then you’re maintaining the media queries in both places again. Ah well, I’ll let Alessandro explain.

An excerpt from Media Query Change Detection in JavaScript Through CSS Animations

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.