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>