CODEWITHSUNDEEP
htmlcss
GettingStarted
GettingStarted

Reputation: 7605

CSS issue with edge

.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;
}

Upvotes: 0

Views: 633

Answers (2)

Justinas
Justinas

Reputation: 43441

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;
}

Upvotes: 1

cloned
cloned

Reputation: 6742

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.

Upvotes: 3

Related Questions