A List Apart: Comments on: Cross-Browser Variable Opacity with PNG: A Real Solution

Posted by: reggie

2012-01-31T13:00:49+00:00

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 by: Peter K. Sheerin

2012-01-31T13:00:49+00:00

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 by: Mathias Langenegger

2012-01-31T13:00:49+00:00

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: "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."

Posted by: Marie Jackson

2012-01-31T13:00:49+00:00
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 by: Slime

2012-01-31T13:00:49+00:00
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 by: elvelind

2012-01-31T13:00:49+00:00
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 by: Simon

2012-01-31T13:00:49+00:00
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 by: Jonathan Tan

2012-01-31T13:00:49+00:00
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): ... Conditional Comments are only implemented for IE 5 and above, that means for browsers like IE 4, the 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 by: Dalan Galma

2012-01-31T13:00:49+00:00
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 by: stylo~

2012-01-31T13:00:49+00:00
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 ******* 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 by: Richard Rutter

2012-01-31T13:00:49+00:00
In the article, Michael writes "In IE5.5+/Win, the transparent area of your PNG will display at 100% opacity—that is, it won’t be transparent at all." That's not strictly true. In my experience the transparent area displays 100% transparent. For example, this PNG* has a drop shadow using variable transparency: [img]http://www.clagnut.com/images/topstylecolourpicker_full.png[/img] When viewed with IE5.5+/Win the shadow is not displayed at all, however the article implies it would be displayed fully opaque. In this case, full transparency is certainly preferable to full opacity. * As used in an article at http://www.clagnut.com/blog/80/ I should point out that the PNG was coded using an IMG tag rather than as a CSS background.

Posted by: Richard Rutter

2012-01-31T13:00:49+00:00
On closer inspection the methods described in the article still don't enable the afore-mentioned drop shadow in IE5.5+/Win (it's fine in Mozilla). Note that I added the drop shadow using a Fireworks MX Live Effect (also possible with Photoshop Layer Effects). I don't know what difference this would/should make though...

Posted by:

2012-01-31T13:00:49+00:00
Thanks but no thanks. I'll be damned if I'm going to put IE only code into my XHTML 1.1/CSS 2 pages. For a while now I've been using PNGs as a replacement for gifs, but only 8-bit PNGs, not 32-bit. They work in 5th generation browsers and up, that's what counts. Besides, 32-bit PNGs are a hell of a lot larger than their 8-bit brothers, so unless there's a justifies reason to use 8-bit alpha then I'll avoid it. Not everyone has broadband to download these bloated images quickly, me for example.

Posted by: Nate

2012-01-31T13:00:49+00:00
While I appreciate the desire for alpha transparency, and I love reading a well written article such as this, I must side with the nay-sayers this time. If we still have to make all the gifs, and sniff-and-serve, it's more work, more time, more money, and clients don't like that. It is super cool though, very appropriate for personal portfolio sites and the like, and I cannot wait until we can start really using transparency in the design process. I don't get why ie5.2 on mac os.ten can see a png used in a page, but not directly.

Posted by:

2012-01-31T13:00:49+00:00
Mathias Langenegger said he thinks that standards are an illusion. We may never have a world with universal W3C standards but that doesn't mean we don't have a de facto standard of some sort. It's simply too expensive to code and maintain code for different browsers. Since large corporations typically only support one browser, anyone wanting to sell Web-based systems to them have to support that browser, or loose the sale. Since most companies support IE on PCs, that's the standard that is used for development. As more products emerge that require IE, more companies deploy it, which means more companies code for IE, etc, etc.

Posted by: Chris

