Conditional Statement in HTML Comment

[terryds]

I see that if we want to use html5shiv, we should use :

 

<!--[if lt IE 9]><script src="dist/html5shiv.js"></script><![endif]-->

 

And, i see this snippet on http://css-tricks.com/responsive-data-tables/ :

 

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

<style> /* table-related media query stuff only */ </style>

/* Or an external stylesheet or whatever */

<!--<![endif]-->

 

I see the conditional 'if' statement appears in a square bracket in the html comment...

 

My questions are

 

1. Is it actually HTML comment ? I am doubt about it because HTML comment tag should be <!-- comment -->...

2. Will the conditional statement be understood by the browser though it is in the HTML comment ?

3. The second of my example (responsive data table snippet) has a complicated HTML comment...

I don't understand what that means...

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

<!--<![endif]-->

4. Is there any site that gives a tutorial for this case ? I wonder if there are more statements that can be put in HTML comment...

Thanks for any answers....

[Ingolme]

Conditional comments are actually just comments. Normal browsers do absolutely nothing with them. They see it like this:

<!--[if lt IE 9]><script src="dist/html5shiv.js"></script><![endif]-->

 

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

<style> /* table-related media query stuff only */ </style>

<!--<![endif]-->

 

Meanwhile, Internet Explorer will look at the comments and will decide whether or not to do something with them. Conditional comments only work in Internet Explorer and are designed to look like an HTML comment to other browsers. You can learn more about conditional comments at Microsoft's developer website: http://msdn.microsoft.com/en-us/library/ms537512%28vs.85%29.aspx

[terryds]

Why should we use

 

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

<style> /* table-related media query stuff only */ </style>

/* Or an external stylesheet or whatever */

<!--<![endif]-->

instead of

<!--[if !IE]>

<style> /* table-related media query stuff only */ </style>

/* Or an external stylesheet or whatever */

<![endif]-->

?

Edited December 16, 2013 by terryds

[Ingolme]

Because in the second case, the comment is blocking out the code for the rest of the browsers. Ignoring the [if !IE] part, it looks like this:

<p>Some HTML code</p><!-- A comment --><p>More HTML code</p><!--<style> /* table-related media query stuff only */ </style>/* Or an external stylesheet or whatever */-->

Which is simply commented code that doesn't do anyhting.

 

In the other case:

<!--[if !IE]><!--><style> /* table-related media query stuff only */ </style>/* Or an external stylesheet or whatever */<!--<![endif]-->