Alpha PNGs in Internet Explorer 6
That elephant in the room is losing some weight. The forever scorned IE6 has always had issues with alpha PNGs, those semi-transparent images of goodness. The market share of IE6 is surprisingly big, especially for more mainstream sites and web developers such as you and me are still left holding the bag to support them.
Stoyan Stefanov, one of the people behind Smush.it, has posted the fifth installment of image optimization on the the YUIblog. This time on AlphaImageLoader. Stoyan discusses the performance issues involved in using the IE-only filter with some really interesting information. It's definitely worth a read.
Drew Diller, of whom took my VML rounded corners to the next level with DD_roundies, is back with another script, specifically aimed to fix the alpha PNG issue. After noticing that the VML supported alpha PNGs, Drew took on the task of isolating the functionality and to ensure that background-position and background-repeat were properly supported as well. Check out DD_belatedPNG for more info and lots of examples.
Conversation
I disagree that developers have to be left "holding the bag" on IE6's issues. This is akin to telling a musician he's responsible for the terrible stereo system his music is played through. What we can do is add prompts on our sites for all those still clinging to IE6 to update to a new browser. Unfortunately, while developers continue to support a lousy browser, users will not have any reason to upgrade.
@guy: We sometimes have client requests to explicitly not do that, and if I were a client, I wouldn't want some cheesy message like that on my corporate organization's website either. I wouldn't even do it on my own if it didn't degrade gracefully and wasn't "in your face" like some sites I've seen. I also wouldn't want it bugging me each and every visit - I'll upgrade to product X version Z when I'm ready. :)
That being said... YAYYYYYYYYY! Thanks, Jonathan.
@guy: Actually, yes, musicians/producers do mix music specifically for terrible audio systems (or maybe an article from Rolling Stone magazine is more your thing).
And putting prompts for users to upgrade isn't very helpful to those who can't. I just finished a project a couple months ago where the company of tens of thousands still had IE6 as the corporate default browser. In that particular case, it was definitely of importance to have the design look just as nice in IE6 as it did in any modern browser. While I still have users to support, I'll continue to find ways to support them readily and easily.
@guy You forget the big amount of users, which cannot upgrade because of technical restrictions (in firms) and personal less techical knowledgement (like my parents for example). And even in germany where are very many older people are living and using the internet, it is still important to support also IE6 because they really don't know how to upgrade their system or change to another browser...
Great to see that it is getting easier and easier to solve the problems that IE6 causes.
Nice to see that other professions face the same problems from the general public and low grade specifications, that we do. Shows we should be grateful as, at least our problem is getting better while looking at that Rolling Stone article, the problem for music producers is getting worse!
To me the argument that users should "upgrade this" and "update that" is akin to beating a dead horse. It's been going on for years and will continue until every single browser displays the exact same way as the others!
And that ain't gonna happen!
So lets' all agree that this is the hand we're dealt with make the best of things out of what we have!
My resolution has been tending towards the "let's make them WANT to upgrade" by building sites that work cross-browser the same, but adding nice touches to the ones that support them! This should then allow the users to see what they are missing without putting their noses out of joint if they can't update in certain environments!
I'll step down now, thank you for your time and patience. ;-)
Jonathan have you ever utilized the IE.js from google code, http://code.google.com/p/ie7-js/, I find this IE6 fix all to work wonders. Please check it out, if you haven't already.
@Jake: Yes, I've used IE7scripts on a project. It's a large script so it's important to pare it down to just what you need (in my case, I just wanted :before/:after support). It doesn't solve the alpha problem like the DD_belatedPNG script does, though, so you'd still need both, depending.
That's a nice script! Looking forward to test it.
Here in Brazil we have to support IE 6 because of the same problems Jonathan and Ole addressed. And in some cases, even support 800x600. But in a recent project, I took the decision to give users a horizontal scroll instead of a liquid layout. No regrets so far.
wow nice script! Why makes IE6 everything so difficult? Great post
Great script! Tried it out and works very well! I like the fact that background-postion and background-repeat is supported now! Well done!
Great stuff. Hopefully IE8 will pass Acid2 and be standards-compliant at some scale so we, the developers, shall not bother writing articles like these in future. Which is of course a bit naive to believe but is at least positive thinking :)
Mind you, IE5.5 had full support for 24-bit PNG including the transparency layer in it but if I remember it correctly, Microsoft got into trouble with PNG format licencing as it is open source. So they did Microsoft with it - they turned it off.
Thank you! I've been using the Unit PNG fix for a while now, and the background positioning was always and issue. This will work great.
The alpha PNG problem is a pain in the ass. Most of the images on my website where PNG until I saw my site on IE6 in a internet cafe. Switched back to gifs after that.
Wow, Thank you I've been using the PNG route for a while now as well, background positioning is a pain in IE anyways at the best of times so this will make things that much quicker!
Cheers Jonathan!
The PNG issue is a dead issue that has been dealt with a long time ago. You design your websites for the destination market base. Use PNGs where appropriate - simple!
Drew's DD_Roundies also supports transparent pngs in it so if you find yourself needing both you can opt for the Roundies variant.
The PNG issue was not completely a dead issue since Drew's solution offers the ability to do background-repeat & background-position which until he released belated PNG wasn't possible and forced me to come up with creative solutions for most of my designs for IE6.
Side note, Jonathan you should make your comment textarea box a bit larger!