So there you are, admiring your hard work. Your pixel precise, artfully crafted design with it’s clever use of 24bit alpha-transparent PNG images to create the perfect effect you wanted. Bravo! Well, that is until you look at it in IE6. So you hack the CSS or add special Javascripts to force things to playing nice.
How about this? Instead of using one of the many Javascript or CSS hacks, why not use a simple conditional to detect IE6 and serve up 8bit versions of your beautiful alpha-transparent 24bit PNG files instead? This would keep things looking as intended in the original design, without adding strange things to your CSS or extraneous Javascript behaviors.
Here’s one way you might pull it off:
In your controller, or CMS:
<?php
// feel free to use any user agent detection mechanism you prefer here
$IE6 = strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') ? true : false ;
?>
Then in the template (Smarty syntax used here):
<img src="/images/coolicon{if $IE6}.8bit{/if}.png" />
There. Auto-magically any request made from IE6 for “coolicon.png” will result in an image named “coolicon.8bit.png”. Cool eh? Well, it is a bit messy. Now you have to add that conditional statement to all your IMG tags. PITA.
This seemed to clutter the templates a bit more than we are comfortable with so let’s try a different approach. Go after the IE6 demons at a lower level — summon Apache and mod_rewrite. Here’s how it goes.
In your VirtualHost container:
RewriteCond %{HTTP_USER_AGENT} "MSIE [56]"
RewriteCond %{REQUEST_FILENAME} !^.*\.8bit\.png$
RewriteCond %{REQUEST_FILENAME} ^(.*)\.png$
RewriteCond %1\.8bit\.png -f
RewriteRule ^(.*)\.png$ /$1.8bit.png [R=301,L]
Briefly, it works like this. The first rule checks if the browser making the request is IE6 or lower. If it is then we continue to the next rule which check that the request is not for an image named “something.8bit.png”. Then we check if the request is for a PNG image, and that there is an 8bit version on the filesystem. If there is, we serve it up.
This is much cleaner since you don’t have to check a conditional on every image, just the requests that are for a .PNG file, and only if IE6 or lower made the request. The frees up the application layer from doing a comparison operation on every image, keeps your templates much cleaner, and a wee bit faster too. Hat tip to Jeff for hatching the idea.
This solution does come with a downside (what about working with IE6 doesn’t?). You will need to create an 8bit version of any image that troubles you and put in on your server right next to its 24bit counterpart. Seem like a lot of work? Well consider the time you’ve spent with presentation and behavior layer hacks. Every CSS or Javascript hack I’ve ever played with with carried some baggage of unintended side effects on the design, and that my friend is not what we want.
Of course you could use this technique to substitute any bit of content for an alternate, all without touching markup or using hacks. Or, you could use this little bit of code instead. You can figure out what it does ;)
In your VirtualHost container:
RewriteCond %{HTTP_USER_AGENT} "MSIE [56]"
RewriteRule ^.*$ http://www.mozilla.com/en-US/firefox/ [R=303,L]
Was it good for you?
Post to Twitter Post to Digg Post to del.icio.us Post to ma.gnolia Post to Furl Post to Mixx