I am a Web Designer

The newest transparency-ping-fix kid on the block is from Uninteractive Labs and manages to make the simplest, smallest and most versatile png fix for IE so far.

For thos unfamiliar with the transparency woes of web designers, a png file allows to a very sophisticated transparent overlay technique that other file types simply don’t allow – jpeg has no transparency at all and GIF has a very crude on/off style transparency. PNGs alpha transparency allows background elements to be seen beneath your image. Its all very lovely and allows web designers greater flexibility when designing their slick, web 2.0 style sites. As usual however, the main stumbling block is Internet Explorer 6 and below (and those users who insist on using them). IE6 doesn’t display PNGs with alpha transparency correctly – instead of the transparency you get a dull grey/blue block around your image which looks awful. Now there is the ability build right into windows to show png files correctly in IE – but for some reason, Microsoft in their infinite wisdom turned this off in their pre IE7 web browsers.

So, how to fix png transparency in Internet Explorer?

Traditionally, in order to recall the alpha functionality in IE6, the designer would have to write a separate style sheet targeting IE6 (yes, firefox, navigator, opera, konquerer, camino…etc. all managed to include alpha functionality into their systems), and each background png file would be individually targeted and have Microsoft’s AlphaImageLoader string applied, and some cute javascript applied to img tags for inline images. Then a range of JavaScript fixes were made available by independent developers. These would allow alpha transparency to be applied almost automatically, so long as the designer jumped through a couple of low-and-wide hoops first and target them correctly, they applied the necessary transparency elements with out too much pain. These js files were certainly useful and to some extent satisfied a desperate need for a simpler method of applying the png fix. The best of these methods I found was iepngfix.htc by Twin Helix but I often found this method a little flakey and it would occasionally miss apply elements or not apply them at all – other times it would work a treat. I founfd also, that when using pngs for buttons or links, I would have to apply cursor:pointer; to the link’s CSS. So another fix method was still desired.

So enter Uninteractive Labs. Their fix is the smallest I’ve come across, weighing in at just 2kb. It doesn’t require any additional CSS entry nor any additional coding other than to call the script. So a conditional comment to call the js file when IE6 or below is present and bob’s your uncle!

You can download the javascript file and its partnering black.gif from the Uninteractive Labs website.

This has to be the best new in a long time. According to Ars Technica, mozilla are producing a plugin for Internet Explorer to address its lack of ‘canvas‘ support. This in itself is a great thing – but where might it end? Could this see Firefox ‘fixing’ all of IE’s bugs? Would the people who use IE and are blissfully unaware that they are browsing the web with an awful browser and are being denied the rich web experience that the rest of us enjoys, actually install such a plugin? Surely only those who are forced to use IE in their work or college and are aware of the drawbacks of doing so, will bother to install the plugin. All other users who are still using old browsers or defaulting to the windows browser because that’s what the computer comes with… aren’t going to install any plugin ever! Of course, mozilla have thought of this, and has enlisted the help of Adobe, so such a plugin could ‘piggy-back’ on a flash-style update.

We’ll see what happens, but its a very positive step for web development!