46

How to detect IE7 with jQuery possibly using jQuery.browser?

Mithun Sreedharan
  • 49,883
  • 70
  • 181
  • 236
  • 6
    Browser detection=code smell – spender Jul 02 '10 at 12:14
  • 1
    Counter-question: what do you need to differently in IE7? – Piskvor left the building Jul 02 '10 at 12:16
  • 3
    @Marcel if you're checking the browser in order to make a page layout or behavior work better, it's OK of a spoofed user agent string defeats the code. It's also OK if a user uses Firebug to edit a page and make all the buttons stop working; it's clearly something they're doing just to entertain themselves :-) – Pointy Jul 02 '10 at 12:27
  • @Pointy – Haha, yeah, you're right about that. :) – Marcel Korpel Jul 02 '10 at 12:45
  • 7
    @spender Welcome to the real world. – Sliq Feb 06 '13 at 15:19
  • @Panique: Yes, real world, but we'd prefer to try feature detection over browser detection, no? – spender Feb 06 '13 at 16:14
  • @spender Hmm... Frontend does not work like that. Unfortuanatly you cannot solve most IE6/7 layout issues in a really clean way. For example, if you re-position something, it's messed up in IE6/7 in most cases. Due to totally buggy/missimplemented css rules that's the only solution to handle css on interactive sites (try margin-changes in ie6/7 via JS. it's horror!). Correct me if i'm wrong... – Sliq Feb 06 '13 at 17:04
  • @Panique You're not wrong really... but in an ideal world... blah blah blah – spender Feb 06 '13 at 17:36
  • @Panique: The problem when using this code is that it is not reliable and may cause an error in the future. Thats very real world. Feature detection just works. – James Westgate Mar 07 '13 at 12:11
  • MSIE string removed from user agent in IE11 - see http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx – James Westgate Jan 09 '14 at 14:11

3 Answers3

70

Got a method 

if ($.browser.msie  && parseInt($.browser.version, 10) === 7) {
  alert('IE7'); 
} else {
  alert('Non IE7');
}

-- update

Please note that $.browser is removed from jQuery 1.9

Mithun Sreedharan
  • 49,883
  • 70
  • 181
  • 236
  • See $.browser in the documentation: "Contains flags for the useragent, read from navigator.userAgent. We recommend against using this property; please try to use feature detection instead (see jQuery.support). jQuery.browser may be moved to a plugin in a future release of jQuery." – James Westgate Jan 19 '12 at 08:58
  • $.browser: Ever since jQuery 1.4, we’ve been evangelizing that browser detection via the user agent string is a bad idea. Yet we’ve been an enabler of bad practice by continuing to offer $.browser. As of jQuery 1.9 we’ll remove it entirely and you’ll need to use the 1.9 compat plugin. – James Westgate Jun 22 '12 at 22:44
  • 2
    This has now been removed from jQuery 1.9 - see alternative below. – James Westgate Jan 18 '13 at 10:05
  • In developer tools of IE, if the document mode is selected as 7 for compatibility check, your code would not catch that, to fix it you can add document.documentmode in your if statement. if ($.browser.msie && (parseInt($.browser.version, 10) == 7 || document.documentMode == 7)) – Hamid Tavakoli Jul 16 '13 at 15:31
52

See $.browser. This feature has been deprecated and you should consider $.support instead.

To answer the question, this is a rock solid technique primarily for use in stylesheets but can also be used easily to check browser version, or best still part of a selector.

  1. Use the following markup (from HTML5 Boilerplate)

    <!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
<head>

  2. Use a selector with hasClass in jQuery

    $('html').hasClass('ie7');
$('html.ie7 .myclass').dostuff();

  3. And use as part of a normal selector in css

    .mydiv {max-height:50px}
.ie6 .mydiv {height:50px} /* ie6 max-height fix */
James Westgate
  • 11,306
  • 8
  • 61
  • 68
  • 3
    @Marcel there are some broken behaviors for which feature detection is really hard to implement. Mostly those are layout bugs. Another example is the problem IE has with varying opacity of images that themselves are PNG images with an alpha channel. How in the world would you "feature detect" that problem? – Pointy Jul 02 '10 at 12:26
  • 2
    @Pointy – Ah, yes, of course, and the hovering problem in IE 6, and… That said, I would use conditional comments to include different chunks of JavaScript code. That's way more reliable than testing the User Agent string. – Marcel Korpel Jul 02 '10 at 12:44
  • 1
    When you're doing code snippets in lists with markdown, code needs to go an extra four spaces to the right :) – Tim Post Jan 19 '12 at 09:10
  • 1
    @Pointy - simples - you place an alpha png over a red square, then you popup a window and ask the user if they see red. If they dont, you have an alpha problem ;) – James Westgate Mar 06 '12 at 09:45
  • 3
    @JamesWestgate Or they have a Red-Green color blindness problem... effects 5-10% of users ;) – James McCormack Nov 22 '12 at 12:17
  • Thanks for the follow up on this, appreciated – williamsandonz Jan 19 '13 at 22:13
  • 1
    This is a great answer. No browser sniffing, making good use of conditional comments in line with HTML5BP. I'll be using this a lot. – Alan Shortis Feb 06 '13 at 14:57
8

All other things considered:

if ($.browser.msie && $.browser.version == 7) {

    //do something

    };

Should work. Whether or not it is the right way to go about things is another question.

ajcw
  • 23,604
  • 6
  • 30
  • 47
Nils
  • 475
  • 6
  • 18