Läs en CSS-fil med Javascript och ändra sidan dynamiskt

Så CSS @media-frågor fungerar inte i IE8.

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

Nu skulle jag kunna skapa separata CSS-filer med namnen IE_min768.css och IE_min972_max1024 och använda Javascript för att dynamiskt ladda och avlasta filerna när sidans bredd justeras. Men det bryter mot D.R.Y. och skulle vara jobbigt att underhålla CSS på flera ställen.

Skulle det vara möjligt att använda Javascript (endast i IE) för att faktiskt läsa CSS-filen, upptäcka @media-sektionerna och dynamiskt tillämpa den CSS:en på webbläsaren i rätt situation?

Svar #1

Uppfinna inte hjulet på nytt. Använd bara respond.js.

Från readme-filen på GitHub:

Målet med detta skript är att tillhandahålla ett snabbt och lättviktigt (3kb minifierat/1kb gzip-komprimerat) skript för att möjliggöra responsiv webbdesign i webbläsare som inte stöder CSS3 Media Queries - särskilt Internet Explorer 8 och äldre. Det är skrivet på ett sådant sätt att det troligtvis även kommer att ge stöd för andra webbläsare som inte stöder detta (mer information om det kommer snart).