terryds Posted December 16, 2013 Share Posted December 16, 2013 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 More sharing options...
Ingolme Posted December 16, 2013 Share Posted December 16, 2013 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 1 Link to comment Share on other sites More sharing options...
terryds Posted December 16, 2013 Author Share Posted December 16, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted December 16, 2013 Share Posted December 16, 2013 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]--> 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now