Feed IE 6 with a basic stylesheet
Making compromises for Internet Explorer 6 with or without Conditional Comments in most situations is fine when it comes to a handful of rounded corners and some transparent PNGs. The user will get a site design that looks pretty much as intended, however, it will be a watered down version of the beauty intended (Andy Clarke has put together a great list) of acceptable differences.
Whilst we can target IE 6 with Conditional Comments, this approach requires the main CSS to be over-ridden with different values, but what if we do want to start from scratch with IE 6?
Recently discussed at Rissington HQ it was decided for some sites, we didn’t want to really support IE 6 and with some people making a concerted effort to ditch IE 6 support, we would still like IE 6 users to see “something” but not a mess either. Instead of supplying the fancy-dan CSS, it would be ideal to just supply a basic text version, such as the basic style we already apply to IE 5, Netscape etc.
We have been able to hide styles from older browsers such as IE 4 and Netscape using the
@import declaration (and IE 5 using the filter
/**/), but this won’t work for IE6 and above. Digging around in the Textmate HTML bundle, I accidentally stumbled upon a Conditional Comment basically saying, “if you’re not IE, show this”… Ah ha!
So very quickly here’s the score. At the moment we can link to our external CSS using this code and as IE 5 can’t understand the
@import bit, it just gives up:
<code> <link rel="stylesheet" href="textonly.css" type="text/css" media="screen" /> <style type="text/css">@import/**/"my_gorgeous_layout.css";</style>
[if !IE] Conditional Comment however, we can just feed old Microsoft browsers one style and more modern browsers another. Like this:
<code> <!--[if !IE]><!--> <link rel="stylesheet" href="my_gorgeous_layout.css" type="text/css" media="screen" /> <!-- <![endif]--> <!--[if gte IE 7]> <link rel="stylesheet" href="my_gorgeous_layout.css" type="text/css" media="screen" /> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" href="textonly.css" type="text/css" media="screen" /> <![endif]-->
I’ve tested the basics of this approach and it works well. If anyone tries has some success on a future or current site, please let me know.
UPDATE: Dan Cederholm has published an article on how to deal with IE6 and some great comments. Apologies to those whose comments were closed off here. Spam Spam Spam…