21 Not so stupid

I have to agree with Martijn. Flash could be a better solution here. The support for it is greater than for PNG, It support alpha transparensy etc. And, if you are going to use a text it will be more accessible i a flash movie (coded right ofcourse) than as a Image.

posted at 05:43 am on December 24, 2002 by elvelind

22 Not sure about the Flash solution

I am not sure I agree about using Flash as an alternative and I certainly disagree, as elvelind suggested, with the idea that Flash has “better support”. Flash requires a download whereas support for PNG files (however iffy) is built directly into the browser.

Having said that, I am completely in agreement that browser sniffing is a bad idea in the first place and it rather makes this article stand apart from most found on ALA.

posted at 06:29 am on December 24, 2002 by Simon

23 Browser Inadequacy

While I agree this is a hack, the major difference is this isn’t about restricting features to certain browsers. Instead, it enables a recommended web standard in a browser where it otherwise didn’t work, much like the style sheet switcher (albeit without sniffing). Personally I favour the methods that take all Javascript out of the HTML (restricted to [removed]) so the pages remain content focussed, and it’s clear that this is possible.

posted at 07:20 am on December 24, 2002 by Chris

24 Attacking the wrong problem

Michael writes:
[blockquote]This problem is especially frustrating because IE5/Mac is the only browser which natively supports PNG and behaves this way. We’ve notified Microsoft about this apparent bug and hope for it to be fixed in an upcoming release. [/blockquote]
Couple problems with this idea. First, I suspect Microsoft is working harder on bugfixes and feature enhancements for their Windows-based products than for their Mac ones. Second, if the problem with IE/Win were fixed, this whole hack becomes unnecessary.

If we’re going to petition them for bugfixes, let’s ask for the ones that will simplify our lives, rather than the ones that make our clever hacks work better.

posted at 12:02 pm on December 24, 2002 by Drew

25 Thanks & Miscellaneous Comments

Hi folks, I wanted to thank all of you for your excellent feedback. I look forward to checking out the alternate workarounds posted here to see how they compare to the method described in the article. What I’d ultimately like to do is amend the article to include these workarounds, so please continue to post your ideas.

I also wanted to address Drew’s comment: I agree it would be foolish to ask Microsoft to fix a bug only to accommodate this article’s specific workaround, and that’s not what we’ve done. What we’ve done instead is request that they fix a bug which affects PNGs in IE5/Mac, when the PNG is applied as a CSS background image. A PNG in this case appears 100% opaque, with or without this article’s workaround. You can see for yourself by pulling up the following page, which is standard CSS and HTML (no workarounds), in IE5/Mac, where the background image appears solid, and then in Opera 6+ or Netscape 6+ (Mac or PC), where it appears translucent.

http://lovitt.net/opacity/test/nojs/test.htm

Again, what we’re doing here is using the browsers’ native ability to display a PNG with alpha transparency, which IE5/Mac allegedly does, but does not do when the PNG is applied as a CSS background image.

One last point: the article’s method is, as some of you have pointed out, a hack, and an ugly one at that. While it’s clearly not appropriate for everyone all the time, it is a handy tool to have in one’s bag of tricks, for those situations where you want to try something new with your design and you can afford to let your code get a little dirty.

Michael

posted at 02:35 pm on December 24, 2002 by Michael Lovitt

26 Stay Away

I would stay away from the Microsoft PNG Filter. I used it once on a project — and the small PNG’s took up to much memory. I think the only solution is to wait till IE on windows fully supports them.

posted at 04:15 pm on December 24, 2002 by Scott

27 I'll just continue to use PNG

I don’t own software capable of producing either GIF or SWF format images, my favourite browser supports PNG well, and none of my browsers can display SWF images. I’ve been using PNG consistantly for well over a year (rarely using transparency masks), and if an old version of a browser I have nothing to do with doesn’t support a feature which isn’t very useful (and also doesn’t break anything accessibility-related when unsupported) I’m rather inclined not to care… Am I missing the point?

posted at 08:33 pm on December 24, 2002 by http://purl.info/net/tomch/

28 On Sleight

As long as the incompleteness of IE persists, the search is on for an easy, site-wide hack, or something that comes close enough. Mostly easy, since alpha, even GIF transparency, is still a luxury function, and putting a huge script on each page in a sense defeats the purpose of luxury.

So for the time being, I’m going with Youngpup’s Sleight.

A major advantage of Sleight is that it allows you to code images normally, without worrying about whether or not you put in the script backwards or upside-down. All your PNGs on all your pages will be affect by one (small!) script and be merry in their alphaic glory.

By the way, both Sleight and this article’s hack use the exact same filter by Microsoft to produce the alpha. The difference is that Sleight is an external javascript, takes up no more bytes per-page than a stylesheet link, and thus implements in a, um, flash.

-

About the memory usage – is that really such a big issue? How big is the risk of a page being so filled with massive 32-bit PNGs that computers run out of virtual memory?

posted at 01:44 pm on December 25, 2002 by Willem

29 to hell with bad browsers

you may recall, from a familiar publication, the following: “If you are deliberately deforming your markup to accommodate an increasingly small percentage of users, and if that deformation locks out other users (such as people with disabilities, or those who use Palm Pilots, Lynx, Braille readers, and other non-traditional browsing devices), you might consider upgrading your standards compliance even if the resulting sites look fairly ho-hum in old browsers. If your site is compliant and the content is accessible to all, you have probably done the right thing.” ( source: http://www.alistapart.com/stories/tohell/ )

it’s about standards, people. yes, the png format is great, and to sign a petition which encourages microsoft to support it fully is also a good thing. however, to create asinine workarounds for support in incompliant browsers doesn’t scale, doesn’t validate to documented standards, and is a step backwards.

the quoted article’s point still stands: to hell with bad browsers.

posted at 04:35 pm on December 26, 2002 by louis bennett

30 Mixed Bag

I appreciate the intention of this article, but wouldn’t it be better to explain the actual filter? I don’t really mind if I have invalid css rules. CSS was actually designed with that in mind. Agents that don’t understand a rule should just skip it.

[removed] is something I always try to avoid. Content is in some form of markup, not println/writeln statements.

Solutions such as youngpup’s sleight or the webfx thing are also well-intentioned, but I don’t loop through the document. It’s something I just avoid doing unless I can’t find another way.

This stance leads to faster page rendering. In looping through a nodelist or two, you slow down the page rendering. For large documents, it can make the difference of over a second, and yeah, I have stopwatched it.

I’d like to be able to just use the css rule, but I don’t have windows IE, so I can’t really test it out. I’d like to have some more information on just the ImageAlphaLoader, the properties and parameters, what each one does, which ones I should use to get the same effect as png img in Mac IE/Mozilla.

I thought I should clarify that although filters don’t work in mac IE, png images appear correctly.

As an alternate solution, I have decided to use png and then cut out the drop shadow and save it as a gif. I use a gif for windows IE and png for everything else (It looks super-groovy in NS4, which gives the png a white bg.)

I just used server-side split, something linke

String ext = browser.isIE() && browser.isWin() ? “.gif” : “.png”;

/img/erika/tits<ext>

posted at 08:07 pm on December 27, 2002 by Garrett