How to react on style changes within a Web page?

Question

Lets assume that we have a responsively-designed Web page which uses media queries to achieve three different views: screen, handheld and print. Lets assume further, that such a Web page includes several JS-based, view-dependent layout fixes, navigation logic, content-generating macros and similar stuff, reason for which may be more or less controversial.

Now, please imagine that users are playing with our design by resizing browser window and printing it's contents. A we would like to react on the style changes (carried out by the browser) in order to recalculate layout fixes, regenerate dynamic content, rearrange navigation or whatever else. But there is no "onMediaChange" event to be handled by our script, is it? So, in what way could a Web developer synchronise the media-driven style with the media-independent logic?

This question, in several forms and development contexts, has been asked on StackOverlow for years, but no rewarding answer has been given yet. There are workaroundss using width-based conditionals, but these neither handle the print view, nor react to width changes occurring after the page has loaded. Other group of CSS-sniffing solutions is based on polling which is fallible and inelegant. What I am looking for is a general, elegant, standards-compliant, client-side solution for synchronising JS and CSS with media changes. Two non-existing, ideal solutions could be:

The existence of an onMediaChange event, e.g.:

document.addEventListener('onMediaChange', myHandler, false);

The possibility to attach scripts with the link tag, e.g.:

<link rel="script" media="print" type="text/javascript" href="print.js"/>

I'll be grateful for any existing solutions, creative suggestions, theoretical comments or even a philosophical discussion exceeding the scope of this question.

If you think resizing is the only thing that will trigger your responsive design, then why don't you just attach a resize event listener? — MaxArt
– MaxArt, Commented Apr 28, 2013 at 15:48
Window resizing is here just an example. I'm looking for a general solution which will synchronise JS and CSS with the media-query mechanism (or something being a good makeshift for that). I'd like, for example, to call a JS function to reformat the document for printing. — Krzysztof Abramowicz
– Krzysztof Abramowicz, Commented Apr 28, 2013 at 16:10
Maybe this: css-tricks.com/enquire-js-media-query-callbacks-in-javascript — bfavaretto
– bfavaretto, Commented Apr 28, 2013 at 18:20

skz · Accepted Answer · 2013-05-09 16:56:57Z

1

I think you're looking for window.matchMedia API:

https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia

Basically, it'll let you attach an Event Listener to media queries. You could pair this with an append() method to add/remove dinamically <link> tags.

Unfortunately, as far as I know, it is poorly supported among old browsers, but using a polyfill (like this one) you could potentially get a global, cross-browser support.

answered May 9, 2013 at 16:56

skz

16510 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to react on style changes within a Web page?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related