HTML Trick: How To Add CSS Styles For All Browsers Except Internet Explorer

I very like an idea of display a different design of the same site for IE6 users (may be even for IE7 and IE8 users) and for users of other popular browsers.

The reason is in ability of using CSS3 technology by the full, because the browsers like Opera, FireFox, Chrome and Safari already supports a lot of opportunities of this technology, they updates frequently, and we, web developers, very much want to use them on our web sites. Right? =)

We can create a two absolutely different CSS files: one – for IE and one for other browsers and then to give them to a corresponding browser using conditional comments.

How to

To do the subject, you need to follow the next 2 steps:

1. Connect a CSS file for all browsers except IE6:

   <!--[if IE]><![if !IE 6]><![endif]--><link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /><!--[if IE]><![endif]><![endif]-->

   Or simplified version, that doing the same:

   <!--[if !IE 6]><!--><link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /><!--<![endif]-->

2. And now connect a CSS file for only IE6:

   <!--[if IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen, projection" /><![endif]-->

By analogy you can make this for IE7 or IE8 or once for IE6, IE7 and IE8 (help on conditional comments).

Examples

• Transcending CSS – this site uses only Universal IE6 CSS for IE6.
• Dimox.name – my another blog about web development (on Russian). I’ve made a different design for IE6.
• Early I have seen other interesting examples, but can’t find them now…