New Screencast: Using the Unit PNG Fix

* August 21st, 2008 *

by: Chris Coyier

Designing using alpha-transparent PNGs makes life so much easier and cooler designs possible. As we are all painfully aware, IE 6 and under do not support them. They display… but any areas of alpha transparancy get turned into nasty blue-gray and are anything but transparent. There is a way to force IE to respect the alpha transparency though, commonly referred to as the PNG hack. There are various methods, all boiling down to the use of a proprietary Microsoft CSS “filter”. A newcomer on the scene is the “Unit PNG Fix” which is ridiculously easy to use. Simply link up a very tiny JavaScript file in your header and you are done!

Responses

Michael
August 21, 2008
[ permalink ]

After 5 minutes of nothing but pushing one of your advertisers service I closed the video and just did a google search for “Unit PNG Fix”.
Chris Coyier
August 21, 2008
[ permalink ]

Yeah that went on a little long, I have a tendency to do that. Sorry about that. To be fair though, I do think that service is kinda cool. And beyond that, the videos are free and include a fast-forward button =)
BookwormProductions
August 21, 2008
[ permalink ]

There are drawbacks to this particular implementation of the png hack which should be noted.

No ability to selectively apply the hack: This can be a big issue if your using allot of pngs which are not transparent or are simply 8bit pngs and do not need the filter applied. Applying this to images that don’t need it means the page takes longer to load. I believe the script checks for the transparent property in the css file but if your like me you might often have this property set on non-transparent images.
Background images with repeat set are stretched: rather than left alone (the filter does not supporting repeating images), this may or not be a problem depending on what you’re using the image for. Again there is no way to selectively set/use this.

Do to these drawbacks I will probably continue to use supersleight and the behavior htc method. They both offer far more control over how the hack is implemented than unitpng and as a result can be made to preform better.
Tim Wright
August 21, 2008
[ permalink ]

I just started using this a couple weeks ago, its a pretty good solution to a real pain-in-the-ass problem. I dig it and will definitely be using it in the future.
Chris Coyier
August 21, 2008
[ permalink ]

@BookwormProductions: Thanks for bringing up those very good points. I completely overlooked those things. There is something to be said for that “set it and forget” approach, so deliciously easy. But yeah, if you need finer grained control, the classic behavior.htc file method allow for that.
Chris Coyier
August 21, 2008
[ permalink ]

@Tim: Yeah man. It feels like a fresh breath of air to me to just say “screw it”, I’m designing with alpha transparency from now on. I’ll throw this hack in there for all the ancient IE browsers, but that’s all you get from me =)
Tommy Day
August 21, 2008
[ permalink ]

I’ve been dealing with IE6 a lot lately at work, and I hate the idea of supporting it at all.

One thing I read online that really struck a chords is this: The more you spend time making your designs work in IE6, the more you just prolong the existence of the ancient browser. If we all abandon it, it will die a lot sooner.
Ken
August 21, 2008
[ permalink ]

Chris,

Thank you for showing us a different way to approach the png problem.

I’ve used a different method, that correct me if I am wrong you didn’t mention before but tackles the problem elegantly and it is really easy to use.

It’s from Dean Edwards and a google code hosted project. http://code.google.com/p/ie7-js/

The nice thing is that besides taking care of the png it also makes IE6 behave in a more standard compliant mode.

Also it can be selectively applied by only appending a -trans.png to whatever image.

Anyways thank you and post something more detail on kickapps like the Wufoo video, it really looks cool.

-Ken
Aaron B
August 21, 2008
[ permalink ]

Thanks for the screencast Chris. No worries about the Kickapps part, I wanted to see more actually. Maybe it deserves its own screencast.

@Ken: Yeah, I’ve been using it too. It’s pretty nice, not hard to use, and it can fix PNGs selectively. BUT, I still want to try this Unit fix because I can’t resist the “Set it and forget it”-ness.

@Bookworm: About selectively applying the fix, there’s a few things about that. One is, if they are using IE6, odds are they aren’t on the fastest machine/connection anyway, so they’re probably used to slow loads. Two, it only slows down users using versions less than IE7, which the percentage is continually declining. Three, it depends on your audience. If your IE6 viewers are a very small percentage because of the particular nature of a website, then even less to worry about.
Alper
August 21, 2008
[ permalink ]

thanks for tip!!

but I don’t understand which technic is more good and more powerfull..
your said “from Dean Edwards and a google code hosted project.” or this “unit png fix”??
V1
August 21, 2008
[ permalink ]

Yes, that might be easiest to use PNG hack. BUT its certainly not the best out there.. Yes it does have the file size but at what cost?

This is one of the best fixes out there if u REALY need to use it.. http://ajaxian.com/archives/mtjs_iepnghandler-more-png-support-for-ie-6

its bigger, but better.

Personally i HATE using PNG fix up scripts. They DESTROY your page performance.. its something u do not want.
PNG8 with alpha transparency are the way to go for me.
Ken
August 21, 2008
[ permalink ]

