<!—[if !IE]><!—>

what does the extra comment do? is it needed?

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

I can’t see the point of the
<!—[if !IE]—> 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.

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

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

Is that intentional?

@dan

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

<!—[if !IE]><!—>
<link rel=“stylesheet” href=“my_gorgeous_layout.css” type=“text/css” media=“screen” />
<!—<![endif]—>

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.

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!)

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.

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

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…

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.

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

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

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.

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

<!—[if gte IE 7]><!—>
<link rel=“stylesheet” href=“my_gorgeous_layout.css” type=“text/css” media=“screen,projection” />
<!—<![endif]—>

<!—[if lte IE 6]>
<link rel=“stylesheet” href=“textonly.css” type=“text/css” media=“screen” />
<![endif]—>

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

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.
<!—[if gte IE 7]><!—>
<link rel=“stylesheet” href=“my_gorgeous_layout.css” type=“text/css” media=“screen” />
<!—<![endif]—>

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 <!—commenting syntax—> 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

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.

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

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

Thanks a lot.

That makes loads of sense to me!