11

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)
surfmuggle
  • 5,527
  • 7
  • 48
  • 77
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746

2 Answers2

11

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/

deceze
  • 510,633
  • 85
  • 743
  • 889
SamGoody
  • 13,758
  • 9
  • 81
  • 91
  • Hi, I tried `*color: red;` but it doesn't work. See here: http://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()`. – Misha Moroshko Jul 13 '10 at 11:48
  • 1
    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: – SamGoody Jul 13 '10 at 17:22
  • 2
    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. – SamGoody Jul 13 '10 at 17:24
  • OK, thanks ! Seems like IE conditionals are the best solution. – Misha Moroshko Jul 14 '10 at 10:20
5

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.

thenickdude
  • 1,640
  • 1
  • 17
  • 18
  • 1
    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. – Chris O'Kelly Feb 17 '16 at 04:45