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: relativeto links and form fields if they don’t already havepositionset. (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-repeatand sets thescaleModetocroprather thanscale. - 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.
Trackback
Comments
[...] CSSGirl wird ein neuer PNG Fix vorgestellt, ich werd ihn nicht gleich ausprobieren aber er scheint wohl [...]
Thanks for this. I’ve been using the PNGfix CSS method but it doesn’t support transparent backgrounds.
I’m going to give this method a try with some of my more graphic heavy designs.
Thanks
Yes, I haven’t fully tested Unit PNG fix yet, but just from the sample tests I did it looks to be a sure winner.
I have used SuperSleight intensively and can attest for it’s awesomeness though. Used it on some really heavy, really crazy templates that basically were all transparent PNGs.
I’ve tried unitpng but somehow it create mess with my theme compared with old supersleight, still configuring it
Really? That’s a shame! I actually just started using UnitPNG officially for the new design of this site because Supersleight made one of my gif images disapear for no reason, while it was completely uneffected with Unit.
Good luck!
I see tons of solutions for pre-IE7 png problems, but IE7 has its own problem with the format that is driving me nuts right now.
Basically, I’ve been playing with layering background images in tables and it works great. I have an image in the cell on top of an image in the table and both of those sit on and image in the div. The problem is, when I go to another page, all the pngs flash.
I’m not sure if IE7 is just refusing to cache those images or what, but Firefox doesn’t have this problem at all. Would UnitPNG fix this as well? Here’s the site I’m working on at the moment…
I’m not entirely sure - but I don’t quite think it’s a PNG problem there. I think it may have to do with the size of the images and them not being cached so they have to reload each time. I think you may have the same problem no matter what type of images you use.
Have you tried to combine your images into one sprite and than working from that?
Other than that, if it is a problem with the PNG images (although I’ve never encountered one yet) I’d suggest giving UnitPNG a whirl.
I have definitely chosen it as my preferred PNG method - it’s quite good!
The reason I thought it might be a png problem is that the jpg images (the menu pic/buttons) don’t flash, just the background elements like the vines, the header background and the footer. Also, with the exception of the vines, no image is larger than 7k. And FF has no problem with them (although it has its own little visual bugs to deal with).
I could combine the images, but then I just have one huge png instead of a bunch of little ones (it’s important for the pinstripes to show up under the vines, which look terrible in anything but png format and are the basis of the whole visual experiment I’m playing with right now).
The vines are the largest part of the imagery, with the biggest set coming in at 107k. But, the whole point of my layering experiment was to allow the other, more important parts of the site (the main body including he header, content and footer) to load quickly, without having to wait for the alpha intensive vines to pop up. I’ll give UnitPNG a whirl, though. Thanks…
I used SuperSleight for one of my website and its problem appears to be exactly like you said. Unit PNG Fix would be another option for me now. Thanks!
Dave
With Unit PNG, I can get the PNG fix to work for stand alone .png images (in an tag), but I can’t get the transparency to work for background images. Very frustrating.
Thanks for this useful post. I would strongly suggest that people stop using IE6 anyway!
In fact, IE6 causes alot of troubles for web designers (including me) when they want to come up with a great interactive and creative website… I personally think that IE6 is causing the web designers to stick where they are just for the sake that it is a Microsoft Product!
STOP USING IE6!!
I am having problems getting this to work on images that are inside a or which initially had their “display” style set to “none”.
When I show the /, there is just blank space where the PNG should be.
I had this same issue with Supersleight, but at least with supersleight I was able to issue a supersleight.run(); command after I showed the /.
Any ideas how to fix this problem with Unit PNG Fix?
For some reason, putting a script tag into a conditional comment wasn’t working out for me, so I just added browser detection (for < ie7) around the UnitPNG code - works great, no errors in FF or IE.
var clear=”images/clear.gif” //path to clear.gif
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if ((browser==”Microsoft Internet Explorer”) && (version0){var el=els[i];var es=el.style;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+el.src+”‘,sizingMethod=’crop’)”;el.src=clear;}else{var elb=el.currentStyle.backgroundImage;if(elb.match(ip)){var path=elb.split(’”‘);var rep=(el.currentStyle.backgroundRepeat==’no-repeat’)?’crop’:’scale’;es.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+path[1]+”‘,sizingMethod=’”+rep+”‘)”;es.height=el.clientHeight+’px’;es.backgroundImage=’none’;var elkids=el.getElementsByTagName(’*');if (elkids){var j=elkids.length;if(el.currentStyle.position!=”absolute”)es.position=’static’;while (j– >0)if(!elkids[j].style.position)elkids[j].style.position=”relative”;}}}}}
window.attachEvent(’onload’,pngfix);
}
else
{
}
BTW, comment system worked the code over a bit:
(version0) should be (version < 7)
