cross-browser CSS3 with generated png's

Just how stupid is the idea of javascript rendering gradients, rgba's, rounded corners, drop shadows and possible other CSS3 functions inside transpa开发者_如何学Gorant png's to include with data url's?

There are better ways to support non-CSS3 browsers (ie IE) than this. I suggest CSS3Pie, which supports pretty much all the functionality you describe in IE.

CSS3Pie uses VML to do its rendering, which is makes for smoother gradients and curves, as well as being scalable. It also does rounded corners without interfering with the background of the element behind, which is an almost unavoidable problem with using graphics for founded corners.

If you are going to try rolling your own solution, I would suggest at the very least considering VML instead of PNG. If you go with a bitmap graphic solution, you'll have issues with elements where you don't know the size in advance (or worse, elements that are resized dynamicaly), and issues with backgrounds of elements behind the rounded corners.

Bottom line is that PIE is by far the best solution available for these features in IE. You're right, it does have some big issues, but there isn't any other solution that does a better job, and it's not for lack of trying -- there are a lot of alternatives, especially for rounded corners, but none of them come close.

Finally, I would say that whatever solution you go with, you need to be aware that IE<9 is a very slow browser. All these hacks (whether it's PIE or your own alternative) are great, but they will make it run even slower. Be careful about going too far and making your site look great but run too slowly. You might find that the most pragmatic solution is simply to let IE users see the site without all the bells and whistles.