2012-01-31T13:00:49+00:00
How about a single Javascript function that adds the filter to all select images? This one is invoked like so and affects all . Replace "document.all" with the IE detector of your choice. Still doesn't address 8-bit RGBA images or CSS backgrounds, but it's a lot cleaner within the HTML... Thanks Michael for the article :-) -- function pngfix() { if (document.all) { var i, a, f; for(i=0; (a = document.getElementsByTagName("img")[i]); i++) { if (a.className=="pnga") { f = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+a.src+"')"; a.src = "/images/blank.png"; // Blank image required a.style.filter = f; } } } }

Posted by: Chris

2012-01-31T13:00:49+00:00
Erk, should point out that images can be included as normal: [img]my-alpha.png width="200" height="100" alt="a fine alpha graphic" class="pnga" [/img]

Posted by:

2012-01-31T13:00:49+00:00
I didn't say it... http://webstandards.org/buzz/archive/2002_12.html#a000123

Posted by:

2012-01-31T13:00:49+00:00
How ironic that the headline image for this article is a GIF and not a PNG. =P

Posted by: Martijn ten Napel

2012-01-31T13:00:49+00:00
It just occured to me: why would you bother to use these kinds of solutions/hacks/maintenance nightmares to serve up the right PNG images to the right browser to allow it to move from left to right over a photographic background, when you could use Flash for this? I warned you, it is a stupid remark, but apart from semantics, DOM's etc, Flash could be a better everyday life solution because it is almost omnipresent on different platforms - and according to the latest stories I read you can even make it accessible to everyone these days. And I believe that all the effects illustrated in the examples in the article are meant for beautification, for 'coolness', not for accessibility or usability purposes. Which doesn't make it a bad thing though, (visual) seduction of the user is as important as functionality. (ok - enough disclaimers, now shoot ;-) )

Posted by: elvelind

2012-01-31T13:00:49+00:00
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 by: Simon

2012-01-31T13:00:49+00:00
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 by: Chris

2012-01-31T13:00:49+00:00
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 by: Drew

2012-01-31T13:00:49+00:00
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 by: Michael Lovitt

2012-01-31T13:00:49+00:00
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 by: Scott

2012-01-31T13:00:49+00:00
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 by: http://purl.info/net/tomch/

2012-01-31T13:00:49+00:00
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 by: Willem

2012-01-31T13:00:49+00:00
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 by: louis bennett

2012-01-31T13:00:49+00:00
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 by: Garrett

2012-01-31T13:00:49+00:00
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 by: Zook

2012-01-31T13:00:49+00:00
The previous post makes a good point, but a server-side split makes more problems than it fixes. For example, if I save a document in IE Mac that uses the previous post's technique and then open it in IE Win, it'll use PNG images which is not the desired effect.

Posted by: michael zeltner

2012-01-31T13:00:49+00:00
AFAIK you dont need any js to view transparent pngs correctly... apples quicktime can render it - just go to system preferences -> qucktime -> browser plugin -> mime preferences -> png images then just include a js for reminding ppl to install quicktime and view pngs with it... michael (please excuse my ****** english ... :))

Posted by: Martijn Kint

2012-01-31T13:00:49+00:00
And what about png's that combine 100% opaque parts with 60% opaque parts and even 0% opaque parts ? This hack works fine with the given examples but will never be able to grasp the full potential of the PNG format and therefore (no matter how well the article is written) will not be very usable. Take this link for example: http://www.ncf.ca/~bh447/pngdemo/ (needs gecko) This is never going to work in IE (and i'm not talking about the javascript ;)

Posted by: Tone

2012-01-31T13:00:49+00:00
That's WUTANG. CLANG-A-LANG. I don't intend to use this hack, I shouldn't have to. If PNG is going to be made a standard, then Win32/IE should clanging well support it. It's pathetic. Alpha-transparent images isn't really so much to ask for is it? I never use JavaScript for anything essential, my work has to be accesible to non-javascript browsers. I come here mainly for XHTML/CSS advice!

Posted by: michael

2012-01-31T13:00:49+00:00
sorry wrong info - pngs dont work with the quicktime plugin

Posted by: Brainjar fan

2012-01-31T13:00:49+00:00
This is easily one of the dumbest articles I've read on here in a long time. Is Zeldman abandoning his love of non-hacked standards compliance in favor of just having something to toss up on ALA once in a while?

Posted by: Alun David Bestor

2012-01-31T13:00:49+00:00
Re: Louis Bennett's comment...I don't consider a 90+% market share an "increasingly small percentage", and that, I'm afraid, is the problem here. If Opera's PNG support was naff there wouldn't be this article and we wouldn't be here lamenting it; people would use PNGs and Opera be damned. But when the most widely-used browser by an incredible margin doesn't support a feature, you can't professionally afford to take the moral high ground and screw those visitors. I don't like avoiding or working around problems with *any* browser, but there are professional realities. Coding your site with translucent PNGs and not implementing any workaround for IE/Win isn't going to make Microsoft sit up and take notice, it's only going to give you a site that doesn't look right for 90% of your potential market. Yes, that sucks, but most of us have to eat. Ignoring Netscape 4 and the version 3s is an satisfying luxury we can apparently now afford; ignoring IE6 isn't.

Posted by: Clinton

2012-01-31T13:00:49+00:00
...or at least a shorter hack. I can't believe no one here has mentioned this. myalternate.gif Then add a class or style snippet to the object tag with that Alphaloader business so that all modern versions of IE see the same variably opaque result as browsers that support the feature natively. If png isn't well supported by a browser, the gif is displayed instead. No muss, no fuss, no sniffing.

Posted by: Dennis Cheung

2012-01-31T13:00:49+00:00
My HTC make IE look like it support the alpha channel it self http://hkdennis2k.virtualave.net/htc/png.html ( It written in chinese BIG5 code, if you don't know it, just skip it.) Just one easy code to use the effect, and can apply all the images at once One property to enable the support Keep the context menu of the image when right click on it Do not need any knowage of javascript/vbscript

Posted by: kiddailey

2012-01-31T13:00:49+00:00
Personally, I avoid as much as possible designing sites that aren't liquid, and in that case, of the biggest reasons to use PNGs is to facilitate the building of complex, graphically rich *liquid* page designs. PNGs [theoretically] give you a MUCH wider range of "brushes" to work with as a designer of liquid pages, allowing you to do really interesting things like tints that move/expand with the browser window or overlapping graphic elements that move while always seamlessly gradiating into the the page's background, among many other things.

Posted by: Michael Z.

2012-01-31T13:00:49+00:00
What about using http content negotiation, and letting the browser decide whether it can properly display a .png file? I don't have a Windows machine to test this with. Use mypic in your web page, turn on Apache mod_negotiation, and let the browser choose whether to load mypic.png or mypic.gif. The $64 question is: will IE5.5+/Win choose the png or the gif? What do you see when you go to ? Info about content negotiation for Apache is at .

Posted by: Adam

2012-01-31T13:00:49+00:00
So how will this help me? I want to acieve this effect using PNGs: I have a page with a (fairly) complex pixel pattern as the main background. Then, centered in the middle of the page is a 600 pixel colored table. I either side of the table, I want to place, what will essentially be a gradient, image that will act as a shadow to give the centered table depth. Basically the image is 8 pixels wide, with varrying lines, each at descending opacities. This should give the effect of a shadow, but I can't do this in a gif because you can only pick one color to be transparent. Drop me a line.

Posted by: Alan

2012-01-31T13:00:49+00:00
I tried the content negotiation thing, which sounds very useful, but I got not-such-good results: Win2k Mozilla 1.0: PNG Win2k Opera 6.0: GIF Win2k IE 5.5: broken image Win95 IE 5.0: broken image Could it be that Microsoft doesn't cooperate in the negotiation?

Posted by: Chris

2012-01-31T13:00:49+00:00
IE5/Mac doesn't show aplha transparency as a background in a div? No entirely true. Maybe it's just on my computer, but "no-repeat" in your background makes alpha work just fine. --chris

Posted by: teradome

2012-01-31T13:00:49+00:00
Nate: the IE/OS X issue is with the QuickTime plugin. More on that @ Martijn: Flash only has alpha transparencies to HTML elements through the ActiveX component. Very likely, the same elements that this article uses through IE style sheet extensions are the same components the ActiveX layer uses to render its alpha channels. So no, Flash isn't the solution here. IMHO, this is the place for a PNG ActiveX component with an image tag inside of it... if you need PNGs that badly. Not that I know of a good one off-hand.

Posted by: Chris

2012-01-31T13:00:49+00:00
Here's an example that this 'hack' (I'd call it a patch) facilitates: http://www.webreference.com/authoring/style/sheets/headlines/7.html Looking back, the code I posted on the first 'discuss' page ('What if?')works in a similar way to 'sleight', but I stand by my solution as it discriminates by class instead of extension, thereby limiting the patch to one or two images per page. I have revised it to include 'sleight's' attachEvent so only the [removed] tag and class names are required in the HTML: http://www.ross-gill.com/scripts/pngfix.js

