SASS 3.2 Media Queries and Internet Explorer Support

Question

I recently implemented this technique with SASS 3.2 using @content blocks on a project I've been working on, and I've just gotten to the point where I need to include support for older browsers such as IE7 and 8.

Example:

.overview {
  padding: 0 0 19px;

  @include respond-to(medium-screens) {
    padding-top: 19px;
  } //medium-screens

  @include respond-to(wide-screens) {
    padding-top: 19px;
  } //medium-screens
}

They both don't support media queries, and I've often handled this in the past by serving up all styles to these browsers when I had my media queries separated into separate partial files such as _320.scss, _480.scss and in my IE stylesheet loading them like so:

@import 320.scss;
@import 480.scss;
etc.

Which would load all styles, and always assign IE7 - 8 a 940px (or whatever the max width is) layout and styles. By nesting styles in SASS 3.2 inline like this, it eliminates the need for separate partial stylesheets, but totally screws up how I load styles for IE.

Any ideas or solutions on how to combat this? I could use a polyfill such as respond.js to force IE to use media queries, but would prefer to just serve up a non-flexible site to IE.

Any ideas on either how to best organize these files, or a better solution?

Answer 1

You can generate a separate stylesheet for IE<9 that contains everything your normal sheet has, but with flattened media queries based on a set width.

Full explanation here http://jakearchibald.github.com/sass-ie/, but basically you have this mixin:

$fix-mqs: false !default;

@mixin respond-min($width) {
    // If we're outputting for a fixed media query set...
    @if $fix-mqs {
        // ...and if we should apply these rules...
        @if $fix-mqs >= $width {
            // ...output the content the user gave us.
            @content;
        }
    }
    @else {
        // Otherwise, output it using a regular media query
        @media screen and (min-width: $width) {
            @content;
        }
    }
}

Which you'd use like this:

@include respond-min(45em) {
    float: left;
    width: 70%;
}

This would be inside all.scss, which would compile down to all.css with media queries. However, you'd also have an additional file, all-old-ie.scss:

$fix-mqs: 65em;
@import 'all';

That simply imports all, but flattens media query blocks given a fake width of 65em.

Answer 2

I use LESS for a lot of my work, but on larger projects, with many people working across files, I don't like using breakpoint files, such as 1024.less.

My and my team use a modular approach, such as header.less which contains all the code for just the header, including the associated breakpoints.

To get round IE problems (we work in a corporate environment), I use this approach:

@media screen\9, screen and (min-width: 40em) {
    /* Media queries here */
}

The code inside the media query is always executed by IE7 and less. IE9 and above obeys the media queries like a proper browser should. The problem is IE8. To solve this, you need to make it behave like IE7

X-UA-Compatible "IE=7,IE=9,IE=edge"

I've found this doesn't always work if set in the metatags in the HTML, so set it using the server headers.

See the gist here: https://gist.github.com/thefella/9888963

Making IE8 act like IE7 isn't a solution that works for everyone, but it suits my needs.