rgba background with IE filter alternative: IE9 renders both!

15
votes

I'm trying use make a div's background transparent using a mixture of CSS3 rgba() and microsoft's filter property like this:

div {
    width: 200px;
    height: 200px;
    /* blue, 50% alpha */
    background: rgba(0,0,255,0.5);
    /* red, 50% alpha */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}

As expected, browsers that support rgba() will render the div as blue, whereas IE 6-8 will render it as red.

IE9 can apparently handle both (previously I thought filter support had been removed) and the result is a purple div. Is there any way of making IE9 support either of these properties but not the other? rgba() would obviously be preferred.

N.B. I am using IETester to run these tests. If the proper build of IE9 does not do this please let me know.

5
cssinternet-explorer-9

5 Answers

16
votes

I’ve come up with a hacky workaround that I thought I'd share.

IE9 and above supports the :not() CSS pseudo selector. By using an attribute that doesn’t exist on an element we can get IE9 to disable it's filter gradient:

div {
    width: 200px;
    height: 200px;

    /* For FF, Chome, Opera, IE9+ */
    background: rgba(0,0,255,0.5);

    /* For IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}

div:not([dummy]) {
    /* IE9 only */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}

I ended up using this because my transparent div only features once. It also seemed a little neater keeping things to CSS, rather than using conditional comments in the HTML.

Edit: In support of other answers, I found this article from the Microsoft dev team encouraging developers to use conditional comments, not CSS workarounds like mine.

7
votes

If you're using HTML5 you may want to go down the route of using

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->

and in your CSS use something like :

.ie9 .element {filter: none; }
6
votes

This seems to work for me (not fully tested in all versions). According to the discussions in this blog the :root selector is only available in IE9 and thus the code below can be written to remove all filter settings in IE9.

:root *
{
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}

Edit: !important needed to make sure it works in all places.

5
votes

Take a look at browser/version targeting using conditional comments. You'll want to target specific versions of IE and implement your styling per-version.

http://www.positioniseverything.net/articles/cc-plus.html

0
votes

The simplest and most reliable method for filter: compatibility I've found uses the code http://www.colorzilla.com/gradient-editor/ generates: 

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Then you add a gradient CSS class to the element that needs it. And that's it.

Although conditional comments are still a bit of a hack, in my opinion they're less so than universal selectors or the likes of :not and don't have the performance risks.

Remember that Microsoft dropped conditional comments from IE10 and above, but you should almost never need them for those versions.

I wouldn't trust IETester either; download a virtual machine with proper IE9 on from https://www.modern.ie/en-gb - it's free; all you need is time and disk space (keep the original download so when it expires you can just reinstall.)