1

How do you make your website CSS3 compatible with Internet Explorer versions earlier than IE9 without using plugins such as CSS3pie, normalize, etc?

CSS3Pie is a great tool I was using, but it became inconvenient because I have some elements with border-left-radius that do not work with the plugin.

Kevin
  • 21
  • 4
  • 1
    with [Progressive enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) or [Graceful degradation](http://en.wikipedia.org/wiki/Fault-tolerant_system) – c69 Oct 24 '12 at 06:13
  • @c69: Information on both would be nice. I've looked on major sites and couldn't find anything – Kevin Oct 24 '12 at 06:14
  • 2
    What kind of an answer are you expecting? IE versions before IE10 don't support large parts of CSS3. So, you either code separately for them or you install something that tries to emulate the missing functionality (like CSS3PIE) or you live without the extended functionality when run in those versions of IE. What else are you aksing for? – jfriend00 Oct 24 '12 at 06:33
  • plz refer http://stackoverflow.com/questions/978832/how-to-make-sure-the-css-work-fine-with-all-browsers-without-eye-testing-on-each/12707060#12707060 – Web Designer cum Promoter Oct 24 '12 at 07:02

1 Answers1

2

IE8 doesn't support CSS3. You know that already. If you're looking for a way to get CSS rounded corners in IE8 without some kind of hack, then you're going to be disappointed.

Solutions:

  1. Use "Progressive Enhancement" techniques, such as CSS3Pie, which you already know about. Virtually all of these are Javascript-based hacks, and none of them are perfect. You already know the issues with CSS3Pie. The issue you discuss is a relatively minor one, and easily worked around; if you're not willing to work around that, then there's unlikely to be anything better for you.

    A fairly comprehensive list of these polyfills can be found here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

  2. Graceful degradation. This basically means accepting that old browsers are missing some features, and writing your site so that if those features are missing, then it still works; maybe not as good, but usable. In the case of border-radius, this is easy: just accept that it doesn't work in IE8. Rounded corners are nice to have, but the site isn't going to be broken beyond use without them.

  3. Chrome Frame. This is a plugin for IE written by Google that allows it to render pages using the same rendering engine as the Chrome browser. It's a major hack to the guts of the browser, but it does work well; no more worry about those missing features and rendering glitches. However, it requires the end user to install the plugin, so while it's nice as an option, and you can specify it to be used if it's available, you can only really rely on it if you have control over the end users' systems - eg in a corporate network where you can make sure it's installed on all machines.

Those are your options.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Good answer, especially point 2. I think web developers should consider graceful degradation as the first and best solution in most cases. – Lorenzo Polidori Oct 25 '12 at 09:34