Browser Conditional Style Sheet

[Dezblanco]

I need to get a better understanding of the dynamics involved with the use of browser dependent statements which force the browser to a different style sheet based up that particular browser and version.

Let's say I have a master style sheet with 500 items or so, but about 40 of those elements need tweaking for IE6 and or IE7.

Do I have to copy all 500 elements over to the IE6 and/or IE7 style sheet, or can I just add those 40 elements?

Thanks for your explanation.

[vincevincevince]

You can add just those 40 elements, so long as the conditional sheet is added after the main one. Given the same form of definition they will overwrite the previous rule.

You can also use 'tricks' to insert those 40 within the main sheet. A simple example is:

#content .context { margin-right:10px } //all browser
#content > .context { margin-right:0px } //basically, all but IE6

The above example overwrites the right margin instruction (10px) from the first line, replacing it with 0 on the second line, for all by IE6 (essentially). This means that IE6 will show a 10px margin, the rest 0.

The > is a child selector; it means 'all children of the thing on the right'. It is not supported in IE6.

[swa66]

If you use a conditional comment in this fashion:

  <link rel="stylesheet" type="text/css" href="/atyle.css" />
<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="/ie6.css" />
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="/ie7.css" />
<![endif]-->

Then you don't need to repeat anything in the ie6 and ie7 specific stylesheets. so
if you have a long body {..} in the style.css, and need to make the min-height:100% be a height: 100% all you add in the ie6 specific stylesheet is body {height:100%}. There is no need to repeat anything, you basically have a stylesheet that comes order wise after the original one and it will override the settings in the earlier one IF there's a conflict and the specificity remains the same. You can also get a higher or lower specificity if you should wish to do so. (but I've never seen any use of that).

[jameshopkins]

You can also use 'tricks' to insert those 40 within the main sheet. A simple example is:

#content .context { margin-right:10px } //all browser
#content > .context { margin-right:0px } //basically, all but IE6

These aren't equivalent rules, and therefore shouldn't be seen as browser 'hacks'.