Posted by: louis bennett

2012-01-31T13:00:49+00:00
(in reply to: alun david bestor) first off, i acknowledge that i mis-read the article as saying that the hack was for msie/win/5.5 *only*, as opposed to the stated msie/win/5.5+. either way, there are still two issues: [1] the hack offers no semantic value. [2] as soon as the msie windows teams fixes this bug, employing this hack will be about as hip as utlizing and . [3] (in reply to: alun david bestor) first off, i acknowledge that i mis-read the article as saying that the hack was for msie/win/5.5 *only*, as opposed to the stated msie/win/5.5+. either way, there are still two issues: [1] the hack offers no semantic value. [2] as soon as the msie windows teams fixes this bug, employing this hack will be about as hip as utlizing and . [3] in my opinion, creating a double-standard for utilizing hacks (is it compliant? no... well is it msie?) just doesn't scale. the issue at hand here is that there isn't adequate browser support to utilize png - for the same reasons people don't utilize position: fixed, css attribute or descendent selectors, and any other under-supported technologies. sure, this hack may float your boat in the short term, but it just doesn't scale in the long term.

Posted by: louis bennett

2012-01-31T13:00:49+00:00
[1] three issues. [2] bizarre content duplication [3] sorry for the w.o.b.

Posted by: Chris

2012-01-31T13:00:49+00:00
In reply to Louis, [1] Some posts presented in this discussion do offer alpha PNG support with nothing more than a [removed] include. I would consider this another content-agnostic rendering instruction, though not quite as 'pure' as CSS. [2] and as you suggest have little semantic value and as such were never recommended standards. But PNG is recommended and variable transparency/opacity are a fairly useful facet of the PNG spec (e.g. if you are using alternate styles). As IE, and therefore the majority of browsers in use, don't support PNGs out the box (as has been the case for more time than it would take to implement*), this is the only way to facilitate the use of PNGs while retaining semantic HTML. [3] C'mon, Javascript is a hack unto itself. It may or may not cause problems in future browsers, but if and when MS (or anyone else) monopolise with a PNG compliant browser, you can simply remove the [removed] tag from your template and the rest of the document should still work just fine. Or if that's too much work, just erase the contents of your single JS file. *I was really hoping this would be fixed in v5.0, then v5.5, then v6.0. What reason is there for this to be overlooked?

Posted by: louis bennett

2012-01-31T13:00:49+00:00
re: chris comments #2 & #3: i'm not saying that utilizing png is a bad thing - i'm saying that utilizing this work-around is a bad thing. for those who don't utilize templates, it would be impractical to go change every page they ever made with it, assuming these incompliant browsers are gone (that'd be several years' time, given the current rate of change). again, i think the png format is great. all i'm saying is that this hack is anything but elegant, and think utilizing it is a step backwards in terms of web standards.

