how do I use a filter: for ie8 that won't affect ie9?

Question

I have a sass mixin that allows me to define alpha backgrounds

@mixin background-rgba($r,$g,$b,$a) {

    $color: ie_hex($r,$g,$b,$a);
    $value: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=##{$color},endColorstr=##{$color})");

    //ie
    -ms-filter: $value;
    filter: $value;
    zoom: 1;

    background-color: transparent\9;
  // Good browsers.
    background-color: rgba($r,$g,$b,$a);

This works for IE 7-8, but the filter rule is being picked up by IE9. I realize I can use conditional tags in the <head> but that isn't really what I need. I need to be able to use this all over the place.

Aren't there 2 filter properties? `filter` and `-ms-filter`. The unprefixed version has been kicking around forever, but the prefixed version is newer. This may be of use: http://stackoverflow.com/questions/1768161/how-do-i-reset-or-override-ie-css-filters — cimmanon, Jan 06 '13 at 02:44
Out of curiosity, why do you want to deliver a different experience for IE8 users and IE9 users? — Sampson, Jan 06 '13 at 03:13
@JonathanSampson IE9 understands rgba() natively. It doesn't need to resort to the filter, which is inferior and screws up other things like border-radius. — pixelearth, Jan 07 '13 at 04:01

score 0 · Answer 1 · edited May 23 '17 at 12:12

You want to avoid using conditional tags in the <head> to feed it IE specific CSS (as I understand your statement). There are two ideas I can think of otherwise:

IE9 Class

Not sure if you are also opposed to using conditional comments to set a class on the html or body tags? Or barring that, using javascript to set a similar class. Then you can preset the mixin to generate a...

.ie9 .yourSelectorUsingtheMixin { filter: none; ms-filter: none; }

... following the main entry using the background-rgba mixin.

@Media Hack

This post notes a hack for IE9 that combines @media with a true hack maneuver \0/ that would be of the form:

@media all and (min-width:0) {
    .yourSelectorUsingtheMixin { 
       filter: none \0/; 
       -ms-filter: none \0/;
    } 
}

score 0 · Accepted Answer · answered Jan 07 '13 at 04:04

This is what ended up working for me, basically turning off the filter for IE9. I'm not happy with this solution, but it's going to have to do for now.

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important; /* ie9 requires quotes */

how do I use a filter: for ie8 that won't affect ie9?

2 Answers2

IE9 Class

@Media Hack