|
You've seen it before: You build a really slick set of images in Photoshop and save them to PNG format (wanting to take advantage of all those millions of colors along with transparency) then upload them to your site, preview it in Firefox (being 'in the know' about your browsers) and everything looks great. Then, at a friend's house, you have them checkout your work on their BigBoxtm computer with IE and all the images are wrong. There's no smooth blending and it looks like something built with an online WYSIWGY editor. AH! Here's the fix:
Quite simply, place this in the <head> area: <!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]--> And upload this:
DOWNLOAD PNGFIX.JS HERE Pros: - Ignored as a comment in other browsers - it's only run by Windows IE.
- Works with (X)HTML Strict & Transitional Doctypes
- Does not break W3C validation
- Lightweight and very easily deployed
- Works with existing in-line or external CSS rules based on class or ID selectors
- Works with old-style img align="left" or align="right" attributes
- Runs after any existing Body Onload code
- Works with imagemaps and input images using a special version
Cons: - Doesn't work in IE versions earlier than 5.5 - the AlphaImageLoader filter wasn't introduced until version 5.5. There is no cure for earlier versions.
- Requires JavaScript to be enabled - the estimations for how many people choose not to use JS vary wildly. See note [1]
- CSS backround PNGs not supported - experimentation revealed I could traverse the Stylesheets collection and use the AlphaImageLoader trick to replace all background-image attributes containing PNGs, but then background-repeat would not work, and anchors placed over non-transparent parts of the image were not clickable :-(
- CSS rules for the PNG images based on the img selector are lost, but this is easily rectified by adding a class selector to your img rule such that img{..} becomes img,.png{..} - then add the attribute class="png" to each of your PNGs.
[1] The figures commonly quoted for the percentage of users with no JS are usually those supplied by The Counter. However, the variances in their statistics are so large as to suggest their system is rather flawed. They reckoned 13% of users had no JS in December 2003. This had dropped to 4% by January 2004! My real-world experience of many users in many businesses and homes is that very close to zero users turn off JS, but your world view and target audience may of course be different. |
