Lately I came to the conclusion that it is time to stop support for IE6 on new websites. I'm getting sick of using all those CSS hacks and I finally want to use new CSS selectors everywhere. IE7 is still a bad browser but at least it supports these selectors and (in most cases) even alpha-transparent graphics. It still needs some hacks but it's acceptable for now.

My old approach of using CSS was this:

<link rel="stylesheet" type="text/css" href="styles/old.css" />
<style type="text/css">
  @import "styles/common.css";                   
  @import "styles/menu.css";                     
</style>

This technique prevented old browsers (Like IE4 and Netscape 4) from seeing the modern CSS definitions (Because they simply didn't support the @import syntax). These old browsers just used the old.css file which may contain some background color and a font definition for example. But most of the time I only had a comment in it (It must NOT be empty because Netscape 4 doesn't like it!) to fix the FlashOfUnstyledContent-bug in IE.

So by using this technique modern browsers could display the webpage in all its glory while old browsers just displayed the unstyled content. This is a good approach because it doesn't lock out users of old browsers. They still can read the content as if they were using a text browser like Lynx.

Now I want to extend this approach so the modern CSS is also ignored by IE6 but not by IE7 and newer spawns of Microsoft's idea of a browser. Conditional comments are the solution but I had a hard time to find the right syntax which is still valid HTML and which doesn't produce strange artefacts in IE7. The result is this:

<link rel="stylesheet" type="text/css" href="styles/old.css" />
<!--[if gte IE 7]><!-->
<style type="text/css">
  @import "styles/common.css";                   
  @import "styles/menu.css";                     
</style>
<!--<![endif]-->

Works great for me. Old browsers including IE6 only use the old.css file while all other browsers including IE7 also uses the other CSS files.

I really hope that IE8 is going to support media in the @import lines. When this is the case and I'm going to drop support for IE7 then I can get rid of the conditional comments and use Microsoft-free standard code like this to prevent IE6 and IE7 seeing the modern CSS:

<link rel="stylesheet" type="text/css" href="styles/old.css" />
<style type="text/css">
  @import "styles/common.css" screen;
  @import "styles/menu.css" screen;                     
</style>