@Alper,

Hey, I was just mentioning that in the past the solution I found to work for me was the one from Dean Edwards, when it first came out you needed to upload the javascript file or files and host them yourself.

That is now different since he is using the google code and everything resides in there and you just link to it.

-Ken
Grant @ BTP
August 21, 2008
[ permalink ]

Nice video. The KickApps featurette was a bit long but interesting!

The best PNG fix solution I’ve come across is the TwinHelix 2.0 Alpha. It supports repeating backgrounds and with Whatever:hover you have a complete solution for adding transparency to nav bars, tabbed menus etc. Selectively applying the fix is nice.

Looking at Micah Tischler’s solution (mentioned above by V1) I’m not sure whether it offers anything more than what I already have but I’m not keen on putting JS onloads into the body tag - does it even discriminate between browsers or load the JS for all browsers?

Dean Edwards’ IE7-JS solution is neat but doesn’t support background repeats yet and I’ve had less than ideal results even in situations without repeating backgrounds.

UnitPNGfix seems cool if you know absolutely that you won’t need repeats but I usually do.

@ Tommy Day: yeah, it would be nice to abandon IE6 support but that’s not an option yet. Soon enough we’ll have IE8 and be tweaking things to perfection in 3 Microsoft browsers, still waiting for IE6 usage stats to drop enough to warrant no longer supporting it. It’s a way off yet, and you just know that the one job you decide to skip IE6 support will result in a call from your contact saying they had an email about the website..
kirill
August 21, 2008
[ permalink ]

Ive been using it for a few weeks too. Most of the time there are no crazy side effects, but sometimes really strange things will happen. For example a random content block will just disappear in ie6 for no apparent reason. So just gotta be careful with it
AnomynousPierson
August 22, 2008
[ permalink ]

The video was far too long and more than half of it was shameless plugs of your sponsors which you later admit. The “fix” has numerous problems mentioned here in these comments so I need not repeat them. It would have been nice to post a link to the fix itself instead of leaving your readers at the mercy of google.

This is my first time to your site and I am not only unhappy with the opinions and the overall commercial behavior of it. While the following is not needed to point out the flaws of this site, I’m made painfully aware of the fact that you both design using and are a supporter of Apple Inc. This tells me any tech related opinion you might have is of little value and a detriment to the community.
Will
August 22, 2008
[ permalink ]

http://www.twinhelix.com/test/ has a great script called “IEPNGFix v2.0 Alpha” which works really well with transparent png’s and allows for repeating backgrounds. Its really easy to set up. One downside to it , though, is that it tends to cause slow page loadings, but otherwise not a bad little png fix.
Eric
August 22, 2008
[ permalink ]

Dang, it seems that the file service site is flagged with ‘Games’ which makes it work-proxy server unfriendly.
Danc
August 23, 2008
[ permalink ]

Hi Chris,

Really appreciate your hard work and the helpful tutorial screencast you have made for us.
Recently I am not too sure if there is a problem with my server or the itune server or otherwise your uploading.
I keep downloaded only half of the screencast in my itune.
Even when I try to view it through the web, it seem the same.
I know it sound disturbing, but your every screencast really help me a lot.
Hope that you can provide me with so wise solution.

Thanks and wish you all the best…..

Danc
Grant @ BTP
August 23, 2008
[ permalink ]

@AnomynousPierson : There are 3 links right above the video: a link back to this page, a link to Unit PNG Fix and a link to IE Tester. They link directly to the relevant sites and they’re pretty easy to see.

I’ve found most of the videos here to be informative and useful, so if Chris needs to plug the sponsors a bit to offset bandwidth costs then that’s surely understandable. If you’re so sickened that you choose not to waste his bandwidth in future, I’m sure he’ll get over it..
mhaltom
August 24, 2008
[ permalink ]

Chris great video on the PNG fix. I already use PNGs but knowing this fix will definitely lend me towards using them more often.
keif
August 27, 2008
[ permalink ]

I really want to incorporate the TwinHelix PNG fix into mootools - I edited one a friend wrote to handle images, CSS inline and CSS stylesheets, but Twin Helix managed to do repeating backgrounds and positioning (very cool).
lenaluna
September 3, 2008
[ permalink ]

thanx for the tips
I tried to download the ietest thing at debugbar.com, but I couldn’t find a download for mac OSX?
lenaluna
September 9, 2008
[ permalink ]

Is the IE Tester also for Mac OSX? where can I download that? it is NOT on the link page you have on the screen cast…..

thanx
Wes
October 22, 2008
[ permalink ]

After reading the comments here I have just implemented version two of TwinHelix. Can’t comment as yet on slow-down of load times but in case anyone is interested, it really does work.

CSS-Tricks

New Screencast: Using the Unit PNG Fix

Responses

Leave a Comment

How do you keep track of design inspiration?

Friends

Projects

History

About the Author