rgba

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…
    • filter is 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?

2 Responses to rgba

    • aarontgrogg says:

      Hey, Aaron, thanks for checking on this.

      When I was initially doing all this, I was having a problem in all browsers where the text within the area eCSStender should be styling was being garbled, making it unreadable. I checked across multiple browsers on multiple computers.

      I don’t seem to be having that problem any more (https://aarontgrogg.com/practicalcss3/rgba/ecsstender/), but I am also not seeing the RGBA in IE…

      Any thoughts?

      Thanks again.
      Atg

Leave a Reply

Your email address will not be published. Required fields are marked *