conditional comments in html

Question

could you please tell me where is the mistake. I cant see any text in conditional comments in any browser.

web.html
<!DOCTYPE html>
<html lang="en-US>
<head>
    <meta charset="utf-8" />
    <link href="style.css" type="text/css" rel="stylesheet" />
<head/>
<body>
    <!--[if !IE]>
        <p><span class="p-style">XXXXXXXXXXXX</span></p>
    <![endif]-->

    <!--[if IE]>
        <p><span class="p-style-IE">YYYYYYYYYYYYY</span></p>
    <![endif]-->
</body>
</html>

style.css
.p-style {
    color:red;
}

.p-style-IE {
    color:green;
}

Thank you.

Jinu Kurian · Accepted Answer · 2015-11-15 09:14:51Z

4

Browsers other than IE treat the conditional statements as comments because they're enclosed inside comment tags.

<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->

However, when you're targeting a browser that is NOT IE you have to use 2 comments, one before and one after the code. IE will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-IE browsers is therefore:

<!--[if !IE]-->
IE ignores this
<!--[endif]-->

Your code has some problems and I corrected them. Check with IE9 and other browsers. Now its working fine except in IE10 and higher (cuz IE10 and above no longer support conditional tags)

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8" />
    <link href="style.css" type="text/css" rel="stylesheet" />
<head/>
<body>
	<p><span class="p-style">XXXXXXXXXXXX</span></p>
	<p><span class="p-style-IE">YYYYYYYYYYYYY</span></p>
	    <!--[if IE]>
	 		<style>
				.p-style {color:red;}
				.p-style-IE {display: none;}
			</style> 
		<![endif]-->
		<!--[if !IE]><!-->
			<style>
				.p-style {display: none;}
				.p-style-IE{color:green;}
			</style> 
	 	<!--<![endif]-->
</body>
</html>

Update : For IE10 and IE11,

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

we create a media query using -ms-high-contrast, in which you place your IE10+ specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE10+), it will only be parsed in Internet Explorer 10 and greater.

edited Nov 15, 2015 at 9:14

answered Nov 14, 2015 at 10:35

Jinu Kurian

9,5263 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

M_V Over a year ago

Thank you for your answer. Is there some way to write code especially for IE10 or Microsoft Edge? I have code which works fine with Mozilla, Chrome and Opera but some elements are a little bit shifted in Explorer and Edge. I dont know how to resolve it.

M_V Over a year ago

Thanks and if somebody looks for Microsoft Edge hack, this works _:-ms-lang(x), _:-webkit-full-screen, .selector { property:value;}

Collectives™ on Stack Overflow

conditional comments in html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related