Question

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.

Answer 1

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.