rgba is well-covered in all modern browsers, and can be achieved in all IEs with a combo of a filter for IE6/7 and -ms-filter for IE8.
The filter approach is a little bit tricky because it uses the Gradient filter, which requires your RGBa colors to be passed as converted as ARGB colors, which means rgba(123,123,123,.5) needs to be #7F7B7B7B (yes, there are 8 digits, as in: #AARRGGBB)… Luckily, Kilian Valkhof has created an RGBa-to-ARGB converter for you!
I have also found a solution that uses PHP to create a PNG image that can be repeated as a background-image. Slick, but more work than I could be bothered testing, so… give it a go if you want!
The Options
-
Internet Explorer Filter
Pros:
- Pure, valid CSS, no JS, no HTC, no tricks, no hacks!
- IE8 offers vendor prefix (-ms).
- IE6/7 use non-proprietary
filter, so can easily put that into IE-only stylesheet. - Easy to target specific browser versions if using HTML5 Boilerplate
<head>conditional comments.
Cons:
- Having to convert RGBa to ARGB? That’s a pretty big “con” to me, even with the converter…
filteris invalid, so stylesheets will not validate, if you care about that.- At least one more line of CSS for each feature…
The Bottom-Line
I was completely ready to give this to eCSStender, because the filter has to convert the RGBa, but eCSStender completely destroyed the text inside the box… So, I guess we’re back to filters… At least there’s a converter, right?
Leave a Reply