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)

Answer 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/

Answer 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.