CSS issue with edge

Question

.background-red {
    background-color: #ff6767d4;
}

On Microsoft Edge (not the Chromium one), this color is not being rendered correctly. How can I use CSS to use the following IF it's Edge

.background-red {
    background-color: red;
}

Hex with 8 Symbols is also valid syntax, it specifies opacity with the last 2 values. — cloned, Sep 23 '20 at 13:36
@cloned You can even use `color: #TFUBLYN`, but if your browser is not supporting wrong values, then it will simply ignore whole rule. — Justinas, Sep 23 '20 at 13:37
@cloned Just tested, you are correct. Could come in useful, cheers. — SJacks, Sep 23 '20 at 13:41
To see all the possibles way to define a color and the browser's support of them : https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility — SeeoX, Sep 23 '20 at 13:46

score 3 · Accepted Answer · answered Sep 23 '20 at 13:34

3

You just write:

.background-red {
    background-color: red;
    background-color: #ff6767d4;
}

The last working value will be used. If a browser doesn't understand a value it will fall back to the last one that it understands.

Edit: You can also use rgba() to define your color, as far as I know edge supports this format.

answered Sep 23 '20 at 13:34

cloned

1

your answer worked. I have to wait 10 min to accept it – software is fun Sep 23 '20 at 13:37

Justinas · Answer 2 · 2020-09-23T13:43:30.993

1

Based on this answer and caniuseit table IE does not support hex value with alpha channel. That's why it's ignoring whole rule.

To apply non valid values, you must set fallback for it. Note the order - browser will use last known rule when encountering invalid value.

.background-red {
    background-color: rgba(255, 103, 103, .83);
    background-color: #ff6767d4;
}

edited Sep 23 '20 at 13:43

answered Sep 23 '20 at 13:41

Justinas

I think it's supposed to be background-color: rgba(255, 103, 103, `0.83`); – Eliezer Berlin Sep 23 '20 at 13:43

2 Answers2