Posted by: Alun David Bestor

2012-01-31T13:00:49+00:00
I agree with Louis that temporary hacks that then need to be removed/tweaked when browsers update are impractical and contrary to the spirit of our enlightened modern ethos. Unfortunately, if we don't use a temporary hack to make use of translucent PNGs now, their implementation might be delayed even longer due to continuing to be considered a marginal technology. As it stands, even if IE7 comes out tomorrow with full translucent PNG support we'll still either need to use a hack or wait at least a full 2 years for IE 5, 5.5 and 6 to dwindle enough that their quirks can be disregarded. As many people have said, translucent PNGs open up completely new avenues of design; do we really want to be stuck using gifs in 2005? To wax editorial again, I am amused to note that today's Zeldman update states "Instead of jumping through hoops to make a site look the same in Netscape 4 as it does in Mozilla..." ...we're jumping through hoops to make a site look the same in IE6 instead. Color me cynical, but as far as I can tell the only thing that's changed since 1998 are the version numbers we design for and the acronyms we design with.

Posted by: Andrew B

2012-01-31T13:00:49+00:00
I really have to say it - when you get to the stage that you're using client side scripting just to display an image, then something wrong... I will only be using PNGs without transparancy for now as they work reasonably. But I'm not messing around with JavaScript just to do something fancy. Content, content, content is more important...

Posted by: Duncan Kimpton

2012-01-31T13:00:49+00:00
What I wan't to pose is this: if we must go to the level of browser sniffing could it not (indeed should it not) be done server side?? Surely it is wastefull and a good way of breaking future compatibility to inlcude such scripts in user facing code? I would sugest using something like JSP / PHP etc and simply creating an 'image' object that you embed in your code everywhere you use an image - this would then mean that no matter how many pages you created there was only one point of changes when something turned up broken... Equally I would like to point out that Flash is an even worse solution - at least this one should degrade to readable content (assuming graphics are not THE content).

Posted by: Duncan Kimpton

2012-01-31T13:00:49+00:00
Personally I say just let IE5 break - until users start bitching to MS then IE won't get fixed. This may be a hard pill to swallow but it's definately for the best... Of course I also don't believe in textual graphics since they arn't very accesability friendly so as long as we just keep on using graphics as backgrouns/content images letting IE break isn't such a bad thing...

Posted by: Luiz Eduardo

2012-01-31T13:00:49+00:00
Since it seems that PNG transparency can´t be used in CSS backgrounds and we´re already looking at non-standart solutions maybe a good option should make be the microsoft´s Alpha filter (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alpha.asp) as an alternative to png in this particular case or even to be used combined with it.

Posted by: Jeremy McPeak

2012-01-31T13:00:49+00:00
I have been using a method similar to this for quite some time now. However, it does not always work. Case in point: http://www.wdonline.com/talman/ If you go to the menu and go to File->New->New User you'll see that that PNG is not displaying correctly (I'm using WinXP Pro SP1 & IE 6SP1). It seems, however, that this problem is limited to this particular widget. I have used the exact same code (albeit different sizes) and it works perfectly. Go figure.

Posted by: Kris

2012-01-31T13:00:49+00:00
> I have been using a method similar to this for quite some time now. However, it does not always work. Case in point: http://www.wdonline.com/talman/ It sure doesn't. It blocks my MSI5.1/Mac from access. Believe me, MacIE5 has far better standards support than the first two browsers you offer in the upgrade list (MSIE5.5 and 6). Poor UA-detection scripts.

Posted by: Jeremy McPeak

2012-01-31T13:00:49+00:00
No, not poor UA detection scripts, just my choice. I have no Mac at my disposal; therefore, I cannot do the tests that I need to for any Mac based platform. Perhaps if Microsoft consolidated the code for both platforms (which will probably never happen) I would make the changes required to include Mac based platforms. So until I get a Mac of my own, it will continue to only be a Windows MSIE 5.5+ / Any OS Mozilla based site.

Posted by: AllSpiritsEve

2012-01-31T13:00:49+00:00
I tried to make a png to go over an image on my site. It was large text, around 75pt, and I had it set to 45% opacity so the background would show through. The problem is, the image is about 30kb. What can I do to lower the size? Should I just use a jpg with the image already on there from photoshop? Is it really worth the size? -Spirit

Posted by: Dan Kolis

2012-01-31T13:00:49+00:00
Hi, We use PNGs as an archival format for all photos now. With care we get very good results, on the WWW and paper, etc. I just wanted to remind everyone how bad Microsoft programs are compared to pretty well everything else. What garbage. Opera is avalable free and is at: www.opera.com convert youself, convert the ones you love. Even convert your enimies. No one should have to suffer that much! Oh. Opera does PNG's perfectly. All the WWW tests for it, too. Regs, Dan

Posted by: Jeremy McPeak

2012-01-31T13:00:49+00:00
No thanks. I prefer a browser that offers more than CSS support. But thanks for the offer

Posted by: eatmo

2012-01-31T13:00:49+00:00
The thing that gets me, is if microsoft have written that filter to make alpha in PNGs display properly, why the hell can't they implement it into IE without a need for this hack?! They've got the code to do it, surely it's just another one or two lines of code in IE to tell it to use that filter as default display for alpha pngs?!

