internet-explorer-8singularitygs

How do you use mobile-first in IE8

Considering that SingularityGS follows, by default, a mobile-first approach, how do you guys solve the problem in IE8, which shows the mobile version of everything that depends on media-queries?

Have you found a solution for this or do I have to switch to desktop-first?

Thanks.

Solution

  • Instead of working around IE 7 and 8 shortcomings, you can make IE 7-8 actually support media queries!

    I use the awesome Respond.js polyfill to enable media queries in IE 7 and 8. Just add this code to your HTML <head> and you're good to go! 

    <!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

    You might also want to enable CSS3 selectors in IE 7 and 8 so that stuff like .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } would work.

    You'll need the Selectivizr polyfill. For Respond to work together with Selectivizr, Selectivizr should be of version 1.0.3b or later (which hasn't yet been releazed as stable for two years for some reason) and should be loaded before Respond. Selectivizr also requires NWMatcher or alternative to be loaded before it. So the correct order is this:

    <!--[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]-->

    And you totally should also have the html5shiv polyfill (aka html5shim) to make IE 7-8 support the most basic CSS3 stuff.

    So my ultimate set of IE 7-8 polyfills looks like this:

    <!--[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]-->

    Note: don't use IE9.js in combination with those as it will make IE 8 freeze.