Pročitajte CSS datoteku pomoću JavaScripta i dinamički izmijenite stranicu


Dakle, CSS @media upiti ne rade u IE8.

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

Sada, mogao bih stvoriti zasebne CSS datoteke nazvane IE_min768.css i IE_min972_max1024.css i koristiti Javascript za dinamičko učitavanje i uklanjanje datoteka kako bi se širina stranice prilagođavala. Ali to krši D.R.Y. princip i bilo bi naporno održavati CSS na više mjesta.

Bi li bilo moguće koristiti Javascript (samo u IE-u) za stvarno čitanje CSS datoteke, otkrivanje @media sekcija i dinamičko primjenjivanje tog CSS-a u pregledniku u ispravnoj situaciji?

Odgovor #1

Ne izmišljajte ponovno kotač. Samo koristite respond.js.

Iz readmea na GitHubu:

Cilj ovog skripta je pružiti brz i lagan (3kb minificiran/1kb gzipiran) skript za omogućavanje responzivnog web dizajna u preglednicima koji ne podržavaju CSS3 Media Queries - posebno, Internet Explorer 8 i stariji. Napisano je na način da će vjerojatno omogućiti podršku i za druge preglednike koji ne podržavaju ove opcije (više informacija o tome uskoro).