Posted by: Daniel

2012-01-31T13:00:49+00:00
AAAHHHH!! Bad IE. Right, png is cool so i wanted to use it in my site redesign. problem 1, the whole alpha thang. So i'm only using solid pngs. problem 2. IE renders the colours wrong!!!!!! see: http://www.srcf.ucam.org/~dk282/new_look/test.html the background is #000066 and acording to photoshop the background of the png buttons (screen capture from ie, fine in moz) are #00005E WHY? this is realy silly. Please some one help

Posted by: Jeremy McPeak

2012-01-31T13:00:49+00:00
eatmo - I've thought the exact same thing. I find it silly that MS hasn't added that vital bit of code (it only makes sense to add it). The code's there - they oughta put it in. Daniel - Unfortunately, there's not much to do about that. I ran up against this problem about a year ago when I first started using PNGs. The only solution is to change the colors of the page - unless you feel like searching for the right color for the pic.

Posted by: Alun David Bestor

2012-01-31T13:00:49+00:00
Daniel: I've encountered this problem viewing PNGs saved out of Photoshop in IE, but I've also seen PNGs displayed with perfect color on IE. The problem arises because Photoshop likes to include extra gamma information in the PNGs it saves, in order that other people's browsers can compensate for their own gamma and display your image just the way you intended (ie, just the way it looks on your monitor). For proper color-matching this is often vitally important, since for instance Macs used to have a default gamma much lower than PCs. However, IE either doesn't recognise this gamma information or else applies it all too well - so your images appear darker and muddier. I can't seem to find a way to get Photoshop to leave the gamma information out; Not even disabling all color-correction in Photoshop seems to do the trick (in PS7, at least). Anybody have a solution?

Posted by: Greg Roelofs

2012-01-31T13:00:49+00:00
Richard Rutter and Michael Lovitt have discovered opposite sides of the MSIE/Win bug: 32-bit RGBA PNGs show as completely opaque (Michael), while 8-bit palette PNGs show as completely transparent for any pixel (i.e., palette index) that's not 100% opaque (Richard). Convert that colo[u]rpicker image to 32-bit RGBA and watch the drop-shadow obliterate all in its path. Many more gory details can be found here: http://www.libpng.org/pub/png/pngapbr.html#msie-win-unix As for Michael's CSS background image, that may actually be another, recently discovered bug related to tiling of small images. There's a performance hit if small images aren't tiled into larger ones before rendering, and there's apparently an even larger performance hit if those small images are tiled with a full alpha channel as opposed to binary transparency. I thought the magic threshold was 64 pixels in each direction, but perhaps the test is simply against the total number of pixels in the image--with 64x64 = 4096 being the cutoff, and Michael's background image having only 1000 pixels. Or maybe 64 in _either_ direction is the threshold. In any case, it might be worth retesting with a "back.png" of 80x80 pixels, for example. Greg

Posted by: Greg Roelofs

2012-01-31T13:00:49+00:00
Alun and Daniel have discovered another of the little gotchas listed at the URL in my previous post, namely that MSIE gamma-corrects PNGs but does _not_ gamma-correct HTML and CSS colors. (The latter is required by the spec; for HTML it is merely recommended or "strongly encouraged" or something.) Note that this problem will affect Mozilla, too, but only on non-PC (non-sRGB) systems such as Macs--see Bugzilla bug #53597, I think. pngcrush can be used as a workaround (and should be for anyone using Photoshop to create PNGs, regardless of gamma problems--most versions do really lousy PNG compression). Something like "pngcrush -rem gAMA -d outputdir *.png" will recompress a pile of PNGs, remove their gamma chunks, and dump them into outputdir (with the same names). Normally removing the gamma information is a bad idea, but in this case (MSIE gamma bugs, Photoshop 4.x and 5.x gamma bugs), unfortunately, it's the best workaround. Greg

Posted by: Alun David Bestor

2012-01-31T13:00:49+00:00
Heh...I come back from 2 hours of gamma research to find Greg has beat me to the post with the pngcrush solution :) I still wish there was some way to tell Photoshop to give it a rest, though.

Posted by:

2012-01-31T13:00:49+00:00
Ok, so it is hacky... our site recently went through redesign and of course the designers used some semi-opacity in their photoshop comps, and we needed a solution just like this. Instead we went the more basic route, so it shows semi-opaque in some configurations, and not in others. RE: Flash: I suggested that too, but we don't even want to lose the potential 3% of the world without the current flash plug-in. Of course in flash is where the designers see the semi-opacity on the web anyway....

Posted by: Sparky

2012-01-31T13:00:49+00:00
God, I really hate this forum format. Does anyone else hate it as much as I do?

Posted by: Kevin

2012-01-31T13:00:49+00:00
Hey, I tested this out in Konquror and it didn't work at all. But konq can display png alpha correctly. :o( Since The new mac browser Safari is based on that code, then it may die in Safari too, which I suspect will be a bigger problem in future. - Kevin

Posted by: Martijn ten Napel

