How should I detect the IE browser?

Question

I've already done feature detection on a particular feature to decide if I can use it or whether I have to use a work-around. But, unfortunately, I found that IE has some bugs in that feature that render it useless to me even when it's present. So, even though it passes the feature detection, I need to detect that the browser is IE so I don't use that feature if it's IE.

I've tried to see if I could do feature detection on the actual buggy behavior (which would be best because it would adapt if IE fixes the behavior in the future), but there does not appear to be any way to do that (subject of a different question). That means I'm left with trying to conclusively identify that it's an IE browser so I can avoid the buggy feature. I do not want to use the useragent string since we all know that it is easily spoofed and can easily be wrong.

So, I'd like to do feature detection on whether it's the IE browser or not.

The approach I have so far is this:

var isIE = (document.body.attachEvent && window.ActiveXObject);

This looks to see if the attachEvent() method is present and if ActiveXObject support is present. I had to do more than just the attachEvent check because Opera supports attachEvent.

Is this a reliable way to detect IE? Are there better ways?

Please don't respond with I really shouldn't do browser detection, but should use feature detection instead. I'm already doing feature detection, but that caused a problem because a browser that "supports" the feature and thus passes feature detection turns out to be so buggy that I can't use the feature in that browser. So, now I must detect the buggy browser.

If you want to know more about the specific situation this is being used in, it's described in this other question.

Kex

I get what you're saying about feature detection not working, but really you're just detecting the wrong feature. In the long run, it would probably be more sustainable to test on whatever aspect of that feature IE breaks; in other words, do the thing, see if it screws up the way IE normally screws it up, and if so do your special IE code. If you do things that way, then whenever a future version of IE fixes the bug, your code will automatically do the right thing; with browser detection you'll have to update the code again in the future. – Areta

@Areta - sometimes it isn't possible to measure whether the behavior is performing properly or contains bugs. The specific case I ran into here has to do with how IE handles certain input events as referenced in my question. I would have happily used a feature test if one could be devised, but I could not devise one that worked and I asked a question here on SO and got no help devising one and thus felt I had no other choice but to detect the buggy browser instead. – Kex

Answer 1

Conditional comments conditional compilation, explained here:

http://www.quirksmode.org/css/condcom.html

Or the related cousin found here:

http://www.javascriptkit.com/javatutors/conditionalcompile.shtml

Both are Internet Explorer exclusive, so they will allow you to sniff IE.

<script type="text/javascript">

/*@cc_on
document.write("JScript version: " + @_jscript_version + ".<br>");
   /*@if (@_jscript_version >= 5)
      document.write("JScript Version 5.0 or better.<br \/>");
      document.write("This text is only seen by Internet Explorer browsers that support JScript 5+<br>");
   @else @*/
      document.write("This text is seen by all other browsers (ie: Firefox, IE 4.x etc)<br>");
   /*@end
@*/

</script>

Daylong

It seems like it would include versions of IE that claim to support that version of JavaScript. Is there a way to specify IE version using conditional compilation? Then this would be ideal. – Distemper

This looks promising because unlike the <!--[if lt IE 9]> scheme, this goes in a script file which is what I need. I will try it out. – Kex

Here's a one line version of this idea: dean.edwards.name/weblog/2007/03/sniff – Kex

@Kex A slight improvement to that one-liner, to get around JS minification removing the comment: var isMSIE = eval("/*@cc_on!@*/false"); – Envy

Answer 2

In the linked post, the suggestion of conditional comments was given. This will allow you to detect even the version of IE.

Add something like this in your head:

<!--[if lt IE 9]>
  <script type="text/javascript">
    var lt9=true;
  </script>
<![endif]-->

This is specific to IE, and will be ignored as a comment in other browsers.

For simple detection use something like this:

<!--[if gte IE 6]>
  <script type="text/javascript">
    // this is IE greater than or equal to 6
    var isIE=true;
  </script>
<![endif]-->

Distemper

Although it inserts a global, that's the best answer (yet) – Mcfarlin

You don't have to use a global, it was just the simplest case. It would be better to tack it on to an object you own. – Distemper

You could do something like grab the <body> element and add a class to it. – Zoosperm

Pointy's solution is a common one; I believe modernizr does this, for example. It also simplifies adjusting CSS for IE; you just do .ie9 x { }. – Cammack

Is there a way to use this technique purely from a script file? This is a library function that doesn't have access to the HTML. – Kex

@Kex -- See my comment below. The conditional compilation can run entirely within a Javascript file. – Daylong

I found a way of using this method in a .js file: james.padolsey.com/javascript/…. Doesn't look as simple as the /*@cc_on method in @JeremyJStarcher's answer, but I thought I'd mention it. – Kex

Corrected link: james.padolsey.com/javascript/… for using this method in a .js file. – Kex

Answer 3

Using conditional comments rather than conditional compilation has the advantage of allowing detection of the version of IE (as opposed to JScript version, which is the best you can get from conditional compilation). You can do this from script using innerHTML as follows. The following example shows how to detect IE 8 or lower:

var div = document.createElement("div");
div.innerHTML = "<!--[if lte IE 8]><i></i><![endif]-->";
var isIe8orLower = (div.getElementsByTagName("i").length == 1);

alert("Is IE 8 or lower: " + isIe8orLower);

Be aware that IE 10 and later do not support conditional comments at all. However, conditional compilation continues to work and is the next best option, so I'd suggest using it, although, as mentioned above, it is unable to identify an actual version of IE.

Bedroll