How to do browser detection with jQuery 1.3 with $.browser.msie deprecated?

Question

How should browser detection be done now that jQuery 1.3 has deprecated (and I'm assuming removed in a future version) $.browser.msie and similar?

I have used this a lot for determining which browser we are in for CSS fixes for pretty much every browser, such as:

$.browser.opera
$.browser.safari
$.browser.mozilla

... well I think that's all of them :)

The places where I use it, I'm not sure what browser issue is causing the problem, because a lot of times I'm just trying to fix a 1 px difference in a browser.

Edit: With the new jQuery functionality, there is no way to determine if you are in IE6 or IE7. How should one determine this now?

Solution 1

I was facing something similar, there's no $.support.png (p.ej.), so I need to use the $.browser.version yet, maybe we can just keep asking for more $.support.XXXX properties, as much as needed.

Solution 2

Yes, the browser detection has been deprecated, but the deprecated properties probably won't be removed from jQuery anytime soon. And when they will be removed, if you still absolutely need to do browser detection, you can add the same functionality easily with a small, simple plugin.

So, my answer is to do nothing about it, for now :)

edit: I'll even provide you with a plugin to use in the future (not tested, copy-pasted from jquery source):

(function($) {
    var userAgent = navigator.userAgent.toLowerCase();

    $.browser = {
        version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
        safari: /webkit/.test( userAgent ),
        opera: /opera/.test( userAgent ),
        msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
        mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
    };

})(jQuery);

Solution 3

.browser has been deprecated in favour of .support. More information over here: jquery.support What this essentially means is that instead of using browser sniffing, jquery now does feature support detection and allows for much finer grained control over what the browser can do.

From the description:

Added in jQuery 1.3 A collection of properties that represent the presence of different browser features or bugs.

jQuery comes with a number of properties included, you should feel free to add your own. Many of these properties are rather low-level so it's doubtful that they'll be useful in general day-to-day development, but mostly used by plugin and core developers.

The values of all the support properties are determined using feature detection (and do not use any form of browser sniffing)

Solution 4

feature support sounds a good idea, BUT it will only work as is intended when it supports all possible "bugs". Like the first commenter, there is no $support.png, or a $support.stepping, or a $support.peekaboo, or a, oh, the list goes on. The problem with this is that some code to make one browser compliant will inevitable end up being executed by a browser that does not need it.

Solution 5

Browser detection isn't deprecated in jQuery. Doc page for jQuery.browser, which states:

We recommend against using this property, please try to use feature detection instead (see jQuery.support).

Deprecation means "slated for future removal." This advice about sniffing for capabilities rather than user agents is just good general advice, and not specific to jQuery. All they're saying is they're making it easier to do the right thing.

There's always going to be a need for user agent sniffing however. Unless jQuery.support is updated daily by an army of developers, there's just no way it can keep up with every bug and every feature in every minor point version of every browser.

I think the confusion about this arose from the fact that, internally, jQuery no longer does browser sniffing. But the utility API jQuery.browser will continue to exist.

View more solutions

Comments

[Ray Booysen]

I think the question is why do you need to determine between IE6 and IE7?

[penetra]

Because the site works in all browsers except IE with just a bit of tweaking for all IE browsers, but in IE6, it completely breaks with things positioned in completely the wrong spots. I'm using a valid doc type and all the rest.

[Lordn__n]

To be brutally honest: you're doing something wrong if it breaks that badly in IE6.

[annakata]

Surely this is a CSS problem not a JS one. And come to that why can't you just, y'know, write some JS to do this?

[user1320301]

For what it's worth, there are some display bugs in ie6 that one has to compensate for that don't happen in any other browser, such as positioning a div over a select box. IE6 detection is useful for putting in something like an iframe hack to hide the select boxes.

[seanmonstar]

@cletus to be brutally honest, IE6 is such a piece of crap that bizarre bugs can cause radical positions and "hopping" with perfectly fine CSS

[penetra]

Yes, I know this, but my question is what do I do now?

[Lordn__n]

You check for the features you need not th ename of the browser.

[penetra]

All IE browsers are the same and all other browsers are the same, although things appear differently.

[penetra]

Wow, I can't believe how many people have decided not to support IE6. Of all of my corporate clients, only 2 (out of 10) have moved to IE7 and that's 2 years after IE7's release. I hate it, but it's reality, corporate clients don't trust IE7 yet.

[Lordn__n]

I can understand not trusting IE7. I can't understand it in the context of trusting IE6 however. :)

[Michael Stum]

I think that's the correct way. It's not important if you're running IE or Firefox - the important questions are "Does it support transparent PNGs?" or "Is it's Box model broken?"

[Neil Fenwick]

It might be important to know which browser if you want to display relevant screenshots though...

[rfunduk]

@MedicineMan: Like any jQuery plugin, include it in your page somewhere and you now have the methods $.browser.msie and so on. As kkyy says this exists (even in 1.3 and 1.4) in the jQuery source code so check that out (I recommend reading the whole thing, very enlightening). You may want to get the updated version from jQuery 1.4 anyway because it normalizes safari/chrome/etc to $.browser.webkit

[rfunduk]

This is unnecessary because the code still exists and is perfectly usable in jQuery 1.3 (and 1.4).

[BuddyJoe]

thought they went down the whole "features" route?

[CRice]

They also state "The $.browser property is deprecated in jQuery 1.3, but there are no immediate plans to remove it."

[neoswf]

Liked it very much. Thank you!