2012-01-31T13:00:49+00:00
Luckily I'm not responsible for the maintenance of this website, but if I was I would utter something very politically incorrect and never bother to publish another article. People, if you don't like the solution of the article for whatever reason, just post why you think the solution is flawed, but observe some basic human politness and decency in your language please. Would you use the same language if you would have a face to face discussion with the publishers?

Posted by: Sparky

2012-01-31T13:00:49+00:00
Yes, I would.

Posted by: Garrett

2012-01-31T13:00:49+00:00
[blockquote] "utilizing this work-around is a bad thing. for those who don't utilize templates, it would be impractical to go change every page they ever made with it" [/blockquote] Proper design can help avoid this problem. <% if(needsPngFix) { %> [removed] . . . You have to sniff the ua string to detect windows IE 5.5 - 6. needsPngFix = windows IE 5.5 - 6

Posted by: Garrett

2012-01-31T13:00:49+00:00
Oh well, you get the point.

Posted by: Reed

2012-01-31T13:00:49+00:00
Actually, the biggest flaw from my perspective is not a lack of .png browser support (because this hack, among others, can solve that for IE5.5+), but a lack of PRINTABLE BROWSER SUPPORT. Want to print .png images in IE? Good luck. Want to print .png images in Phoenix? Good luck. IE will simply refuse to print the images at all, while Phoenix (and, I assume, Mozilla) will inappropriately mess up the opacity to make it all black. Any solutions to this conundrum?

Posted by: Brainjar fan

2012-01-31T13:00:49+00:00
I thought this was designing for the screen, and not for print. Wouldn't an alternate style sheet that swaps comprable gif images for their on-screen png counterparts solve your printing "issue"?

Posted by: Alun David Bestor

2012-01-31T13:00:49+00:00
...if there was a way of changing the source of an element by using a css property, then yes. There are so many circumstances in which this would come in useful, but as yet there is no css property that will do this. So you have two options: 1. Use block-level elements like
instead of s for all your images, and assign them background-image properties. For a proper 'content' image this is less appropriate than an tag, and causes problems with accessibility (you can have alt-text within the element and hide it, but how can you unhide it if the user has images turned off?) 2. Include two tags in your document, one for each graphical type, and hide one or the other depending on the browser or medium. Highly undesirable, as you end up cluttering the document with unused images that will show up for browsers with no stylesheet support or stylesheets turned off.

Posted by: نتنتانت

2012-01-31T13:00:49+00:00
نتانتانتاتتتتتتتتتتتتتت

Posted by: Brainjar fan

2012-01-31T13:00:49+00:00
Actually, your second suggestion is exactly what I had in mind. After all, wouldn't that be using standards-compliant CSS to accomplish the goal? Those browsers with no stylesheet support don't need my support. Those users who have chosen to disable style sheets, have chosen to view the web as they please, I do not owe them any further customizations. We're talking about catering and pandering here. We're catering to our users when we make content king, and use CSS to separate our content from our structure. We're pandering if we try to satisfy everyone and every browser, or just say "the hell with it" and design for the lowest-common denominator. So, use PNG or don't use it. Design for screen and print separately. If you can't do it without a hack, then you don't need to do it; you've started to confuse your structure and content by that point.

Posted by: Sarc is back, dumber than ever.

2012-01-31T13:00:49+00:00
If your audience use bad browser, educate them and convince them to swap. If your audience isn't dumb, it will. If you still wanna support bad browsers, give them what they want, and that is: binary (on/off) pixel transparency. If you can't do it because you're as dumb as most web designers, it's not you're fault. If you wanna learn. Learn HTTP first: http://www.w3.org/Protocols/ Then, learn how your HTTP server works. We know you know you know you can.

Posted by: JavaFueled

2012-01-31T13:00:49+00:00
...while the solution/hack/trick, whatever one may wish to call it, is legitimate by its merits, I believe it earns a two thumb response: Thumb One (down): Cited in the first post, and to use a term so eloquently used by Neal Stephenson, this solution is "crufty." By orders of magnitude. It is also very much a throw back to the proliferation of JavaScript tricks that flooded the web in the late 90s in this readers opinion. Has anyone employed this solution in a production site as a "technology demo"? My guess is that the page weight in a table/image heavy production site might triple. Egads! That is a lot of cruft. Rivaling even Microsoft engineers and Windows NT 5.1! (Yeah that's a stab at the pure marketing wool surrounding XP). Thumb Two (up): Merits of the solution however really surface when the idea is moved to the server side. Javascript is just not a reliable deployment methodology for this solution. Besides all the normal arguments, JavaScript may be turned off, JavaScript has accessibility concerns..., deploying this solution on the server is a much better attack. The client receives pure X/HTML and the necessity of depending on the client for JavaScript support is removed. Supporting this thought of server side deployment are the articles own cited requirements of *.gif and *.png graphics. If you're going labor to produce the graphics, guarantee their proper use by building the page before sending it to the client. Page weight is much lighter to boot. Yet, in balance, deployment of the solution on the server complicates the development of the site... PHP v. JSP v. ASP v. CF ... but if your client is bold enough to listen to and accept/pay for the arguments of providing this solution, the client is bold enough to build a truly robust and scalable website. So is this thumb "up" or "sideways"? I'm an optimist... so up. Take the idea and deploy it on the server vs. depending on the client. My 2 pennies.

Posted by: eraser

2012-01-31T13:00:49+00:00
Flash Vs PNG. The support is nearly the same. If a user is using IE 5 they will need to download a new plugin, If i remember right IE 4 doesnt fully support flash 6/MX. So i believe it not to be that much of an advantage. Although PNG can be imported to flash and then compressed a bit more... But then flash's transparency only wirks in the IE version of the Flash plugin -Marc

Posted by: Nate Baxley

2012-01-31T13:00:49+00:00
This is certainly offtopic for this discussion, but I wanted to get feedback from people here. Where do you go for online discussion, question/answer, debate of web programming and design topics? There used to be a set of general forums here, but those seem to be long gone. I'm leaving a good sized development company and going to a two man operation so I won't have the same resources to ask questions (and give answers). Where do you go to get help and to satisfy the urge to answer other's questions? Nate Baxley

Posted by: Boris Anthony

2012-01-31T13:00:49+00:00
As echoed in other posts here, and also relevant to CSS (as well as all webstandards), I must say this: we, as the web dev community, must stop allowing ourselves to be bullied about by lazy browser makers. Every hack we develop and propagate allows the non-compliant browsers to remain and continue to be complacent about releasing on-spec and non-buggy software. While certainly unnaceptable for bigger commercial projects, I truly believe it is time for us, as a group, to develop sites that are standards compliant without hacks. It is absolutely possible to create great designs that are 100% on-spec. Does this mean some browsers are left out? Yes. But we've done that before (buttons that say"designed to be viewed with"), and Zeldman has long been trumpeting the approach (detect bad browser, redirect to polite and clear message as to why). Case in point: IE's actual worsening of PNG support. IE5.0 did alpha channels perfectly! Why kill it? And why should we have to hack for something that should be 100% supported by now? Both PNG and CSS1 have been around since circa 1997... and we still are hacking! Why? Becasue we are still hacking. Let us stop hacking, or else we will forever have to. If enough sites use alpha-transparent PNGs and valid CSS which doesn't render properly in IE6, and we state our case clearly enough, often enough and to the right people... what do you think could possibly happen? Something as small as a 5% shift in browser dominance back to Mozilla and I guaratee you Microsoft will take notice... Just a thought.

Posted by: grebmil

2012-01-31T13:00:49+00:00
I am amused at all this bickering. Half of you seem to think that using the hack will encourage better implementation of png standards because your using png, while the other half seem to think that using hacks discourages better implementation because the browser developers might conclude that we don't need better implementation if we can use hacks. AHHHHHH! My head is spinning. (Ok, so I simplified your differing arguments but the basic concept is there) The fact is, both arguments are correct to some degree or another. So that is not really the issue. What it comes down to is what your client wants - a really cool looking site or a widely accessable site. And if they want both, they'll have to pay up. Even if the client is willing to pay up, I will have to agree that many of the so called solutions suggested here result in some ugly sorce code. That it why I agree with the few who have suggested a server side solution. Your client has already agreed to pay up, so why not? And the visitors are non the wiser. I would be inclined to think that as standards improve/change (who said all changes are improvements?) it would be easier to modify a server side solution than many of the workarounds mentioned here. For those who are not interested in reaching everone, that's fine. Use whatever you feel like and ignore the rest. You have that right. Just don't expect everone else to follow you. Why should we? Your not. The point is, don't degrade others just because you don't like their solution. They may not like yours either. The differences in browsers is evidence of that. I guess what I'm trying to say is: just don't critize others. Offer your suggestions and why you use/like them. When eveyone does the same, this forum will offer a wealth of suggestions that you can weed through to find the solution that works for you. The bickering just makes it that much harder for those that are still unsure of where the stand. Let them form an opinion based upon their experiences, not your venting. Ok I'm going to stop now, before i negate my argument by failing to follow my own advise (hope it's not to late). Thanks for listening. Again, my suggestion is server side code that serves up clean X/HTML that works in that particular instance. If the client is not willing to pay for such a solution, then they get only one of two options: pretty pages or accessible pages. Plain and simple. My 2 cents (ok, maybe 4).

Posted by: SamHS

2012-01-31T13:00:49+00:00
Surely everyone's missing a trick here - we've got onto just talking about generation 5+ browsers - in fact, how to enable - variable transparent pngs. Given that every other browser in the world will ignore the IE only filter: attribute to a class style, why can't you just use pngs, and apply the transparent style to every class defined - eg: aphoto.jpg apng.png ... etc etc Now - in every browser other than IE the filter:.... in the stylesheet will be ignored, but that's okay because gen5+ browsers other than IE will support the variable transparency. And in IE where this isn't supported, the filer: will be picked up and give all images with class="apng" a level of transparency. That leaves only the older browsers that don't actually support png at all to deal with - and a simple javascript function to go through each img in the DOM and replace it with a .gif (same name, different extention) is a nice easy "fix" to implement. Does that make sense, or am I talking c*** again? ;o) Sam

