RGBa & HSLa CSS Generator for Internet Explorer
04 Dec 09
Update! – The generator now converts HSLa values as well as RGBa. Many thanks to Michael Jackson for making sense of the algorithm to convert HSL to RGB.
If you’ve been keeping up with how recent browsers have been implementing parts of the CSS3 spec, you may already be using RGBa or HSLa to define semi-transparent background colors. You’d also know that this works in recent versions of Firefox and Safari, but not in any version of Internet Explorer.
There are, however, workarounds to get semi-transparent backgrounds working in IE. One such workaround utilizes a proprietary IE filter property, DXImageTransform.Microsoft.Gradient, but using it requires you to recalculate your RGBa or HSLa value into a hex code formatted as #AARRGGBB, where the AA is the alpha value in hex format. The remaining RRGGBB value is standard hex code that is familiar to anyone who writes CSS.
I recently used this workaround for a new site I’m working on, but I found the task of converting an RGBa value to a #AARRGGBB hex value to be tedious to the point of being nearly inscrutable. So I did what any lazy programmer worth his salt would do: I put together the little tool you see below to automate this conversion and give the IE-specific CSS for any RGBa or HSLa definition. Try it—just enter an RGBa definition like rgba(24,104,33,0.65) or hsla(248,65%,20%,0.4) below and you’ll get the version of that code which IE will understand.
And that’s all there is to it. One important thing to note: be sure to put your IE-specific code in its own stylesheet and feed it to IE using conditional comments.
I’m sure I’ll find this tool useful in the near future. I hope you do too.
Comments
Jim says:
237 days ago ∞
Only for 7 or later?
6 does not support? or “supports normal”?
James Seymour-Lock says:
182 days ago ∞
Great tool, really helps speed up the whole process! Many Thanks
Björn Rixman says:
164 days ago ∞
Great idea, but for it to work in IE8, don’t you need to add one more line, but where filter is prefixed with
-ms-? like so:-ms-filter:progid:DXImageTransform… etc etc.I’ve been using it on a recent project and couldn’t get it to work without having two declarations.
Michael Bester says:
164 days ago ∞
@Björn – For some reason, I was able to get it working in IE8 without the
-ms-vendor-specific prefix, even with IE8 running in IE8 standards mode. At any rate, I did some research, and it indeed looks as if the proper way to do it is to have the two versions of the declaration, both with and without the prefix. Additionally, the version for IE8 with the prefix should also have its value quoted. I’ve updated the tool to reflect this.Thanks for pointing that out!
Björn Rixman says:
162 days ago ∞
Oh, that’s right, I totally forgot to mention the quoted values…
christofer pak says:
143 days ago ∞
super nifty! great job!
zarko says:
132 days ago ∞
Thanx a lot! It helps me!
mic says:
106 days ago ∞
You’re much better off using a semi-transparent png, and use that as background image. Works with all browser as of IE6, no conditional CSS needed. And for IE6 you can use the PNG hack, which greatly reduces impact for the rest of your CSS.
Michael Bester says:
104 days ago ∞
@mic – Care to explain exactly why you’re “much better off” using a semi-transparent png? You have an extra resource to download, and you still need to do conditional CSS to make that work properly in IE6.
susan ohtake says:
100 days ago ∞
Thanks for this!
Might also be helpful to note that it only works only on class definitions…it will not work if you try to apply it to an ID. I wracked my brain for hours trying to figure that one out ;-)
Private Facebook says:
89 days ago ∞
I think mic is a bit confused judging by his reply
Zoe Gillenwater says:
76 days ago ∞
Very cool! What would it take to convince you to make an HSLA one? :-)
Tom B says:
71 days ago ∞
if you use it in a :hover it causes a weird flicker effect :(
Michael Bester says:
70 days ago ∞
@Zoe – Give it another try now!
@Tom – Yeah, unfortunately using IE filters can introduce some ugly artifacts and unwanted side effects in some situations. Flickering and poor text anti-aliasing are among the problems one can encounter, so if you do want to utilize filters, I’d recommend experimenting to see what works and what doesn’t, keeping in mind that not everything will work.
Craig says:
68 days ago ∞
Wonderful. This saved quite a bit of time.
Much obliged!
the future says:
58 days ago ∞
Saved me a lot of time too. Thanks for the article.
Zoe Gillenwater says:
57 days ago ∞
Awesome, thanks so much for adding the HSLA option. But, strangely, now I can’t get it to work at all. I put in an HSLA value, push Enter, click into the IE value box — nothing happens. I’m sure I’m doing something wrong…Could you clue me in?
Michael Bester says:
56 days ago ∞
@Zoe – Sorry about that. I found a
console.log()statement in the script that I shouldn’t have left in there—it may have been throwing an error for you. Out of curiosity, which browser and version are you using?You shouldn’t have to click anywhere or hit enter. It should do it’s thing which each character you type in the HSLa / RGBa input box. Try it again and let me know if you are still having issues with it.
mato848 says:
52 days ago ∞
That just awesome tool , you made my life easier :)
Retheesh Gopi says:
40 days ago ∞
Hey man..its coool, really wonderful, i was searching this for a loong time…. thanx buddy…really super….congrats
shoebappa says:
14 days ago ∞
What a time saver, thanks!
tdskate says:
8 days ago ∞
Nice little tool.
Can you make something like this that converts box-shadow properties to an IE filter?
Zoe Gillenwater says:
6 days ago ∞
Cool, fixed now! I discovered that it doesn’t like it if you don’t have a zero in front of the decimal in the opacity level, such as hsla(182,44%,76%,.5), but that’s not a big deal. Thanks again for this great tool!
Your Turn