Javascript ile bir CSS dosyası okuyun ve sayfayı dinamik olarak değiştirin

Yani CSS @media sorguları IE8'de çalışmıyor.

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

Şimdi, ayrı CSS dosyaları oluşturabilirim, bunlara IE_min768.css ve IE_min972_max1024 adını verebilirim ve sayfa genişliği ayarlandıkça dosyaları dinamik olarak yüklemek ve kaldırmak için Javascript kullanabilirim. Ama bu D.R.Y.'i ihlal eder ve CSS'i birden fazla yerde sürdürmek zahmetli olur.

Javascript'i (sadece IE'de) kullanarak CSS dosyasını gerçekten okumak, @media bölümlerini tespit etmek ve doğru durumda bu CSS'i tarayıcıya dinamik olarak uygulamak mümkün olur mu?

Cevap #1

Tekerleği yeniden icat etmeyin. Sadece respond.js'i kullanın.

GitHub üzerindeki readme'den:

Bu scriptin amacı, CSS3 Medya Sorgularını desteklemeyen tarayıcılarda özellikle Internet Explorer 8 ve altı sürümlerde duyarlı web tasarımlarını etkinleştirmek için hızlı ve hafif (3kb küçültülmüş/1kb sıkıştırılmış) bir script sağlamaktır. Ayrıca, diğer desteklemeyen tarayıcılar için desteği de büyük olasılıkla sağlayacak şekilde yazılmıştır (bununla ilgili daha fazla bilgi yakında).