Posted by: Alun David Bestor

2012-01-31T13:00:49+00:00
...not quite, unfortunately. There's two problems: 1) The source of the png has to be explicitly specified in the filter, so you'd need unique CSS rules for each png you use, and 2) the filter is applied 'behind' the image element (kind of like a background-image), so the original unfiltered PNG will still be drawn over the top in all its untransparent grey-matted glory.

Posted by: SamHS

2012-01-31T13:00:49+00:00
Yeah, I realised that just after posting, but I guess you could use the alpha filter to give a pseudo effect in IE - okay, it won't be great, but it's one option..... :o) Sam

Posted by: Brainjar fan

2012-01-31T13:00:49+00:00
It's a poor option. Your only real options are as follows: Use gifs and get over it. Use pngs and tell your users to get over it. Otherwise, you are tying yourself in knots over a graphic problem that really isn't a problem at all. It's an possible choice with limitations. Accept the limitations, or choose something else. This isn't really that complicated.

Posted by: Mr. Brownstone

2012-01-31T13:00:49+00:00
Why not just use youngpups Sleight, eh? http://www.youngpup.net/?request=/snippets/sleight.xml

Posted by: Bart Libert

2012-01-31T13:00:49+00:00
Now I got a little question about the png itself. Is there anything special about it. Because something really strange is happening when I try to use this workaround on my site. When using the png provided with this article, there's no problem, everything works (in both IE and Mozilla). Now when I use my own png, made in Photoshop, suddenly, every hyperlink situated on that background stops to work. What I mean is that you can't even click on it, it just looks like plain text. This only occurs in IE, not in Mozilla. Does it have something to do with the % of transparency (in my file png it's 56%). This is really odd, and I don't understand it.

Posted by: Mike H

2012-01-31T13:00:49+00:00
I have been using Fireworks MX to render all my GIF files and I use a lot of transparent files. The only way to make them render correctly, in regards to the original PNG, is to use Alpha transperancy in the Export Preview Document Window. If I use anything else it doesn't render transperancy correctly. Am I missing something when you guys say GIF doesn't support Alpha Transperancy. I know that PNG is the Master Document in Fireworks but It does give me the option of using Alpha in GIF files. And this works the same as if I had exported everything in PNG format for the most part. Check out this site... http://www.hooflungpoo.us as it uses ample transperancies with alpha option in Fireworks. Is what I am doing in Fireworks anyway related to what is being discussed here? Or is it just a misuse of terminology by the application? thanks, Mike

Posted by: Scott Crumly

2012-01-31T13:00:49+00:00
Who cares if it is a hack? Really, what difference does it make? If the above statement is way out of line, excuse me, I am a junior web designer and in the very real likelihood of not knowing what I am talking about.

Posted by: Greg Roelofs

2012-01-31T13:00:49+00:00
Boris Anthony wrote: "Case in point: IE's actual worsening of PNG support. IE5.0 did alpha channels perfectly! Why kill it?" IE 5.0 _for Macintosh_ did (does) alpha perfectly, aside from table and page background images that are smaller than 64x64. MSIE for Windows never has--unless you count the cheesy ActiveX filter hack that's been discussed here ad nauseum, or (possibly) some anonymous PNG plug-in that's never been identified.

Posted by:

2012-01-31T13:00:49+00:00
PNG has been around for long enough, if ppl can't see them it's their fault.. Just go PNG all the way..

Posted by: Xslf

2012-01-31T13:00:49+00:00
Anyone know what level of PNG support does Apple Safari (khtml) have? What would need to be done in order not to leave it all? (I noticed that the browser detetion code does not include Safari)

Posted by:

2012-01-31T13:00:49+00:00
While I applaud browsers like Mozilla and Opera in their attempt to standardise and make our web designing lives a pleasure, Microsoft who have the browser majority continualy fail to comply forcing the growth of web design to slow down. Whilst I try my best to comply with standards, I am often forced to code workarounds for IE/PC simply because it's what most people will view my sites with.

Posted by:

2012-01-31T13:00:49+00:00
I think most people would agree that if all browsers properly supported the PNG format, we could avoid hacks, and that would be good for everyone. To that end, you may want to politely encourage Microsoft to do this in IE via their product feedback page http://register.microsoft.com/mswish/suggestion.asp?from=cu&fu;=/isapi/gomscom.asp?target=/mswish/thanks.htm or the Microsoft MSIE 6 Beta feedback site http://131.107.85.107/ie6beta/ie6bugreport.htm And, if you missed it, there's also a petition supporting said improvement http://www.petitiononline.com/msiepng/petition.html Speak up and spread the word - and there won't be a need for hacks.

Posted by:

2012-01-31T13:00:49+00:00
I think most people would agree that if all browsers properly supported the PNG format, we could avoid hacks, and that would be good for everyone. To that end, you may want to politely encourage Microsoft to do this in IE via their product feedback page http://register.microsoft.com/mswish/suggestion.asp?from=cu&fu;=/isapi/gomscom.asp?target=/mswish/thanks.htm or the Microsoft MSIE 6 Beta feedback site http://131.107.85.107/ie6beta/ie6bugreport.htm And, if you missed it, there's also a petition supporting said improvement http://www.petitiononline.com/msiepng/petition.html Speak up and spread the word - and there won't be a need for hacks.