{"id":357,"date":"2007-04-17T14:11:02","date_gmt":"2007-04-17T20:11:02","guid":{"rendered":"http:\/\/blog.codedread.com\/archives\/2007\/04\/17\/how-to-use-ie-conditional-comments-in-xhtml\/"},"modified":"2007-04-17T14:11:02","modified_gmt":"2007-04-17T20:11:02","slug":"how-to-use-ie-conditional-comments-in-xhtml","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2007\/04\/17\/how-to-use-ie-conditional-comments-in-xhtml\/","title":{"rendered":"How To Use IE Conditional Comments in “XHTML”"},"content":{"rendered":"

There's a lot going on in the HTML Working Group mailing list right now about opt-in mechanisms for HTML5, discussions with smart people like Chris Wilson (co-chair and Microsoft IE champion) and Ian Hickson (WHATWG champion). I've going to sidestep the polemics for now - I've been trying to distill my own thoughts on that big debate, but things are still swirling around in my head because I'm still learning about the history of HTML, quirks mode, standards mode, DOCTYPEs, etc. Instead, I'm just going to write a (hopefully) quick entry on something I just figured out today. <\/p>\n

<\/object><\/div>\n

If you are a web developer, I am sure you are very familiar with how difficult it can be to get the Internet Explorer browser to display your web pages correctly and still use web standards that are implemented more properly by other browsers. Many hundreds of people wish that this were not so, but it's an ugly fact in web development today. IE includes a clever little feature called \"Conditional Comments<\/a>\" that can allow you to select what elements on your page are displayed for certain versions of IE. I wish that Conditional Comments were not necessary (because they muckify my markup), but that is the state things are in right now.<\/p>\n

The traditional way of explaining this is by some examples:<\/p>\n

\n
\n<!--[if IE]>\n  <p>Only IE will display this paragraph<\/p>\n<![endif]-->\n<\/pre>\n<\/div>\n
Figure 1 - Conditional Comments for IE<\/span><\/p>\n
If you know your HTML (especially how HTML comments work), then it should be pretty obvious that the whole code above looks like one big comment, meaning that it will not be displayed.  However, IE treats the square brackets differently by displaying the code between [if IE]<\/i> and [endif]<\/i> as code that it should display.<\/p>\n
So that's how to include code only for IE and exclude code from other browsers.  Now how to do the reverse:<\/p>\n
\n
\n<![if !IE]>\n  <p>All browsers except IE will display this paragraph<\/p>\n<![endif]-->\n<\/pre>\n<\/div>\n
Figure 2 - Conditional Comments for Other Browsers (The Wrong Way)<\/span><\/p>\n
In HTML browsers, the above code displays in every browser except IE (which will ignore everything between [if !IE]<\/i> and [endif]<\/i>).  It seems to rely on some de-facto implementations where anything between <!<\/i> and ><\/i> is ignored by browsers as if it was a comment.  The problem is that the above is not valid XHTML (comments in XHTML are anything between <!--<\/i> and --><\/i>).<\/p>\n
This is how I was feeding SVG<\/a> to IE (in an <embed><\/i> element) and other browsers (in an <object><\/i> element).  However, it always rankled me that my pages wouldn't validate as XHTML as a result of the conditional comments.<\/p>\n
Then, I was reading this aging article<\/a> by Mark Pilgrim<\/a> and found an example of valid \"downlevel-revealed\" comments (as Microsoft calls them):<\/p>\n
\n
\n<!--[if !IE]>-->\n  <p>All browsers except IE will display this paragraph<\/p>\n<!--<![endif]-->\n<\/pre>\n<\/div>\n
Figure 3 - Conditional Comments for Other Browsers (The Right Way)<\/span><\/p>\n
NOTE: It took me some time to figure this out because I was putting spaces between [if !IE]><\/i> and --><\/i> and between [endif]<\/i> and --><\/i>.  Make sure there are no spaces and things should work.  Here's a test page<\/a> so you can see how things work.  There should be 4 paragraphs displayed in every browser.<\/p>\n
In fairness, after I started writing up this entry, I found that several<\/a> other<\/a> people<\/a> had already discovered this.<\/p>\n
Anyway, I know the other debate out there.  The one about how XHTML is not worth the trouble and can be harmful if served as text\/html, but I've already written too much today to get into that \ud83d\ude09<\/p>\n
<\/object><\/div>\n","protected":false},"excerpt":{"rendered":"
There’s a lot going on in the HTML Working Group mailing list right now about opt-in mechanisms for HTML5, discussions with smart people like Chris Wilson (co-chair and Microsoft IE champion) and Ian Hickson (WHATWG champion). I’ve going to sidestep the polemics for now – I’ve been trying to distill my own thoughts on that […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,25,11,14,28,30],"tags":[],"class_list":["post-357","post","type-post","status-publish","format-standard","hentry","category-microsoft","category-software","category-technology","category-tips","category-web","category-xml"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=357"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/357\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}