Question

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.

Answer 1

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.