All geek questions in one place

Creating valid conditional comments for stylesheets without error checking "dummy comments"

My header has the following:

<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 problem is that the second line is considered a fictitious comment, and the second tag on the same line is considered the premature end of the comment.

The presence of additional tags on the same line and on the first endif just gives me two errors of dummy comments.

Is there a way I can have my style sheets with conditional expressions and get them to check? Or am I doomed to have the wrong code that could stick my OCD encoding?

+4
source share
2 answers

Your second line has a comment separator to open in the wrong place:

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

Pay attention to the syntax highlighted here, that now it is correctly highlighted as a comment.

The rest of the markup, which will be given below, will also be displayed correctly, since <!--> now considered as <! followed by --> , not <!-- , followed by > , as it would be 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]-->

Bits of your code that do not stand out as comments will be like IE9 and later, and other browsers will see your markup. Old IEs just see your first and last <link> elements.

+7
source

That 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]-->
0
source

Source: https://habr.com/ru/post/1489916/

More articles:


All Articles