Require fallback colors

Rule from css under compatibility category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base



Suggest an edit

Cancel

This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content



 

Older browsers (such as Internet Explorer 8 and earlier) do not understand CSS3 color values in rgba(), hsl(), or hsla(). Not having a fallback can leave these older browsers looking worse than expected:

.box {
  background: #000;
  color: rgba(200, 200, 200, 0.8); /* BAD: No fallback */
}

Semi transparent gray text on a black background in modern browsers, but black text on a black background for older ones. Reason: IE < 8 can't understand rgba and uses the default black text color

How do I fix this ?

Always include a fallback color in either hexadecimal or rgb() format, before the new color — for modern browsers to use the enhanced property instead.

/* BAD: */
.box {
  background: #000;
  color: rgba(200, 200, 200, 0.8);
  color: #fff; /* Fallback after enhanced color */
}
/* GOOD: */
.box {
  background: #000;
  color: #fff; /* Fallback before enhanced color */
  color: rgba(200, 200, 200, 0.8);
}

Resources

Browse another section of the knowledge base



Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started