Read a CSS file with Javascript and dynamically alter the page

Question

So CSS @media queries don't work in IE8.

@media (min-width: 768px) {
/* some css */
}
@media (min-width: 972px) and (max-width: 1024px){
/* different css */
}

Now, I could create separate CSS files named IE_min768.css and IE_min972_max1024 and use Javascript to dynamically load and unload the files as the page width is adjusted. But that violates D.R.Y. and would be a pain to maintain CSS in multiple places.

Would it be possible to use Javascript (in IE only) to actually read the CSS file, detect the @media sections and dynamically apply that CSS to the browser in the correct situation?

I read somewhere the witty observation that "lack of media query support is the first media query" :-) — Pointy, Sep 06 '12 at 19:07
More info at similar post: http://stackoverflow.com/questions/7444658/best-solution-framework-to-responsive-design-for-ie7?rq=1 — Kostia, Sep 06 '12 at 19:48

score 6 · Accepted Answer · answered Sep 06 '12 at 19:07

6

Don't re-invent the wheel. Just use respond.js.

From the readme on GitHub:

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

answered Sep 06 '12 at 19:07

Joseph Silber

214,931
59
362
292

Works beautifully! For completeness, I also want to mention [css3-mediaqueries-js](http://code.google.com/p/css3-mediaqueries-js/) that the creator of respond.js links to. Respond is working for me as my CSS is not too complicated. – brentonstrine Sep 06 '12 at 19:36

Read a CSS file with Javascript and dynamically alter the page

1 Answers1