Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

What happens when a CSS style isn't supported by the browser, but the property is?

What happens when a CSS style isn't supported by the browser, but the property is?

Problem

I'm wondering what happens if a CSS style is supplied for a property which the browser supports, but the style itself isn't supported.

Take for example the following in IE8;

background: url(../path/to/img.png);
background: rgba(0,0,0,0.8);

Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?

Thanks :).

Problem courtesy of: Kemebear

Solution

Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?

The answer is YES, it will completely ignore that value, and hence it won't render any color, it's a common practice to use a fall back with a hex value like

.class_name {
    background: #000;
    background: rgba(0,0,0,.5);
}

So, when you write the background twice, it's completely valid, the browsers who understand the rgba() will render an opaque background, but the browsers who don't understand rgba() will use #000.

Though, there are various workarounds for that, like, you can use :before or :after, with filter property with a negative z-index, which can be used as an opaque background, or you can do is, use a normal 1x1 px opaque png image only for IE8.

For example

background: url("IMAGE_URL_HERE")\9; /* Targets IE8 and below */
Solution courtesy of: Mr. Alien

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

What happens when a CSS style isn't supported by the browser, but the property is?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×