1

I have gotten accustomed to stylesheets that have separate rules for IE and non-IE browsers. For example, I have been using CSS3 Pie to generate rounded corners and gradients in IE.

The issue is that IE 9 supports rounded corners and gradients, and doesn't need such workarounds anymore. How can I rewrite my stylesheet to ensure that the behaviors only apply to IE 8-, and not to IE 9 ?

Thanks!

Edit: here is an example from the CSS3 Pie site where the rules are redundant for IE 9: http://css3pie.com/demos/tabs/

Christophe
  • 27,383
  • 28
  • 97
  • 140
  • 1
    CSS3Pie disables itself when it detects IE9, so you shouldn't need to do anything specific for it compared with other browsers in that regard. – Spudley Apr 15 '11 at 10:24
  • 2
    see http://css3pie.com/2010/12/06/pie-1-0-beta-3-released/. Quote: "Disabled in IE9". That link is the release notes for beta 3; current version is beta 4, which tweaked that code a bit further but it is still basically disabled in IE9. – Spudley Apr 15 '11 at 12:15
  • Very useful, thanks Spudley! Note that my initial question was not specific to CSS3 Pie, I just took it as an example. – Christophe Apr 16 '11 at 03:20

3 Answers3

5

The usual approach is to use conditional comments and a separate patch stylesheet for each version of it:

<!--[if IE 7]><style type="text/css">@import "ie7-kludges.css";</style><![endif]-->
<!--[if IE 8]><style type="text/css">@import "ie8-kludges.css";</style><![endif]-->
<!--[if IE 9]><style type="text/css">@import "ie9-kludges.css";</style><![endif]-->

That way you can use standard CSS in your main stylesheet and then layer on whatever kludges and nonsense you need to make each version of IE behave itself. Each version of IE usually needs different kludges so I put them in different stylesheets.

mu is too short
  • 426,620
  • 70
  • 833
  • 800
1

See some of the answers here How does one target IE7 and IE8 with valid CSS?

and here IE8 css selector

Community
  • 1
  • 1
Daveo
  • 19,018
  • 10
  • 48
  • 71
1

Hard to tell you how to rewrite something if we can't see the original. In general, the common best-practice for dealing with IE is to use IE's conditional comments in some form or another. What I typically do is via said comments write out the body tag with a class matching the particular version of IE. So, for IE7, I may end up with this:

<body class="ie7">

That way, in my CSS, I can use specificity to give ie7 it's own style without having to resort to hacks nor having to manage styles across multiple css files. 

.something {...style for good browsers...}
.ie7 .something {...fix IE 7 here...}
DA.
  • 39,848
  • 49
  • 150
  • 213