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

Question

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 :).

Answer 1

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 */