Cross browser W3C compliant semi-transparent background color

Question

To set a semi-transparent background I use:

background-color: rgba(0, 120, 180, 0.8);

For IE, which doesn't support rgba I use a 1x1 png with the same color:

background-image: url(http://i53.tinypic.com/2mgtu9e.png); 

(demo here)

Question 1

I know that there is another method for IE which uses filters.

Is this method considered as W3C compliant ?

Question 2

Say I combine 20 1x1 png images into a single sprite.

How could I use this sprite to set an element's background color according to the 7th pixel in the sprite ?

Answer 1

As others have said, no IE filters are not W3C compliant. They also incur significant overhead and have performance ramifications. Unless I am mistaken when a filter is applied to an HTML element it will be applied to everything in that element including its text. So you'd end up with semi-transparent text too. There may be a way to keep that from happening but I haven't come across it. Also there are times when IE filters don't play well with semi-transparent PNGs as this article mentions.

Speaking of PNGs, the idea of using a sprite really only works if you have a specific height or width or both. So this really won't work for what you need, like Merianos Nikos said. Also tiling a 1x1 image is a really terrible idea. I say this because there are performance issues when you do that, especially with IE6. Though IE6 may not be a concern for this, tiling such a small image still causes a performance hit since the browser must draw and redraw each and every one. See this StackOverflow entry.

For this situation I would use something like Modernizr which will make rgba available to use in browsers that don't support rgba. After customizing a download for just rgba and a few other things (HTML5 shim, yepnope, and adding CSS classes) the download was 6.1kb. Not a huge hit to make development easier.

Update I misspoke when I said that Modernizr enables rgba. It doesn't do that but it will let you know that rgba is enabled in the browser. It will add classes to the html tag that tells you the abilities of the browser.

Answer 2

Answer #1

This method is not W3C compliant. The way that Internet Explorer uses Filters is not the regular one. Filters are not supported at all from the W3C specification. The filters are Internet Explorer plugins.

Answer #2

There is no way to use them. In sprites you can only use images that are not repeated in the background.

In example: Say that you have the following sprite

x   y   z

r   t   s

u   v   a

if you have now an area that you like to use as a background the image t from your sprite. You can set the very top left side of the div to display the t image, but then when you need to reapeat the background you will start again from x. That means that you will have repeated all the images from the sprite.

Answer 3

Question 1: CSS3please. The box-gradient shows how to use the MS-filter.

To check if valid: W3C CSS validator . I'm getting errors, so I guess it's not considered valid CSS