Jump to content

Conditional Statement in HTML Comment


terryds
 Share

Recommended Posts

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....
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 by terryds
Link to comment
Share on other sites

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]-->
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...