2

I have a website that uses various CSS3 styles which has only really been tested in Firefox 10. I need some way to simulate various CSS styles which are not natively supported when viewed in IE8:

  • box shadow
  • text shadow
  • background gradient
  • round corner
  • opacity

I've tried using css3pie, but when I included the .htc file it produced some unpleasant side-effects. I know there are jQuery plugins that can add box shadows and round corners to elements in IE8, so I'm considering using these inside a conditional code-block, e.g.

if ($.browser == 'msie' && $.browser.version.split('.')[0] < 9) {
    // call JQuery plugins to apply box shadows, round corners, etc.    
}

I realise that this is somewhat brittle because I'm using browser detection rather than feature detection, but I can't find a way to detect features like the ability to round corners using jQuery.support.

Secondly, I'm only aware of jQuery plugins that can simulate some of the CSS3 properties (box shadow and round corners), are there others for background gradient, opacity and text shadows?

Finally, if there's a completely different way to achieve my goal, then please feel free to suggest an alternative.

Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
Dónal
  • 185,044
  • 174
  • 569
  • 824

1 Answers1

2

First, I would consider embracing the idea of graceful degradation/progressive enhancement. Code to the most capable browsers, and make sure less capable browsers have an acceptable not identical experience.

I loathe to mention this, but you can explore filters for IE. Those will simulate some of these properties - like box shadow and opacity. Be forewarned, though: filters have performance hit, and will not render as nicely as native CSS.

Text shadow - that's a tricky one - you'll have to rely on javascript, basically. If you can live without the text shadow, I'd just let it be.

Background gradients - you can still use background images that tile. There are IE filters for this, but that comes with the same cost as above, and there are layout oddities that happen when you use them.

Rounded corners - I have yet to find a great solution for that. Let it be.

Opacity - there is an opacity filter for IE that works pretty well (with the same caveats). If you're looking for RGBA support, you'll have to use a transparent PNG for the background.

I would suggest, though, rather than targeting IE8 at all, use something like modernizr to target browsers based on what features they do or do not support.

Also: this.

chipcullen
  • 6,840
  • 1
  • 21
  • 17