{"id":17386,"date":"2017-04-26T03:01:23","date_gmt":"2017-04-25T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17386"},"modified":"2017-04-13T14:05:25","modified_gmt":"2017-04-13T04:05:25","slug":"html-internet-explorer-conditional-comment-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-internet-explorer-conditional-comment-primer-tutorial\/","title":{"rendered":"HTML Internet Explorer Conditional Comment Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/conditional_ie.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/PHP Timezone Feed Trip Planner Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/conditional_ie.jpg\" title=\"HTML\/PHP Timezone Feed Trip Planner Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML Internet Explorer Conditional Comment Primer Tutorial<\/p><\/div>\n<p>When writing HTML code there is a means by which you can differentiate &#8230;<\/p>\n<ul>\n<li>external Cascading Style Sheets &#8230; and &#8230;<\/li>\n<li>HTML elements<\/li>\n<\/ul>\n<p> &#8230; as to whether they will be considered by an Internet Explorer browser, of any version.<\/p>\n<p>The method we refer to is known as &#8220;Conditional Comments&#8221; and goes as below, where you should think &#8220;comment in&#8221; (rather than how programmers think for a lot of other coding, to &#8220;comment out&#8221;), to remain on the good side of the W3C <a target=_blank title='W3C Markup Validation Service\" href='https:\/\/validator.w3.org'>Markup Validation Service<\/a> &#8230;<\/p>\n<ol>\n<li>To &#8220;<b>comment in<\/b>&#8221; some HTML for Internet Explorer only &#8230; example from the RJM Programming <a target=_blank title='RJM Programming landing page' href='http:\/\/www.rjmprogramming.com.au\/'>landing page<\/a> &#8230;<br \/>\n<code><br \/>\n<b>&lt;!--[if IE ]&gt;<\/b><br \/>\n               &lt;a href=\"http:\/\/www.rjmprogramming.com.au\/Joomla\/Joomla-vTiger-CommunityBuilder-EarlyDays-CRMLead.jpg\" target=\"_blank\"&gt;<br \/>\n               &lt;img src=\"Welcome_files\/shapeimage_2.jpg\" title=\"Integrating vTiger CRM with Joomla CMS (includes VirtueMart eCommerce, Community Builder, vTiger forms)\" alt=\"Integrating vTiger CRM with Joomla CMS (includes VirtueMart eCommerce, Community Builder, vTiger forms)\" style=\"border:0; height: 167px; left: 0px; margin-left: 0px; margin-top: 0px; position: absolute; top: 0px; width: 265px; \" \/&gt;<br \/>\n               &lt;\/a&gt;<br \/>\n<b>&lt;![endif]--&gt;<\/b><br \/>\n<\/code>\n<\/li>\n<\/li>\n<p>To &#8220;<b>comment in<\/b>&#8221; some HTML for web browsers other than Internet Explorer only &#8230; example from the RJM Programming landing page &#8230;<br \/>\n<code><br \/>\n<b>&lt;!--[if !IE]&gt;--&gt;<\/b><br \/>\n&lt;iframe id='topi' style=\"margin-top:-134px; margin-left:-10px; height: 167px; left: 12px; position: relative; top: 136px; width: 264px; z-index: 11; \"  src='\/PHP\/PieChart\/postitphp.php?nowait=y' title='Google Chart Pie Chart form post method'&gt;&lt;\/iframe&gt;<br \/>\n<b>&lt;!--&lt;![endif]--&gt;<\/b><br \/>\n<\/code>\n<\/li>\n<li>To &#8220;<b>comment in<\/b>&#8221; the linking to some external Cascading Style Sheet file for Internet Explorer only &#8230; example from the RJM Programming landing page &#8230;<br \/>\n<code><br \/>\n<b>&lt;!--[if IE]&gt;<\/b>&lt;link rel='stylesheet' type='text\/css' media='screen,print' href='Welcome_files\/WelcomeIE.css'\/&gt;<b>&lt;![endif]--&gt;<\/b><br \/>\n<\/code>\n<\/ol>\n<p>This is a mechanism you can use in HTML which is separate to any Javascript approach you can prefer to use, to achieve similar results with other ideas.  Generally speaking, it would be better though, fairly obviously, to write HTML that works across the web browsers, in all versions.  Probably the reason this &#8220;Conditional Comments&#8221; syntax (and here we&#8217;d like to thank the <a target=_blank title='Conditional HTML comments information useful link' href='http:\/\/www.sitepoint.com\/web-foundations\/internet-explorer-conditional-comments\/'>Sitepoint<\/a> website for great help here) exists though, is because it is very hard to achieve the more complex HTML element coding, that works in all web browsers in all versions, let alone across all platforms, in the sense that mobile platforms are becoming more and more popular.  We have particularly found this to be the case with HTML media element usage.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d17386' onclick='var dv=document.getElementById(\"d17386\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=cross-browser\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17386' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When writing HTML code there is a means by which you can differentiate &#8230; external Cascading Style Sheets &#8230; and &#8230; HTML elements &#8230; as to whether they will be considered by an Internet Explorer browser, of any version. The &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-internet-explorer-conditional-comment-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[275,576,622,997,1319,1358,1395],"class_list":["post-17386","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-cross-browser","tag-html","tag-internet-explorer","tag-programming","tag-tutorial","tag-validation","tag-w3c"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17386"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=17386"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17386\/revisions"}],"predecessor-version":[{"id":17391,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17386\/revisions\/17391"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}