DD_belatedPNG: Medicine for your IE6/PNG headache | Hacker News Reader

DD_belatedPNG: Medicine for your IE6/PNG headache

dillerdesign.com

29 pointsjeff1811 comments

This library, and the jQuery Supersleight plugin (there's also a non-jQuery version) are probably the best IE6 PNG "fixers".

However, in my experience you would be better off designing for this issue from the outset and avoiding the use of these libraries if you care about your layouts looking good in IE6. For simple situations, these can work fine, however you'll run into issues for anything beyond the basics. For example, in this library:

> "Fixed" <IMG/> elements must take on visibility:hidden;, and thus become unclickable. I see no workaround other than using clear pixel GIF replacements, and that is code that I am not going to write.

There go your buttons.

I've also encountered issues where sometimes, replaced images take on a different height and get stretched, but this behaviour is unpredictable.

Your best bet for dealing with transparent PNGs in IE6 is either to stop caring about IE6 and leaving IE6 users with the opaque backgrounds around the images, or switching to transparent GIFs. A good designer can produce transparent GIFs that are just as crisp as PNGs, and then you don't need to rely on hacks any more.

Where of course 'GIF' in your post is interchangeable with '8-bit PNG', which do work fine in IE6 (and 5.5).

I tend to avoid the various semi-transparency-in-IE6 hacks when I can avoid them and just degrade reasonably gracefully to 8-bit images where the designer/customer absolutely cannot live without translucency in modern browsers.

However, in my experience you would be better off designing for this issue from the outset and avoiding the use of these libraries if you care about your layouts looking good in IE6.

Strongly disagree. "Designing from the outset to avoid these libraries" means avoiding alpha-channel transparency altogether. That's a ridiculous design limitation just to satisfy IE6 users who also have JS turned off.

There go your buttons.

This is easily worked around by using <a>'s or <button>'s with background images.

   <!--[if IE 6]>

GWT has a wonderful, automatic mechanism for this workaround built into its ClientBundle (nee ImageBundle) facility. One especially great thing about it is that the compiler properly omits it for all browser permutations except for IE, so that FireFox or WebKit-based browsers never need to evaluate the above conditional expression...because the code just isn't there if it's not needed.

Maybe this is just semantics, but the others browsers wouldn't be evaluating them either, since they're comments and only IE looks for the conditionals, neh?

That's a good point. What I meant to say was that the other browsers don't have to download it.

IE 6 market share is slowly decreasing, but it's still around 10%: http://www.w3schools.com/browsers/browsers_stats.asp

How do people handle including this javascript within an IE conditional statement in rails? Is there a way to handle it with rails helpers or do people just add it to their views manually?

Why don't you just use 8-bit alpha-PNG's?

Works in all browsers, degrades gracefully on IE6 (semitransparency becomes fully transparent), smaller file sizes as a bonus.

While this is very cool, people have been using this for years.

There's always someone that's missed it. Highly recommended library for ie6 + png.

Reply on news.ycombinator.com