jQuery browser detection?

Is there a good way to detect if the user's browser is Internet Explorer using jQuery?

I have an issue with PNG graphics using IE and want to swap them for GIF's only if the user is v开发者_运维问答iewing the site with IE.

You can using $.browser, yes, but it's a bad idea to use browser detection:

if($.browser.msie) { /* IE */ }

A better option for instance would be $.support which is feature detection, like this:

if(!$.support.opacity) { /* IE 6-8 */ }

$.support.opacity is false in browsers that don't support opacity in styling (though IE 7-8 handle transparent PNGs file, so this still isn't ideal, depending on what you're after...personally I think you'd be giving IE 7/8 users a sub-optimal experience).

What you should really do is target IE6 which doesn't support transparent PNGs (without an alpha filter), like this:

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="IE6ImageStyles.css">
<![endif]-->

Yes, you can, but they prefer you to use jQuery.support: http://api.jquery.com/jQuery.support/.

In this case, use jQuery.support.opacity.

Edit: assuming this is about opacity, of course.

$.browser has been removed in 1.9 as it's now suggested feature detection was preferred via $.support

For better browser detection jQuery strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support or the deprecated jQuery.browser (removed since v1.9)

$.browser.webkit
$.browser.safari
$.browser.opera
$.browser.msie
$.browser.mozilla

if ($.browser.msie) {
        //do something
}
else if ($.browser.mozilla) {
        //do something else
}

works with jQuery 1.3

Check out the $.browser function.

To detect IE, you can also and better go for IE conditional comments.

Example:

<!--[if IE]>
  Special instructions for IE here
<![endif]-->

<script>
    jQuery.each(jQuery.browser, function(i, val) {
      $("<div>" + i + " : <span>" + val + "</span>")
                .appendTo(document.body);
    });</script>

$.browser.msie
for IE

I realise this isn't an answer - but I can't really post this in a comment!

If you're going to use javascript this code fixes the png issue with ie6. I haven't used it much, but afaik you need a transparent gif image called x.gif and it does the rest automatically.

// JavaScript Document

var supersleight    = function() {

    var root = false;
    var applyPositioning = true;

    // Path to a transparent GIF image
    var shim            = 'x.gif';

    // RegExp to match above GIF image name
    var shim_pattern    = /x\.gif$/i;



    var fnLoadPngs = function() { 
        if (root) {
            root = document.getElementById(root);
        }else{
            root = document;
        }
        for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
            // background pngs
            if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) {
                bg_fnFixPng(obj);
            }
            // image elements
            if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){
                el_fnFixPng(obj);
            }
            // apply position to 'active' elements
            if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
                obj.style.position = 'relative';
            }
        }
    };

    var bg_fnFixPng = function(obj) {
        var mode = 'scale';
        var bg  = obj.currentStyle.backgroundImage;
        var src = bg.substring(5,bg.length-2);
        if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
            mode = 'crop';
        }
        obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
        obj.style.backgroundImage = 'url('+shim+')';
    };

    var el_fnFixPng = function(img) {
        var src = img.src;
        img.style.width = img.width + "px";
        img.style.height = img.height + "px";
        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
        img.src = shim;
    };

    var addLoadEvent = function(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            };
        }
    };

    return {
        init: function() { 
            addLoadEvent(fnLoadPngs);
        },

        limitTo: function(el) {
            root = el;
        },

        run: function() {
            fnLoadPngs();
        }
    };
}();

// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');

supersleight.init();