Leggere un file CSS con Javascript e modificare dinamicamente la pagina

Quindi le query @media di CSS non funzionano in IE8.

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

Ora, potrei creare file CSS separati chiamati IE_min768.css e IE_min972_max1024 e usare Javascript per caricare e scaricare dinamicamente i file mentre la larghezza della pagina viene aggiustata. Ma questo violerebbe il principio D.R.Y. e sarebbe un fastidio mantenere il CSS in più posti.

Sarebbe possibile usare Javascript (solo in IE) per leggere effettivamente il file CSS, rilevare le sezioni @media e applicare dinamicamente quel CSS al browser nella situazione corretta?

Risposta n. 1

Non reinventare la ruota. Usa semplicemente respond.js.

Dal readme su GitHub:

Lo scopo di questo script è fornire uno script veloce e leggero (3kb minificato/1kb compresso in gzip) per abilitare design web responsive nei browser che non supportano le Media Queries CSS3 - in particolare, Internet Explorer 8 e versioni precedenti. È scritto in modo tale da poter probabilmente aggiungere il supporto anche ad altri browser non compatibili (ulteriori informazioni a breve).