Compiling and maintaining ie-specific stylesheets

Question

What is the common practice for maintaining IE workarounds in a separate CSS file? I\'m talking about deeper issues that are impractical to work out by othe

Answer 1

You can use JavaScript to add a class to the HTML based on the browser and other things - I find these really useful! This is the one I use http://rafael.adm.br/css_browser_selector

Answer 2

Sass (version 3.2+) can do this fairly easily if you're ok with generating 2 different stylesheets.

Here's your mixins:

$ie-only: false !default;

@mixin hide-from-ie {
    if $ie-only != true {
        @content;
    }
}

@mixin show-only-ie {
    if $ie-only == true {
        @content;
    }
}

In your SCSS files:

.some-class-lets-say-datepicker {
    @include hide-from-ie {
        background-image: url(data:image/png;base64,/*encoded image*/);
    }

    @include show-only-ie {
        background-image: url(../gfx/lets-say-datepicker-icon.png);
    }
}

Make a separate IE-only file that imports your other SCSS files, but has this at the top:

$ie-only: true;

Use conditional comments to serve old IE versions the generated css file with $ie-only set to true, and every other browser gets the one generated with $ie-only set to the default false.

Inspiration for this technique was found here: http://jakearchibald.github.com/sass-ie/