Creating valid conditional comments for stylesheets, without a 'bogus comment' validator error

Question

I have the following in my head tag:

<link rel="stylesheet" href="Scripts/styleMain.css" media="all" type="text/css" />
<![if gte IE 9]><!-->
<link rel="stylesheet" href="Scripts/styleMob.css" media="screen and (max-width:500px)" type="text/css" />
<link rel="stylesheet" href="Scripts/styleDes.css" media="screen and (min-width:501px)" type="text/css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="styleDes.css" type="text/css" />
<![endif]-->

Problem is, the second line is considered a bogus comment, and the second tag on the same line is considered a premature end of comment.

Having the extra tags on that same line, and on the first endif just gives me two bogus comment errors.

Is there any way I can have my stylesheets with conditionals, and get them to validate? Or am I doomed to have invalid code that would nag at my OCD coding?

Answer 1

Your second line has the opening comment delimiter in the wrong place:

<!--[if gte IE 9]><!-->

Notice from the syntax highlighting here that it now highlights correctly as a comment.

The rest of the markup that follows will highlight correctly as well, since the <!--> is now seen as <! followed by -->, rather than <!-- followed by > as it would have been in your invalid markup:

<link rel="stylesheet" href="Scripts/styleMain.css" media="all" type="text/css" />
<!--[if gte IE 9]><!-->
<link rel="stylesheet" href="Scripts/styleMob.css" media="screen and (max-width:500px)" type="text/css" />
<link rel="stylesheet" href="Scripts/styleDes.css" media="screen and (min-width:501px)" type="text/css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="styleDes.css" type="text/css" />
<![endif]-->

The bits of your code that don't highlight as comments will be how IE9 and later as well as other browsers will see your markup. Older IEs will just see your first and last <link> elements.

Answer 2

This should work.

<link rel="stylesheet" href="Scripts/styleMain.css" media="all" type="text/css" />
<!--[if gte IE 9]>
<link rel="stylesheet" href="Scripts/styleMob.css" media="screen and (max-width:500px)" type="text/css" />
<link rel="stylesheet" href="Scripts/styleDes.css" media="screen and (min-width:501px)"   type="text/css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="styleDes.css" type="text/css" />
<![endif]-->