Detecting IE6 using jQuery.support

Question

Anyone have any ideas on how to test for something specific for IE6 (and not IE7) using jquery.support?

My problem is that IE6 supports :hover psuedo-class only for anchor elements and IE7 does support it for all elements (as FF, Chrome, etc). So I want to do something special in case the browser does not support :hover for all elements... thus I need a way to test for this feature. (don't want to use jQuery.browser). Any ideas?

Solution 1

While it's good practice to check for feature support rather then user agent, there's no simple way to check for something like support of a css property using JavaScript. I recommend you either follow the above posters suggestion of using conditional comments or use jQuery.browser. A simple implementation (not validated for performance or bugs) could look like this:

if ($.browser.msie && $.browser.version.substr(0,1)<7) {
  // search for selectors you want to add hover behavior to
  $('.jshover').hover(
    function() {
      $(this).addClass('over');
    },
    function() {
      $(this).removeClass('over');
    }
}

In your markup, add the .jshover class to any element you want hover css effects on. In your css, add rules like this:

ul li:hover, ul li.over { rules here }

Solution 2

You can use a Microsoft Internet Explorer specific Conditional Comment to apply specific code to just IE6.

<!--[if IE 6]>
  Special instructions for IE 6 here... e.g.
  <script>...hook hover event logic here...</script>
<![endif]-->

Solution 3

Thickbox uses

if(typeof document.body.style.maxHeight === "undefined") {
    alert('ie6');
} else {
    alert('other');
}

Solution 4

This is one example of where we should take a step back and ask why you're doing that.

Typically it's to create a menu. If so I highly suggest you save yourself some headaches and use a plug-in like superfish or one of the many alternatives.

If not I suggest you use the jQuery hover() event listener. For example:

$("td").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

will do what you want.

Solution 5

Just for fun (not using jQuery.support):

$(document).ready(function(){
    if(/msie|MSIE 6/.test(navigator.userAgent)){
        alert('OMG im using IE6');
    }
});

You can also do it via php

<?
if(preg_match('/\bmsie 6/i', $ua) && !preg_match('/\bopera/i', $ua)){
    echo 'OMG im using IE6';
}
?>

View more solutions

Comments

[Jaime]

Yes, that is exactly my problem :), I want yo user the hover() event but only when is <IE6 if not use css:hover since it's much faster and realiable

[Jaime]

This is probably the best option, just wondering if anyone had another way to do it... since the jquery doc says "jQuery comes with a number of properties included, you should feel free to add your own.". Thank anyway

[Jaime]

This is what I ended up with too. Just wanted to know if there was a better way to do it

[Jaime]

I'm doing a custom dropdown list with potentially a lot of items, so I want to use the jquery.hover event in case is <IE6 and use the css:hover for browsers that support it (since its faster). But you're probably right in saying that I should step back and re-think how I'm doing it.

[Sampson]

You really shouldn't use $.browser - it's deprecated.

[Jaime]

@Jonathanl: Exactly... so what should I user for this?

[Lordn__n]

Is the speed of :hover an issue? To put it another way: is it worth the complexity cost of supporting a mixed solution?

[FriendOfFuture]

As I said, this is a case where pragmatism has to be balanced against best practices. You have a particular version of a particular browser that doesn't support a particular CSS feature. Check for ie6, apply your solution and move on. '\v'=='v' works fine btw.

[Jaime]

Good question, probably not, it just feels a bit sluggish using the hover event

[Lordn__n]

Your requirements may vary but my general stance on IE6 is this: it just needs to be functional. It doesn't need to be perfect. It shouldn't have any glaring faults but it just needs to work.

[Lordn__n]

-1 This is deprecated behaviour and no longer supported in jQuery 1.3.

[Jaime]

@cletus: Again... this is exactly the original question... since .browser is deprecated, how should you approach this?

[Jaime]

@cletus: My problem is that 90% of my users use IE6 (SaaS enterprise App in Mexico) so if I don't work to make their experience work smoothly, I'm shooting myself in the foot.

[Adam Lassek]

I have to agree with @jaimedp; deprecating $.browser without providing an adequate alternative feels like a step backwards. If you can't detect a css feature or bug with feature detection, you have to do browser detection of some kind.

[Jeff Meatball Yang]

Goodness, the down voting is harsh. Fine, don't use $.browser, just good old conditional comments: <!--[if IE 6]> Special instructions for IE 6 here <![endif]-->

[Admin]

Sorry, couldn't resist: 'That was a joke, haha, fat chance"

[Andrew G. Johnson]

scunliffe's answer is better as it works for all IE6 users as opposed to simply IE6 users with Javascript enabled.

[user3167101]

Has it been removed, or just deprecated? Also, instead of the substr(), could parseInt($.browser.version, 10) be cleaner? They'll both return the same number, correct?

[Tommy Andersen]

I can't help to wonder: if ($.browser.msie && $.browser.version.substr(0,1)<7) if this code is used (which I don't think is a good way of doing it). What happens when version 10 hits the shelf. The substr will return 1 which is less than 7 obviously. Instead you should use the parseInt as alex suggested.

[FriendOfFuture]

Definitely would be an issue Tommy, hence my "(not validated for performance or bugs)" disclaimer. For this particular instance conditional comments might be an acceptable solution.

[John Liu]

eval("$.browser.version < 7") let javascript worry about string parsing.

[Phill Pafford]

so far the best option +1, Related: stackoverflow.com/questions/8931729/…

[teynon]

For future users, jquery 1.9 has removed $.browser and this answer will not work for that situation.

[KyleFarris]

This won't work if you're loading scripts dynamically or running code on dynamically-created elements (modals, for instance).

[scunliffe]

@KyleFarris depends... you can check for IE6 with the conditional comment and if you meet that condition, set up jQuery handlers as needed for all existing DOM elements and future elements using a .live() handler (in jQuery up to v1.8) or the preferred .on() from jQuery 1.7+ api.jquery.com/on

[Synchro]

You missed the point of the question - $.browser no longer exists in jQuery.