So, I'm using CSS3 in order to create sidebar boxes in my site design, this works nice and dandy. Using http://css3pie.com in order to create the effect in IE.
Again, nice and dandy. Now, comes my issue -
For each relatively positioned module, there is an absolutely positioned icon within it, that is set to being top: -20px in order to give it a pop-out effect. Obviously this doesn't work in IE6, as well it doesn't play nice with any PNG fix codes.
However, for IE6 users I can switch to a low-quality gif instead, and they can deal with it.
Now, my question is, how can I manage to live-switch image.png to image.gif if the user is using IE6?
I have yet to find a reasonable solution for this idea. I could use an IE6 stylesheet to replace the images - however there are several instances where images shouldn't be CSS-based. They should be proper images.
Any suggestions? I wanted some sort of a jQuery replace, but I haven't found a reasonable solution for that either.
There are several solutions. Probably the easiest would be to create a jQuery function that was called when the user switches to the low-fi site (by link) or you determine this on their behalf (by headers or conditional comment).
The jQuery function could utilize attribute selectors to make life easier.
function switch_to_low_fi() {
$('img[src$=".png"]').each(function(index,element) {
element.src = element.src.replace('.png','.gif');
});
}
To switch the CSS backgrounds, I would recommend classing them with degrade or something of the sort to create a hook for jQuery, then doing something similar as the above.
$('.degrade').each(function(index,element) {
element = $(element);
var background = element.css('background-image');
background = background.replace('.png','.gif');
element.css('background-image', background);
});
Of course, you will need to modify the code above base on your markup, but that should get you started.
This should work for all non-CSS images on the page:
// when DOM is loaded
jQuery(document).ready(function(){
// and browser is MSIE 6 or lower
if (jQuery.browser.msie && jQuery.browser.version <= 6) {
// go through every IMG
jQuery('img').each(function(index,element){
// if there's a .png in the source, I'll assume it's at the end
// (of course, more complex test could be made) ...
if (element.src.indexOf('.png') != -1) {
// ...and replace it with a GIF version
element.src = element.src.replace('.png','.gif');
}
});
}
});
You can use this PHP code in the CSS to know what browser is being used:
<?php
$useragent = $_SERVER[‘HTTP_USER_AGENT’]);
if (preg_match(‘|MSIE ([0-9].[0-9]{1,2})|’,$useragent,$matched)) {
$browser_version=$matched[1];
$browser = ‘IE’;
echo ... ;//css selector for Internet Explorer and so on...
} elseif (preg_match( ‘|Opera ([0-9].[0-9]{1,2})|’,$useragent,$matched)) {
$browser_version=$matched[1];
$browser = ‘Opera’;
} elseif(preg_match(‘|Firefox/([0-9\.]+)|’,$useragent,$matched)) {
$browser_version=$matched[1];
$browser = ‘Firefox’;
} elseif(preg_match(‘|Safari/([0-9\.]+)|’,$useragent,$matched)) {
$browser_version=$matched[1];
$browser = ‘Safari’;
} else {
// browser not recognized!
$browser_version = 0;
$browser= ‘other’;
}
?>
Do you want to know how to replace the elements or how to get the browser/version?
jQuery has facilities for both.
Getting the browser is straightforward. just use jQuery.browser.
To change the images would require a different approach for CSS vs. <img>. Set everything to use PNG's and then do something like:
if ( useGIF() ) {
var src;
$('img').each(function() {
src = $(this).attr('src');
$(this).attr('src', src.substr(0, src.length-3) + 'gif');
};
$('.has_bg_png').each(function() {
src = $(this).css('background-image');
$(this).css('background-image', src.substr(0, src.length-3) + 'gif');
};
}
