Can anyone explain me the difference between first and second conditional comment syntax?
<!--[if lt IE 8]><html class="no-js lt-ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
Why the second one use use the <!--> syntax before <html> tag? Can I use the following syntax with the same result?
<!--[if lt IE 8]><html class="no-js lt-ie8"><![endif]-->
<!--[if gt IE 8]><html class="no-js"><![endif]-->
Thanks in advance!
No, your second setup will not be the same as your first.
In the first, where <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> is used, it will let all other browsers (the one's that does not understand conditional comments) to have <html class="no-js">, which the second setup won't
Src: https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
General accepted syntax is (was)
open tag : <!--[if condition version]>
end tag : <![endif]-->
Best guess is that its an attempt at a bogus comment. Two dashes after <! make it a comment node in the DOM. Refer this answer
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
^^^^^ ^^^^
||||| ||||
________Bogus Comment________
It doesn't really make any difference. The last one will probably render as a <!-- comment --> or a comment + condition ... not sure.
Related
I have this html line
I am trying to make it so that when IE reads that line, it changes the "listHr" id to "listhrIE".
I have tried this, in an attempt to switch out the line altogeather, but no luck:
<hr id="listHr"></hr> <!--[if IE]><id="listHrIE"></hr><![endif]-->
I am sure I am doing this wrong. What is the correct way of doing this?
Thanks.
IE tags have a "not IE" component.
<!--[if IE]>
<hr id="listHrIE"></hr>
<![endif]-->
<![if !IE]>
<hr id="listHr"></hr>
<![endif]>
However I'd offer a better way to do it would be to just override the style of listHr when IE is detected
As #Paulie_D pointed out: conditional tags are deprecated and won't work for IE 10 and above. You can use a special meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
to force them to work however this is not recommended. See here: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
try these:
<!--[if !IE]><hr id="listHr"></hr><!-->
<!--[if IE]><hr id="listHrIE"></hr><!-->
if you want set this id for some version of IE, you can do this:
greater and equal IE8:
<!--[if gte IE 8]><!-->
less and equal IE8:
<!--[if lte IE 8]><!-->
equal IE8:
<!--[if IE 8]><!-->
You can use IE only conditional tags to detect IE.
Just like:
<!--[if IE ]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->
So, In your case you need two things to change ID.
1) Display IE only ID
2) Hide non-IE ID
To apply IE only ID you need following conditional tag code
<!--[if IE ]>
<div id="listHrIE"></hr>
<![endif]-->
To hide non-IE ID you need to add display:none
<!--[if IE ]>
<div id="listHrIE"></div>
<div id="listHr" style="display:none"></div>
<![endif]-->
Now you can style your IE Only ID in way you want and it will only replace listHr when IE detects.
Update: To target IE 10 Use following jQuery: Before using add jQuery Migrate
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script> This line
to your page<head>
Then add
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
I hope this helps :)
Can I use if lt IE9 in conjunction with if IE 8, in this manner:
<!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
I'm asking since the second condition is contained in the first one, maybe this could cause some glitch in one of the browsers?
Yes it should work fine, and the order doesn't matter, ie will parse all the rules and execute any that matches
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
The above code, does not seem to work in the least bit.
The only IE version that my website(The Randy) seems to work in is IE9. I thought it was working because of the conditional statements I've input above, but it works in IE9 without those statements as well. If I look at it in IE8 and IE7 I get a broken looking website. Any help would be most appreciated.
Conditional comments are not supported in IE 10 and are a bad idea anyway, especially since standards have been set.
You should ALWAYS use feature detection instead of browser detection.
EDIT: Reading the Console helps too:
HTML1513: Extra "<html>" tag found. Only one "<html>" tag should exist per document.
therandy.tk, line 9 character 20
HTML1503: Unexpected start tag.
therandy.tk, line 12 character 1
HTML1512: Unmatched end tag.
therandy.tk, line 245 character 208
HTML1514: Extra "<body>" tag found. Only one "<body>" tag should exist per document.
therandy.tk, line 247 character 1
HTML1519: Invalid nesting. An "<a>" tag should not be placed within another "<a>".
therandy.tk, line 364 character 97
In your markup, you have a <script> tag before your <html> tag opens. That's not valid code, and IE probably doesn't like this. Move that <script> so that it's in your document <head> instead.
I am just about at making my website compatibility, and with IE, the old jerk, I need to use
<!--[if lte IE 8]>
<![endif]-->
However, as "lte IE8" means "equal to or less than IE8", how can IE6 even read this ?
Also, is it lt or lte ?
http://www.quirksmode.org/css/condcom.html refers both, though only lte in it's definition.
Conditional comments are forwards-compatible. IE detects the number after the "IE" token and compares it to its current version. It doesn't have a built-in whitelist "IE7, IE8" or anything. It will work.
To answer one part of your question, which no-one seemed to answer explicitly and I have been trying to figure out ...
is it lt or lte?
Without realising what lt and lte are, you might be unsure which to use, however from reading other comments, I realised that lt = less than and lte = less than or equal to (similary gt and gte are greater than and greater than or equal to), so it depends which versions of IE you want the rule to apply to as to whether you use lt, lte or a combination.
I suppose you can look at it as an expression:
<!--[if expression]> HTML <![endif]-->
Another example would also work:
<!--[if true]> HTML <![endif]-->
About conditions
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
I've never come across something like this, but it looks a bit odd.. I'm used to seeing it more in this format (the previous line in Columnal):
<!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
Firstly, what does the first code sample do? And do I need to worry about the format of it? Thanks
The first basically says: if the browser is greater than IE 9 or not an IE browser, that snipper of code will be used.
I have never seen such formatting before though.
For downlevel-hidden one should use <!--[if expression]> HTML <![endif]-->
For downlevel-revealed this one: <![if expression]> HTML <![endif]>
For more on this, check Microsoft's 'About'.