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> 

Using the [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…

Published: ← Previously | Next entry →

Comments are closed for this entry

Picture of Dan

what does the extra comment do? is it needed?

Posted by Dan on Wednesday, September 24, 2008 at 13:58 GMT

Picture of Simon Clayson

The inner comments are (as far as I understand) to “come back out of Conditional Comments”. Put it this way, it goes wrong if you get rid of them.

Posted by Simon Clayson on Wednesday, September 24, 2008 at 14:17 GMT

Picture of Ken Hanson

Awe-some. So fantastic man. Thanks for this! Great find!

Posted by Ken Hanson on Wednesday, September 24, 2008 at 14:28 GMT

Picture of Pete Eveleigh

I can’t see the point of the
bit.

That’s saying, “if you aren’t IE then use this sheet”.
However, only IE reads the comment as anything more than a comment so other browsers will not load the stylesheet. If this works at all, it’s a fluke and I wouldn’t want to rely on Mozilla, Apple et al to continue supporting conditional comments.

I think the key to loading different stylesheets using conditional comments is the way in which you use the cascade.

Either append to your standard stylesheet or, more drastically, overwrite all the rules defined in it with IE friendly ones.

Posted by Pete Eveleigh on Wednesday, September 24, 2008 at 15:26 GMT

Picture of Pete Eveleigh

Oh hang on, I think I see what’s happening.

There’s a funny double comment thing going in !IE conditional.

Is that intentional?

Posted by Pete Eveleigh on Wednesday, September 24, 2008 at 15:29 GMT

Picture of Bluegold

@dan

I think also that it won’t validate without the extra comments.

Posted by Bluegold on Wednesday, September 24, 2008 at 15:34 GMT

Picture of Pete Eveleigh



The key bit is the after the opening conditional comment.

A proper browser sees the conditional comment as a comment so ignores what comes next UNTIL it reaches a close comment tag. This comes before the actual link tag (thanks to the ). The closing of the conditional comment is treated just like a normal comment so the end result is that the browser uses the link tag as it should.

An IE browser will see the conditional comment, check if it’s IE or not (it is) so proceeds to load the stylesheet. However, I suspect it’s taking exception to the extra comment within the conditional and so bails out of the conditional - effectively seeing the whole shebang as a comment.

The test that needs to be done (which I haven’t done yet) is to see if IE ignores the extra comment or bails out if if it finds a normal comment within a conditional comment. I suspect that it is failing and leaving the conditional which is why you get the result you are seeing.

Posted by Pete Eveleigh on Wednesday, September 24, 2008 at 15:46 GMT

Picture of Michael

I’ve been using this for a while on http://www.citizenshipfoundation.org.uk and it seems to work well.
(And yes, I know the stylesheets & markup could do with a bit of work!)

Posted by Michael on Wednesday, September 24, 2008 at 16:21 GMT

Picture of Andrew

I use this trick at http://omogari.biz. I use it to feed both IE 7 and IE 8 certain stylesheets. It’s very hacked together, but whatever. The way I understood it is that IE is the only browser that reads these conditional statements. All other browsers ignore it. So as long as IE supports it and other browsers don’t, then there shouldn’t be a problem.

Posted by Andrew on Wednesday, September 24, 2008 at 23:20 GMT

Picture of Martin Walker

Excellent. No I can serve ‘upgrade your browser’ messages.

Posted by Martin Walker on Thursday, September 25, 2008 at 02:13 GMT

Picture of Matthew Babbs

If, when IE8 comes out, it actually turns out to be capable of rendering my_gorgeous_layout.css correctly, this will need updating a bit…

Posted by Matthew Babbs on Thursday, September 25, 2008 at 08:57 GMT

Picture of Simon Clayson

@Matthew Babbs - IE 8 and even 9: If MS ditch conditional comments then so be it, we’ll deal with it then as is the way of developing for the internets. But even IE 7 here is being fed with my_gorgeous_layout, and so will IE 8 as things stand.

Posted by Simon Clayson on Thursday, September 25, 2008 at 09:12 GMT

Picture of Tobias Batt

I use a slightly different method which I haven’t seen anyone else using it, so it probably has some faults. IE6 & 7 both don’t support “@import url(my_gorgeous_layout.css) screen;” thus they both don’t get any style then use conditional comment to give IE7 the same stylesheets as the good browsers? alas I still have to make my sites look the same in IE6 so I don’t get to use it often, but I hope it helps someone.

Posted by Tobias Batt on Thursday, September 25, 2008 at 10:45 GMT

Picture of Matthew Babbs

Ah, sorry. I misread the second conditional comment and thought you were feeding IE7 its own stylesheet. Oops.

Posted by Matthew Babbs on Thursday, September 25, 2008 at 15:25 GMT

Picture of Erwin Heiser

Definitely falls into the “why didn’t I see this before?” category. Thanks for pointing out that conditional comment. Cheers!

Posted by Erwin Heiser on Saturday, September 27, 2008 at 12:19 GMT

Picture of Jeff Starr

Amazing coincidence here, as I posted on this exact same technique two days prior. Of course, conditional comments work well for dealing with more than just stylesheets. In my article I discuss how to use them to save bandwidth when delivering JavaScript content as well.

Posted by Jeff Starr on Wednesday, October 01, 2008 at 19:48 GMT

Picture of Michaël Guitton

You can save redundancy in the conditional comments with the following markup:





Posted by Michaël Guitton on Thursday, October 02, 2008 at 16:44 GMT

Picture of Suzy

actually Simon I think we can combine the first two comments into one and though I have tested the following as working, DYOR smile

Your first comment is a downlevel revealed (and a validating version of it at that!) which means *all* browsers can see it so the [if not IE] bit is only excluding all of IE which is why you have to do the second one, a downlevel hidden (meaning only IE reads it) in order to then give it back to IE7 upwards

so if you assume that all browsers can actually see *inside* the first comment it is at that point that you could also exclude the IE versions you don’t want.
e.g.


the [if gte IE 7] bit is only understood by IE so even though the commented stylesheet (the bit inside the actual comment) is read by all browsers because of the fancy only IE versions less than 7 will ignore the stylesheet because of the expression inside the brackets.

the you still need your last comment to pick up the “slack” - which has many uses smile

Posted by Suzy on Friday, October 03, 2008 at 18:33 GMT

Picture of Jeff Starr

Combining the first two conditional comments is possible, but requires extra attention depending on which DOCTYPE you are using. For HTML, additional IGNORE tags are needed; for XHTML, a secondary conditional comment is required. This is the case whenever you are targeting any specific version(s) of IE with negative conditional comments. When simply excluding all IE, the format Simon uses in his post is correct. Here is an article I wrote that explains all of this in greater detail.

Posted by Jeff Starr on Sunday, October 05, 2008 at 17:46 GMT

Picture of telo santos

IE is the most widely used browser. 80% of the worlds population is using it.

Posted by telo santos on Wednesday, November 12, 2008 at 04:13 GMT

Picture of Graphics and Web Design

Excellent!
It is really working well.
I got solutions of my confusions from other comments.

Thanks a lot.

Posted by Graphics and Web Design on Friday, January 16, 2009 at 08:32 GMT

Picture of Steven Hambleton

That makes loads of sense to me!

Posted by Steven Hambleton on Friday, February 20, 2009 at 01:01 GMT

© 2005 – 2017 Simon Clayson Design Ltd

Chipping Norton, Oxfordshire, England. United Kingdom