IE6 PNG Fixes - SuperSleight & Unit PNG Fix

A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.

At first glance Unit PNG Fix has the benefit of being smaller (1k .js file, 1 transparent .gif). SuperSleight has a total of 3 files (two .js files and (one 3k, the other 2k, and the transparent .gif), but you can choose to use either one of the SuperSleight .js files - so if you prefer to use the mini version of SuperSleight it would just be 2k.

Both are called the same way in the <header> of the document - a conditional focusing on IE6 and below.

Unit Interactive lists the benefits of it’s script as:

• Very compact javascript: Under 1kb!
• Fixes some interactivity problems caused by IE’s filter attribute.
• Works on img objects and background-image attributes.
• Runs automatically. You don’t have to define classes or call functions.
• Allows for auto width and auto height elements.
• Super simple to deploy.

24 ways introduced SuperSleight as having the following qualities:

• Works with both inline and background images, replacing the need for both sleight and bgsleight
• Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
• Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
• Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
• Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

After creating a few png transparent images and testing both methods here are my pros and cons of each:

SuperSleight
PROS:

• No need to edit .js files with image link when both are placed in the same directory (ie: root).
• Plug and play - just upload the supersleight-min.js and x.gif to your root directory, plug in the link to the file in an IE conditional and it works.

CONS:

• Get IE warning about “blocked content”. Need to click top warning popup to activate supersleight.
• Comes packed with two .js files: supersleight.js and supersleight-min.js. Could be confusing to a lay-person as to which file to use, and if both are needed.
• Loads slightly slow. On pages with multiple PNGs in IE6 you see a “gray flash” before the PNG fix kicks in.

Unit PNG Fix
PROS:

• Smaller size. But only by 1k.
• No popup warning that their is active content.
• Seems to load multiple images faster than superselight. A page with about 20+ transparent pngs loaded almost instantly without the “gray flash” commonly seen before the js kicks in for IE6.

CONS:

• Comes with the path to the clear.gif image linked in the /images folder.

So overall, I have come to the conclusion that it seems Unit Interactive’s Unit PNG Fix is indeed a better alternative to good old SuperSleight. Let’s just keep hoping that user will keep updating their IE6’s until there is virtually no one using IE6.