color IE fallback for rgba() does not work

Question

Why the following fallback for IE color: red; does not work ?
In IE7, the color is black rather than red.
Live demo here

HTML:

<div>
    <span>Hello</span>
</div>

CSS:

div {
    width: 200px;
    height: 100px;
    background-color: blue;
    text-align: center;
}
span {
    font-size: 2em;
    color: red;
    color: rgba(250, 250, 97, 0.9);
}

3rd party edit

The mozilla mdn on css color lists the different options for color: value

• CSS 2 specification: color: <value> and value can be a keyword red or rgb(255,0,0)
• CSS Color Module Level 3 (Recommendation 2017-12) added SVG colors, the rgba(), hsl(), and hsla() functions for example: rgba(0,0,0,0)

Solution 1

RGBA is not supported in IE.

However, as it sees your color: style, it attempts to evaluate it and reverts to the default color (#00000000). You could use an IE specific hack here, such as

*color: red;

But, assuming that you are trying to affect only the background color, and not the opacity of the entire element, you're best off with a filter that sets the desired rgba value as the start and end color of a gradient - creating an rgba background.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

But remember - IE assumes that the Alpha is first, not last, so don't just convert and copy your values. The double filter is for IE6 and IE7 respectively.

http://css-tricks.com/rgba-browser-support/

Solution 2

Splitting those two color declarations into separate CSS rulesets cures this problem:

span {
    font-size: 2em;
    color: red;
}
span {
    color: rgba(250, 250, 97, 0.9);
}

Now IE gets red text, better browsers get the RGBA declaration.

Comments

[Misha Moroshko]

Hi, I tried *color: red; but it doesn't work. See here: jsfiddle.net/JryG2/9 I'm not trying to change the opacity of the background color. By setting color: rgba(250, 250, 97, 0.9); I meant to set opacity of the text color. So I still don't understand how to define a proper fallback for rbga().

[SamGoody]

Woops, my bad. Was in a hurry, but that was bad. First: The star hack is only for ie6 & 7, so that was wrong. In IE 6/7 it would go after the other declarations, and that works (tested on your fiddle). span { font-size: 2em; color: rgba(250, 250, 97, 0.9); *color: red; } A more technically correct way would be to use IE conditionals, which means to write your code as above, close you style element, then create a new style element - with just the one rule - inside brackets as follows:<!--[if IE]> <style>span{color:red}</style><![endif]-->

[SamGoody]

Secondly, there is no way to set the transparency of the text color in IE, the best you can do is put the text into an element, and set the opacity of the element.

[Misha Moroshko]

OK, thanks ! Seems like IE conditionals are the best solution.

[Chris O'Kelly]

This is a total guess, but perhaps IE's css parser does not see a single valid rule, so discounts the whole block? This theory could be tested by adding a second, IE valid rule to the second block, and seeing if it stops working.