Conditional comment for !IE breaks for old versions of Firefox

Question

I am in a situation where I need to load one of two stylesheets based on what browser is accessing the page:
if anything but IE then load the "new" stylesheet
if IE >= 9 then load the "new" stylesheet
if IE < 9 then load the old stylesheet

This is the code used to achieve that:

<!--[if lt IE 9]> <link type="text/css" rel="stylesheet" href="/stylesheets/old.css"> <![endif]--> <!--[if gte IE 9]> <link type="text/css" rel="stylesheet" href="/stylesheets/new.css"> <!--<![endif]--> <!--[if !IE]><!--> <link type="text/css" rel="stylesheet" href="/stylesheets/new.css"> <!--<![endif]-->

This works well in all modern browsers, and old versions of IE correctly load the old styles. However in old versions of Firefox (3.6) and potentially others, the new css is not loaded and instead --> is printed to the web page. This is because of the line that states !IE - <!--> has to be added, otherwise IE 11 does not load the stylesheet. If I take that out it works properly in Firefox 3.6.

What is the proper way to set up these conditional comments to ensure it will work properly for the various browsers and versions?

Yeah, that seems pretty peculiar. I was able to reproduce the behavior. — BoltClock
– BoltClock, Commented Jan 29, 2015 at 15:52
For modern browsers there should be no comment. So in order for this to put the new.css stylesheet first, outside your [if....] ..  — Caelea
– Caelea, Commented Jan 29, 2015 at 15:54
@Caelea: The comment syntax is required for it to work in IE and for the markup to validate. The comments are set up in such a way that other browsers will read it just fine. If you look at the syntax highlighting of the code you'll see it as well. — BoltClock
– BoltClock, Commented Jan 29, 2015 at 16:08

BoltClock · Accepted Answer · 2015-01-29 16:07:34Z

I believe the problem lies in one of the . The <!--[if gte IE 9]> comment hasn't been terminated yet, so it's actually invalid to have another <!-- delimiter there since it's not possible to nest comments in HTML. While current versions of Firefox behave as expected, I wouldn't be surprised if this was the reason Firefox 3.6 handled it differently.

If you get rid of that, Firefox 3.6 behaves correctly:

<!--[if lt IE 9]> <link type="text/css" rel="stylesheet" href="/stylesheets/old.css"> <![endif]--> <!--[if gte IE 9]> <link type="text/css" rel="stylesheet" href="/stylesheets/new.css"> <![endif]--> <!--[if !IE]><!--> <link type="text/css" rel="stylesheet" href="/stylesheets/new.css"> <!--<![endif]-->

In fact, you can make your code much DRYer by giving your IE9 conditional statement the <!--> treatment, like so:

<!--[if lt IE 9]> <link type="text/css" rel="stylesheet" href="/stylesheets/old.css"> <![endif]--> <!--[if gte IE 9]><!--> <link type="text/css" rel="stylesheet" href="/stylesheets/new.css"> <!--<![endif]-->

This eliminates the extra reference to the "new" stylesheet altogether while still allowing all browsers as well as IE9 to access it. Note that no other version of IE beyond 9 actually supports conditional comments anymore, so you could go further and change gte IE 9 to just IE 9, and it would still work in newer versions of IE (along with other browsers). Of course, you are welcome to keep it that way for the sake of clarity.

On a side note, although I said that it's not valid to have a  is interpreted as <! followed by the end delimiter --> rather than a <!-- followed by a >, which is why that bit is fine.

Collectives™ on Stack Overflow

Conditional comment for !IE breaks for old versions of Firefox

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related