Considerando che SingularityGS segue, per impostazione predefinita, un approccio mobile-first, come risolvi il problema in IE8, che mostra la versione mobile di tutto ciò che dipende dalle query multimediali?Come utilizzare mobile-first in IE8
Hai trovato una soluzione per questo o devo passare al desktop prima?
Grazie.
Invece di lavorare intorno a IE 7 e 8 carenze, è possibile rendere IE 7-8 in realtà supporta le query di media!
Io uso il fantastico polyfill Respond.js per abilitare le query multimediali in IE 7 e 8. Basta aggiungere questo codice al codice HTML <head> e sei pronto per partire!
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
si potrebbe anche voler attivare selettori CSS3 in IE 7 e 8 in modo che cose del genere .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } avrebbe funzionato.
Avrete bisogno del polyfill Selectivizr. Per rispondere a lavorare insieme a Selectivizr, Selectivizr deve essere di versione 1.0.3b o successiva (che non è stata ancora releazed come stabile for two years per qualche motivo) e deve essere caricato prima di rispondere. Selectivizr richiede anche NWMatcher o alternativa per essere caricato prima. Così l'ordine corretto è questo:
<!--[if lt IE 9]>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
E voi totalmente dovrebbe anche avere il html5shiv polyfill (aka html5shim) per rendere IE 7-8 supporta le cose più elementari CSS3.
Quindi il mio set finale di IE 7-8 polyfills assomiglia a questo:
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
Nota: non utilizzare IE9.js in combinazione con quelli come farà IE 8 congelamento.
Uso il supporto Fallback No Query incorporato in Breakpoint in combinazione con le classi IE sul mio tag HTML o con i test Modernizr per il supporto Media Query.
https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks
Grazie. Non ho ancora usato Sass o Modernizr, quindi non sono sicuro di poterlo implementare. Se conosci qualche buon tutorial o spiegazione su come usarlo, per favore pubblica qui. Continuo a leggere su come è così bello e fa risparmiare tempo, ma non ho idea di come usarlo o configurarlo. –
Stai ospitando questi file .js in locale allora? Puoi collegarti a loro tramite un CDN? Grazie, –
Puoi dire dai tag di script che sono ospitati su un CDN. Puoi copiare il codice HTML e utilizzarlo nel tuo progetto senza modifiche. –
Si prega di non utilizzare Respond.js o Selectivizr. Sia Respond.js che Selectivizr producono richieste HTTP aggiuntive per ogni articolo di cui hanno bisogno e aggiungono ingigantire il tuo percorso critico. Risposta funziona solo con MQ min/max basati su PX e Selectivizr è così lento che ho avuto un arresto IE8 con un numero non irragionevole di elementi con cui ha dovuto lavorare. Piuttosto, lavora con i limiti dei browser che stai supportando e usa il rilevamento delle funzionalità e le classi per il supporto di fallback. – Snugug