1 A journal of hacks

Calling this article a ‘real solution’ is not entirely accurate. It is a hack, not a solution.

As this hack relies on proprietary CSS and JavaScript (browser detection no less …), it requires the user to cruft their code up just to achieve a similar result which can be had using well planned gifs or jpegs. This ‘solution’, IMO, is worse than the problem (the need for alpha transparency in images).

I read a list apart regularily, yet lately it has become no more than a publishing house for web design hacks. I much prefer articles on web design methodologies.

I’m not sure what web design journals will write about once browser manufacturers properly support standards – however a list apart should start considering this, and publish articles which will outlast the need for hacks.

posted at 04:02 pm on December 22, 2002 by reggie

2 Another Javascript alpha hack

I’ve found youngpup’s sleight.js to work well for the same purpose, most of the time. While still a hack, it has the advantage of not requiring you to change any of your image tags—you need only to insert the javascript call in the head section.

http://youngpup.net/_ui_webapp/getFrames.asp?request=/snippets/sleight.xml

posted at 06:46 pm on December 22, 2002 by Peter K. Sheerin

3 forget standards

as for me, standards within the web have become a fata-morgana. they seem so close these days, yet to far to ever reach them. i, and i assume many others too, feel like being out in a desert with no water around, walking towards an oase that is not really there.
it is simply an illusion!
let’s face it: we will never get the standards we need, certainly not anytime soon. maybe i am pessimistic, but i think these hacks are the best we’ll get for now, and for the future too.
i am glad that finally png is worth considering for implementation, because it is simply better and cheaper than gif.
finally, i would like to point out what michael lewitt wrote:

<i>“To provide GIF support in their applications, software makers like Adobe and Macromedia must pay royalty fees—fees which are undoubtedly passed down to the end user in the selling cost of the software.”<i>

posted at 07:28 pm on December 22, 2002 by Mathias Langenegger

4 another js hack

Another hack for alpha transperancy, I like this solution as it loads 8 bit alpha png where supported and 32 bit png for IE5.5 and IE6.

http://dhtmlnirvana.com/pngswitch/pngswitch.html

posted at 07:30 pm on December 22, 2002 by Marie Jackson

5 css backgrounds

Too bad this can’t be used to make the CSS background-image property work with PNGs. Although… you could make a script that would find any element with a background-image property specified, and create an absolutely positioned div behind it with the image, but it wouldn’t repeat…

Oh, and I didn’t know it was pronounced “ping…” who decided that? =)

posted at 08:01 pm on December 22, 2002 by Slime

6 To big of a hack

I agree on the point that PNG is a great format (specially compared to GIF).
But I just feel that this hack is just to big. Making use of a emty Div tagg for an image sound very clumbsy and will be a big loss in sematic.
So for now GIF/PNG will have to do for me.

posted at 08:03 pm on December 22, 2002 by elvelind

7 An alternative

I’m a bit of a novice (only started learning HTML earlier this year) and I don’t know any JavaScript, so please ignore this if I am way off the mark. In the text, JavaScript is being used to sniff for IE 5.5. It struck me that it might be possible to make use of Microsoft’s proprietary “Conditional Comments” to handle that side of things, and thus simplify the browser detection. Forgive me for not working it out myself, but I am sure someone more able than I could have a go.

For a full description of “Conditional Comments”, please see this page of the MSDN site:-

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

posted at 08:07 pm on December 22, 2002 by Simon

8 Conditional Comments

The Conditional Comments that Simon suggested has the advantage of not cluttering up the DOM, but has no other advantages. It goes like this (I hope ALA’s forums escape it correctly):
<!—[if ie gte 5.5]>
<div style=“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(…)
<![endif]—>
<![if !ie]>
…
<![endif]>
Conditional Comments are only implemented for IE 5 and above, that means for browsers like IE 4, the <img> tag with a PNG image is output. You can probably use a text editor to automate placing all these code, but I think it would be easier to find alternative designs that don’t use PNG for now. For instance, I create designs that circumvent the incorrect IE box model (I am extremely careful when using width with padding and margin, etc.)

posted at 10:08 pm on December 22, 2002 by Jonathan Tan

9 Another hack if you're interested

Here’s another hack… it’s been working for me nicely, though it causes my CSS to stop validating. It has the advantage of working pretty much automatically.

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

posted at 10:56 pm on December 22, 2002 by Dalan Galma

10 an example

You don’t need the extra div in the article. That was just the MS example on their site.

Here’s an example with conditional comments. If you don’t mind sticking ie5 and nn4 with png, you can do this:

images/bird.png

<!—[if gte IE 5.5000]>
[removed]
window.attachEvent(“onload”, pngFix);
function pngFix() { for (i=document.images.length-1;i>=0;i—){ x=document.images[i]; if(x.className==‘pngAlpha’) { x.style.filter=“progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”x.src“’)” x.src=“images/spacer.gif”; } }
}
[removed]
<![endif]—>

*******
Or you can put it in a separate script and use js for the browser check. You can also put it at the end of the page and get rid of the onload event.

You could also swap the png for gifs for ie5 and others quite easily.

You could also start with gifs and swap to png of the same name for good browsers and js.

posted at 11:17 pm on December 22, 2002 by stylo~