StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to react on style changes within a Web page?
text
Body
copied!<p>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.</p> <p>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?</p> <p>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 <em>non-existing</em>, ideal solutions could be:</p> <ol> <li><p>The existence of an <code>onMediaChange</code> event, e.g.:</p> <pre><code>document.addEventListener('onMediaChange', myHandler, false); </code></pre></li> <li><p>The possibility to attach scripts with the <code>link</code> tag, e.g.:</p> <pre><code><link rel="script" media="print" type="text/javascript" href="print.js"/> </code></pre></li> </ol> <p>I'll be grateful for any existing solutions, creative suggestions, theoretical comments or even a philosophical discussion exceeding the scope of this question.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload