Creating browser-specific CSS

Hello,

My page is using a number of different CSS stylesheets. If a user arrives to my page in IE 8 or less, how do I make it so that an additional stylesheet loads for that person?

From what I understand, I can use the following:

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

However, IE 8 will still load the competing stylesheet. Is there a method of making it so that the competing stylesheet is turned off for IE 8 users?

Thanks

Hi,

You can use conditional comments as you mentioned above to deliver rules to ie9 and under (or version by version) but you should only supply the modifying rules in these stylesheets and not complete stylesheets. Usually, Ie8 will only need 1 or 2 hacks on most large sites so there’s no need to duplicate a whole stylesheet as that is a maintenance nightmare. Just supply the modifying rules in the conditional stylesheet. If you have many hacks for IE8 then it is likely that there is something very wrong or you are using some advanced css3 that ie8 doesn’t understand. Even then its usually just a couple of lines of code to fix ie8.

There are ways to exclude stylesheets from ie8 and under but are seldom needed.


<!--[if gt IE 8]><!-->
  <p>This is shown in downlevel browsers (i.e. good browsers) and IE9 or later.</p>
<!--<![endif]-->