IE conditional comments not working - html

Why the following code download BOTH 2.0.2 and 1.9.1 in IE8? (actually it's IE9 but in IE8 browser mode)
I am not so sure on the syntax, just copy/paste it from somewhere. But it works as expect on Firefox (only download 2.0.2) and IE9 (only download 2.0.2 as well), but on IE8 (again, IE9 in IE8 browser mode) both files get downloaded.
<head>
<!--[if lt IE 9]>
<script src="{{STATIC_URL}}js/jquery-1.9.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="{{STATIC_URL}}js/jquery-2.0.2.min.js"></script>
<!--<![endif]-->
</head>
BONUS question:
What's the complication if both jquery files are downloaded?

The correct code according to MS is:
<head>
<!--[if lt IE 9]>
<script src="{{STATIC_URL}}js/jquery-1.9.1.min.js"></script>
<![endif]-->
<![if gte IE 9]>
<script src="{{STATIC_URL}}js/jquery-2.0.2.min.js"></script>
<![endif]>
</head>
As you can see the first block is the same. The second block has had some syntax removed that was unnecessary and almost certainly what was confusing things. Additionally it uses the "downlevel-revealed" syntax of conditional comments which will display on everything that doesn't recognise this conditional comment syntax.
Searching for "internet explorer conditional comments" was all that was needed to find this definitive help page: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
On further investigation your original code looks like it was based on that given in http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/ . I would guess therefore that this should work and therefore your problems are more likely coming from your rather interesting test environment which is both IE8 and IE9 at the same time.

Related

Target IE 9 AND less with conditional comments

First off I'm sorry if this has been answered already I just spent 45 minutes trying to find and answer and couldn't come across one that I felt sure about. I'm trying to use flexbox on my site and am trying to target IE 9 AND less for a fallback alternative.
I've seen some hacks and have seen people say to do this:
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="belowIE10.css" />
<![endif]-->
I've seen a lot of people say that doesn't work though. I'm assuming it's because conditional comments were dropped in 10 and internet explorer doesn't understand what lt IE 10 is.
My best guess is checking for less than or equal to 9. I have a mac though and can't actually check this out without something like browserstack.
<!--[if lte IE 9]>
<![endif]-->
Does that work for IE9 and below?
IE10 doesn't understand conditional comments, but that simply means it sees the lt IE 10 and everything else inside as one giant HTML comment, as the syntax highlighting shows.
So there is no difference between <!--[if lt IE 10]> and <!--[if lte IE 9]>: IE10 will ignore both, and IE9 will match both conditions. You could even go with <!--[if IE]> and that wouldn't be any different.

IE Conditional statements in HTML are being removed?

So I'm seeing something quite weird. I'm running Windows 8.1/IE11, not sure if that is important or not.
I've inserted the following html comments. One is pulled straight from the HTML5 boilerplate so I'm sure that's right at least.
When I open up the dev tools, I can see the comments in the DOM in IE11 and with the emulator to IE10. As soon as I go to IE9 or below in the emulator with document mode and user string. All of the conditional IE HTML comments you see below and just the conditional IE comments are for some reason no where to be seen.
Has anyone ever seen anything like that? Have any clue why it might happen? I've searched exhaustively to no avail.
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.PlatformModel.PlatformTitle </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/html5shiv.js"></script>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="~/content/platform/css/ie78.css"/><![endif]-->
<!--[if lt IE 9]>#Styles.Render("~/Content/platform/css/IE78.css")<![endif]-->
<!--// kendo common, kendo theme-->
#Styles.Render("~/Content/kendo-common-styles")
#Styles.Render("~/Content/kendo-theme-styles")
<!--// platform -->
#Styles.Render("~/Content/platform-styles")
<!--// page styles -->
#RenderSection("styles", required: false)
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
You might want to update Windows and install the latest patches. The F12 tools in IE11 at RTM shipped with a bug* where the emulated document modes wouldn't respect conditional comments. That's since been fixed.
* http://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools

Don't load a script in IE8 and below?

This question must be a duplicate, but I can't find the definitive answer on here.
How can I tell the browser not to load a script, if the browser is IE8 or below?
I know about targeting IE9 and above:
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
but then the script does not load in non-IE browsers.
How can I say "load the script if not IE, or if IE and greater than IE8"?
Conditional comment for 'Except IE8'?
<!--[if gte IE 9]><!-->
// Your script here. This will only be loaded if IE version is greater than 8, OR any other browser.
<!--<![endif]-->
Should work?

HTML 5 webpages display hapardzardly in IE8

I recently started developing pages in HMTL 5 and everything works perfectly well in all other browsers except IE. What could be the problem?
Thank you in advance!
IE does not understand the new HTML5 element, you need to include a script that enables those element for IE.
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
More info: html5 shiv
I always use modernizr, it does the same job for you:
Thats because Internet Explorer interprets CSS And the new HTML5 tags differently than other browsers.
See: css-differences-in-internet-explorer-6-7-and-8 on smashingmagazine.com
There is a HTML5 boilerplate available which eliminates some of the crossbrowser differences, but not all: html5boilerplate.com.
Also, in conjunction with the library modernizr you are able to minimize the difference. But while you develop a website, you always do have to check the rendering in all the browsers on which they will appear, because different browsers don't render the same.
Try
<!--[if lt IE 9]>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<![endif]-->
If you are building responsive website you should use
<!--[if lt IE 9]>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<![endif]-->
File you can download from http://www.initializr.com/

HTML Comments to detect IE6 and IE7

<!--[if IE 6]>
I am using IE6
<![endif]-->
That works.
How do I do "or" IE7?
If you, for whatever reason, what to only test for IE6 or IE7, and maybe have some other conditions for IE5 elsewhere, there is also support for other operators:
<!--[if (IE 6)|(IE 7)]>
This is IE 6 or IE 7!
<![endif]-->
Check out the wikipedia article which has better documentation than Quirksmode on this.
you can do
<!--[if lte IE 7]>
I am using IE less than or equal to version 7
<![endif]-->
Have a look at http://www.quirksmode.org/css/condcom.html#link3 for detailed options..
same exact format. just change the ie version. Refer to here.
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx