Best way to support mobile first for IE8 without script?

Question

I am using SASS, Compass, Bourbon and Neat to create a wonderful responsive website.

However, it has dawned on me that IE8 (with its lack of Media Query support) would simply output the mobile version only, because I am using the mobile first approach.

Is there any way to use SASS to generate styles for IE8 automatically, with all the largest media queries converted as the default? I'd like IE8 to get the full desktop look only.

I want to avoid using scripts like respond.js, due to performance and also maintenance down the line.

---

Solution:

I am using Compass with the Bourbon SASS library. Bourbon has a media() mixin that I wanted to use.

Following on from the selected answer below, I ended up creating a simple wrapper mixin for the media() mixin provided by bourbon.

@mixin bp($bp) {

    @if $desktop-only {

        @content;

    }

    @else {

        @include media($bp) {

            @content;

        }

    }

}

In my ie.scss file (used by Compass) I set the $desktop-only variable to true. This removes the media query itself and simply places in the attributes that would have been within the query. Because their order is later in the compiled CSS, it takes precedence over the mobile only setting and IE then uses that style.

It results in a slightly bloated CSS fie, but it's worth it as no additional scripts are needed to make it render the desktop version.

Answer 1

I've written a solution for this myself. All you need is two different CSS files (one for modern browsers and one for older IE browsers) and a cleaver mixin.

Create a second SASS file which Compass can watch and call the file something like oldIE.scss. Copy all the imports from you original SASS file (styles.scss or whatever) to this file. Then put a new variable in both of them: $compile-IE. Set the values like this:

styles.scss

$compile-IE: false;

@import "all your other imports"

oldIE.scss

$compile-IE: true;

@import "all your other imports"

Compass will now create two different CSS files for you. You can place them in the HEAD of your Markup like this:

<link type="text/css" href="styles.css" rel="stylesheet" media="all" />
<!--[if (gte IE 6) & (lte IE 8)]>
<link type="text/css" href="oldIE.css" rel="stylesheet" media="all" />
<![endif]-->

Once you have the two files in place, you can start writing SASS with your breakpoints thanks to the following mixin:

// ----- Media-queries ----- // 
$breakpoints: S 480px, M 600px, L 769px;

@mixin bp($bp) {
// If compile-IE is true (IE8 <=) then just use the desktop overrides and parse them without @media queries
   @if $compile-IE {
      @content;
   }
   // If compile-IE is false (modern browsers) then parse the @media queries
   @else {
      @each $breakpoint in $breakpoints {
         @if $bp == nth($breakpoint, 1) {
            @media (min-width: nth($breakpoint, 2)) {
               @content;
            }
         }
      }
   }
}

Call the mixin as following:

p {
   color: blue;
   font-size: 16px;
   @include bp(L) {
     font-size: 13px;
   }
}

Now, if the variable $compile-IE is false (for modern browsers) the output will be this:

p {
  color: blue;
  font-size: 16px; }
  @media (min-width: 768px) {
    p {
       font-size: 13px; 
  } 
}

And when the variable $compile-IE is true (for older IE versions) the output will be this:

p {
  color: blue;
  font-size: 16px;
  font-size: 13px; 
}

Because the font-size: 13px is the parsed after the font-size: 16px the styles used for larger viewports (like bp L) will override the default mobile styling.

Hope this will help for you! :)