Sometime over the past week, my Windows 7 machine did some updates that, amazingly, included an auto-update of IE10 to IE11. This is great news. This is the first time I’ve heard of any version of IE being pushed out automatically as a “critical” update (which I assume is what it did, since I don’t ever do the optional updates and those don’t happen automatically).
Those who have checked out IE11 have probably noticed a visual overhaul to the developer tools. One particular thing I noticed is that the “document mode” and “browser mode” options that were present in IE10’s tools have now been integrated into something called “Emulation” (which you can open quickly by hitting F12 then CTRL-8).
Evidently, when the IE11 preview was launched, the developer tools did not include this emulation mode. But due to developer outcry, it was added. You can see this in the IE Team’s response in this bug report.
Unfortunately, after testing out Emulation mode in IE11’s developer tools, one glaring problem is the fact that these do not support conditional comments. This is a huge problem for anyone using IE11 in different modes (IE7, IE8, and IE9).
But first, let’s clear something up.
Use VMs, not Emulation
Nobody should depend on IE10 or IE11’s emulation of older versions of IE. They just aren’t reliable. Generally, what I do is use the quick browser/document modes to do some basic CSS layout checks and to ensure my styles are being applied when I use conditionals or hacks to target IE8.
The best option for IE6-10 emulation is Modern.IE’s VMs. So I recommend using those, as do many other devs.
The Bizarre World of IE11’s Emulation Modes
Having said that, the question remains: Why include IE5/7/8/9 emulation, if those emulation modes don’t support conditional comments?
What’s interesting is that the support for CCs seems to be not fully lacking, just really weird. For example:
- If you do just a plain
<!--[if IE ]>, it works fine. - If you make a syntax error in your conditional (e.g.
<!--[if (IE ]>), then the entire comment will appear on the page (was this happening before? Maybe, I don’t know.) - If you do
<!--[if !IE ]>nothing will happen (which is correct), but if you do<!--[if !IE8 ]>(or 5, 7 or 9), the content will appear in any emulated version that supports CCs (not 10), even the version you’re saying “not” to.
So the only thing you can do that works correctly is use “if IE”. I suppose this is better than nothing, because then you could just target the different versions of IE with hacks. But that’s not really the end goal here. In my opinion, the usefulness of the emulation modes is to help with some quick simple checks and then save the big testing for the VMs. At least that’s how I look at it (although I’ve never had the need to use the VMs, personally).
And please take note: This is not about support for CCs in IE11. As was announced some time ago, versions of IE from IE10 and up will no longer support conditional comments.
You can see details about this problem on this bug report on Microsoft’s website. Thanks to Elijah’s response for pointing me to this bug report, so at least we know it’s a known issue.
If anyone has any further info on this, feel free to comment and I’ll update accordingly. Hopefully any future updates to IE11’s developer tools will either fix this problem or remove the emulation mode altogether (which might realistically be a better option for all developers).
And someone had that brilliant idea: Lets have a emulator tool that does not emulate.
I mean, this is a main feature that helped a lot when testing css for IE.
I know how devs recommend the use of VM’s, but the files are too huge, i dont know if is worth to have 4G of files just to use IE.
Well, you know, this is IE. And this is Microsoft. Where things never seem to come together quite right.
Not so much. Things are getting better after all http://blogs.msdn.com/b/ie/archive/2014/04/14/what-s-new-in-f12-with-windows-8-1-update.aspx. Memory diagnostics and debugging with Just My Code are examples of some exclusive features in newer update.
I agree, keeping the emulation modes but losing the CC support is kind of strange.
Having said that, I’ve never been a fan of CCs in the first place (for the same reason I’ve never like hacks — who knows what they’ll do, if anything, in any future browsers). So while it doesn’t make much sense to lose them, I do like the fact that this might discourage people from using CCs and instead use valid, more future-proof code that renders fine in all browsers including old IEs.
“If you make a syntax error in your conditional, then the entire comment will appear on the page. Was this happening before?” Yes, it was!
I’m quite shure. Before IE11 was installed I wrote “IE 8” in a CC instead of “IE8” and saw the CC appearing on the page.
Thanks for your research! I worked on a website and wondered why it looked completely different in IE11’s IE8 mode and in a “real” IE8.
You can (well, could up to IE10) fully rely on emulation when on the same OS as what you’re trying to target. For example: Using IE10 on Windows 7 to emulate IE8 would be a perfect emulation of IE8 on Windows 7.
It would “only” be a near-perfect emulation of IE8 on Windows XP (but I challenge anyone to find more than a few differences).
Them taking out the conditional comment emulation is ridiculous. It’s ridiculous any-time you take tools away from developers regardless of your stance on how those tools should be used. Just about anyone who used HTML5 boilerplate and/or Paul Irish’s super-smart post about how to target old-ie uses conditional comments to add a class to the html tag which then in turn lets you easily target specific browsers.
I’ve personally been using that as well as a conditional comment for jquery (if less than ie9, use the 1.x version, if not, use the 2.x version). Now my sites just completely break when in IE11’s IE8 emulation mode. It’s totally useless to me.
I think MS just wants it to be super-hard to test on older operating systems (try setting up a VM on a non-pro version of windows or with another VM running–it’s a pain in the ass).
I ended up going back to IE10 and will probably stay there indefinitely. I have about 50 sites that use conditional comments and I can’t update each one of them to conform to this new “no conditionals” way of thinking. Setting up 7 VMs (IE8,9,10,11 on all of the OS’s that those are available on) just isn’t realistic.
Actually, there are slight differences when emulating a older browser, even though it takes environment into account, there are still differences in supporting features, like images as base64 strings, in emulation, the image will show, even though the original browser did not support it.
Emulation is a good tool for many things, but to be 100% sure its the real deal, test using VM.
I’ve personaly never used emulation mode, as i see no point in trying to force the engine to do something buggy from another buggier version.
My options of choise are:
1. Using ietester, a free program that contains various versions of ie, it gives me the browser i need in the pc i have, realy usefull for layouts and the like.
2. Testing in real computers or vms.
3. using a service like browserstack
Microsoft wants us to stop sniffing the user agent, and lean more towards feature detection.
How about using Modernizr to check what the browser can do, and by that detect the browser. Browsing http://www.caniuse.com for features, gives you an easy way to find which feature you want to react on.
Modernizr.mq() returns true/false depending on whether the browser supports CSS Media Queries or not. Seeing http://caniuse.com/#feat=css-mediaqueries tells me which browser this feature is supported by, I can conclude that my detection targets “<IE9”.
It should be noted that using
Modernizr.mq('only all')works slightly better than leaving out the Media Query string.As if depending on JS to load CSS is the better option, feature detection is an annoyance. I don’t like any of this Tom Foolery, but getting this on render of the page is much better than waiting on Window.load to finish for a script to fire. It would be nice if Microsoft would build a compliant browser and quit putting of product issues on developers.
Sort of obvious, but those using Paul Irish’s trick or HTML5 boilerplate, *and* have jquery and jquery-migrate, you could add
if ($.browser.msie) {
if ($.browser.version<9) $(‘html’).addClass(‘lt-ie9’);
if ($.browser.version<8) $(‘html’).addClass(‘lt-ie8’);
if ($.browser.version<7) $(‘html’).addClass(‘lt-ie7’);
}
$2c,
*-pike
jQuery’s $.browser method uses user agent sniffing, so you wouldn’t need to use Paul Irish’s conditional classes. They are two completely different methods. And I would say this is a really bad idea because I don’t agree with browser sniffing other than in really really rare cases where there is no other option.
Louis, remember this is in compatibility mode only – conditional comments still correctly effect the targeting browser, just not the emulation of the previous browser in IE11. (end users don’t go browsing the internet in ie8 emulation mode from IE11) – we’re talking for your own testing/development purposes only so whatever gets the job done.
I’ve written a small tool to improvise conditional comments in IE11 for my own testing purposes – https://github.com/johnnyfaldo/conditionizr/blob/master/README.md in case anyone will find it useful
Ah, that’s a good point… And thanks for the script, I’ll have to check it out.
There is a definite problem with CCs in the IE-Edge (11) Dev tools when emulating lower versions. I have noticed that when declaring just “is this IE” [if IE], it works. So does checking for greater than a version, [if gt IE 8]. What fails is when I try to target “less than” a version [if lt IE 9]. The comment is not visible nor is the content within the comment. I have verified this on several sites, on being quirksmode.org.
Please “Microsoft” just keep up with the rest of the guys and make every designers life easier. Just make sure you dont fall behind on css3 and html5 rendering and invest your money into quality browser framework. I look forward to an IE version that does not require any updating and works just like Chrome!
The reason for this is the removal of “browser mode”. In IE9 and IE10 you could set both the “document mode” and “browser mode”. The “browser mode” did much more to make it actually behave like that browser, so it was quite useful for testing. Just setting the “document mode” is pretty useless. Conditional comments work just as they’re supposed to work, it just doesn’t match “IE8” or whatever you selected for “document mode” because you’re technically still in IE11 “browser mode”. Try
<!--[if IE11]>and you’ll see that it matches.No, you’re confusing the issue here. Yes, you seem to be right about the browser mode vs. document mode, but the fact that the CC works in IE11 has nothing to do with CCs working. IE stopped supporting CCs in IE10. See:
CC’s no longer supported in IE10+
So when it sees the IE11 CC, it’s just an HTML comment and nothing more. What’s in between will still work because that’s how it’s supposed to work. It sees all content that’s not inside of comments.
Yeah, they are no longer supported in IE10+, but they ARE supported when in emulation mode. The strange behavior you see is because it matches as IE11 and not the document mode that you selected. So if you do this:
NOT IE<!–
You get NOT IE when simply viewing in IE 11, but you get IE 11 when you use emulation and set the document mode to 9 or earlier. So they are definitely working, just not in a useful way.
Damn, that didn’t display right. Maybe this will work:
<!--[if IE 6]>IE 6<![endif]-->
<!--[if IE 7]>IE 7<![endif]-->
<!--[if IE 8]>IE 8<![endif]-->
<!--[if IE 9]>IE 9"><![endif]-->
<!--[if IE 10]>IE 10<![endif]-->
<!--[if IE 11]>IE 11<![endif]-->
<!--[if !IE]>-->NOT IE<!--<![endif]-->
For some checks I added the user agent “MY IE8” and in my header I verify if the user agent is “MY IE8” on PHP so add the script or css.
After the April update, the emulation mode of the relevant versions support conditional comments, it was just a bug, not an intended omission.
Thanks, good to know, but do you have a source for that?
http://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools
It mistakenly says “Active” when it is in fact fixed (look at the second shown comment).
I also just verified it with Internet Explorer 11 on Windows 7 and its Developer Tools, using the code in http://www.impressivewebs.com/ie11-emulation-conditional-comments/#comment-42716
Great, thank you!