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 DRY 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?

Answer 1

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).