www.webdeveloper.com
Results 1 to 14 of 14

Thread: Browser Detection

  1. #1
    Join Date
    Sep 2006
    Posts
    192

    Browser Detection

    In the current world of browsers, there are quite some different brands, IE, Firefox, Opera, Netscape, etc.

    Is there a better (more widely acceptted way) to detect which browser I am using?

    Someone may use: navigator object and check the indexOf, while others may use the object detection such as document.all, window.opera,...

    But I am lost a bit.



    Thanks


    Scott

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Rather use a specific object/method javascript method detector instead of a certain browser/version.

    This kind of issue was posted a lot here, give it a search.

  3. #3
    Join Date
    Sep 2006
    Location
    Cleveland
    Posts
    579
    Here is a link to a post i just made. Check out the function on the page.
    http://www.webdeveloper.com/forum/sh...d.php?t=155343

  4. #4
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    Browsers can hide themselves. Try this or this.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  5. #5
    Join Date
    Sep 2006
    Location
    Cleveland
    Posts
    579
    LeeU

    I agree with you. This function has a hard time with Opera. I have not had time to play with it and fix this problem but it works otherwise. The quirksmode.com function is great as well. Works wonders but te one I presented is a little more simple to implement.

  6. #6
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    Well, I don't think so. I think just checking a few objects is much easier than what you and, plus, there are a lot of other browsers. The object method is quite simple and doesn't need updating when a new browser is added or changed.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  7. #7
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Both Internet Explorer and Firefox can be set to identify themselves as anything at all.

    Opera and Safari can be set to identify themselves as IE or Firefox.

    There are thousands of other browsers each with their own quirks.

    The only way guaranteed to work is to test if the browser supports the code you want to use rather than testing what browser it is.
    Stephen

  8. #8
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Hmmm.....

    Is there a way to detect CSS level support? Some browsers have issues with relative positioning, x-overflow, etc.

    It's possible to use JavaScript to check if a DOM object supports a certain method or property, but how do you check to see if the browser supports a certain CSS operation or property ?

  9. #9
    Join Date
    Feb 2006
    Posts
    2,927
    The main differences between browsers, from an html element's point of view, are event handling and css manipulation, and you can determine those features with fairly simple code.

    Code:
    if(document.createTextNode){
    	if (document.addEventListener) window.eventMode= 'DOM';
    	else if (document.attachEvent) window.eventMode= 'IE';
    	if(document.styleSheets){
    		window.cssMode= window.eventMode? window.eventMode: true;
    	}
    }
    That gives me 95% of the object detection I need for using javascript with HTML.



    But sometimes it is nice to be able to tell just the Safari Browser to lighten up on those heavy font-weights, or to make a disabled element in Firefox look disabled, or to give text in Opera a little more elbow room, or to hide a select element when you drag something in front of it in IE6, but not IE7.


    These and other display niceties may be annoying or ugly if applied to the 'wrong' browser, or not applied on the correct browser, but they aren't fatal. And it can take a ton of object detection to sort out css support.


    So despite the general dispise people have for browser sniffers, I'll offer one for our friend to implement.

    Code:
    navigator.whozit= function(){
    	var N= navigator.appName;
    	var ua= navigator.userAgent, M;
    	if(/opera/i.test(ua)) M= ua.match(/(opera)\/? *(\.?\d+(\.\d+)*)/i);
    	else{
    		M= ua.match(/(applewebkit|firefox|seamonkey|netscape)\/ *(\.?\d+(\.\d+)*)/i);
    		if(M){
    			if(/safari/i.test(ua)) M[1]= 'Safari';
    			var tem= ua.match(/version\/(\.?\d+(\.\d+)?)/i);
    			if(tem)M[2]= tem[1];
    		}
    		else M= ua.match(/ms(ie) *(\d+(\.\d+)*)/i);
    	}
    	M= (M)? [M[1],M[2]]: [N,navigator.appVersion];
    	this.client= M[0];
    	this.version= M[1];
    	this.valueOf= function(){
    		var ax= M[1].indexOf('.')+1;
    		var tem= M[1].substring(0,ax)+M[1].substring(ax).replace(/\./g,'');
    		return parseFloat(tem);
    	}
    	this.toString= function(){
    		return M[0]+' '+M[1];
    	}
    	this[M[0]]= M[1];
    	return this;
    }
    var Browser= new navigator.whozit();

    returned properties and methods-

    IE:
    Browser.client= IE (string)
    Browser.version= 6.0 (string)
    Browser.IE= 6.0 (string)
    Browser.valueOf()= 6 (number)
    Browser.toString()= IE 6.0 (string)

    Firefox:
    Browser.client= Firefox (string)
    Browser.version= 2.0.0.5 (string)
    Browser.valueOf()= 2.005 (number)
    Browser.toString()= Firefox 2.0.0.5 (string)
    Browser.Firefox= 2.0.0.5 (string)

    Opera:
    Browser.client= Opera (string)
    Browser.version= 9.0 (string)
    Browser.valueOf()= 9 (number)
    Browser.toString()= Opera 9.0 (string)
    Browser.Opera= 9.0 (string)

    Safari:
    Browser.client= Safari (string)
    Browser.version= 3.0 (string)
    Browser.valueOf()= 3 (number)
    Browser.toString()= Safari 3.0 (string)
    Browser.Safari= 3.0 (string)

  10. #10
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Why test functions you are not necessarily going to use. Test the functions you are going to use instead and then it doesn't matter what browser it is.

    For example if the useragent says the browser is IE then it might be IE or Opera or Firefox or Safari or something else. If it says that it is Firefox then it might be IE or Opera or Firefox or Safari or something else. If it says that it is Opera then it isn't Safari but it might be IE or Firefox. I have both IE and Firefox identifying themselves as 'Firefox Opera Safari or any other modern browser' in the useragent which is of course a free format user enterable field. That browser sniffer would misidentify all my browsers.

    Also why use an if statement testing a value in order to set another value that you will need to test whenever you want to see if it is supported. Dump the eventMode field and just test addEventListener and attachEvent instead which will be far more efficient because it avoids the need to do a comparison.
    Stephen

  11. #11
    Join Date
    Sep 2006
    Location
    Cleveland
    Posts
    579
    felgall has some points BUT in your case if you need to use a browser detect all you have to do is use one of the suggestions given because no matter how other programmers think and I myself think about if it needed on your part then do it. I in fact need to use it at this moment. Certain ie quirks give problems to my app. Nothing I can do about it until M$ changes their browser to conform to the standards. In possibly several more versions of IE it will be compliant because they will not support the older more specific function. I digress but the point is that 90%of the users who indeed use a browser that has that capability do not use it or even know it is possible. So do what you need to do regardless of opinions and reterick.

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    In my opinion a "browser detector" is a wrong way to find a solution. If you already know that a method/object you intend to use has different approaches (or even bugs) in the main browsers, the best solution is to test that method/object itself.

    Here's an example of detecting methods/objects while capturing the mouse position:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    var posx, posy;
    function getMouse(e){
    posx=0;posy=0;
    var e=(!e)?window.event:e;//IE:Moz
    if (e.pageX){//Moz & compatible
    posx=e.pageX+window.pageXOffset;
    posy=e.pageY+window.pageYOffset;
    }
    else if(e.clientX){//IE & compatible
    if(document.documentElement){//IE 6+ strict mode
    posx=e.clientX+document.documentElement.scrollLeft;
    posy=e.clientY+document.documentElement.scrollTop;
    }
    else if(document.body){//Other IE (or compatible in quirk mode)
    posx=e.clientX+document.body.scrollLeft;
    posy=e.clientY+document.body.scrollTop;
    }
    }
    else{return false}//old browsers
    document.getElementById('myspan').firstChild.data='X='+posx+' Y='+posy;
    }
    document.onmousemove=getMouse
    </script>
    </head>
    <body>
    <span id="myspan">&nbsp;</span>
    </body>
    </html>
    Last edited by Kor; 07-25-2007 at 12:42 PM.

  13. #13
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    The advantage of using object detection is that when a new browser version starts supporting the object the code will work automatically. For example anyone who used browser detection to test which of the two ways of creating an ajax object to use will have needed to update their code when IE7 came out with support for the better method while those who coded the object detection correctly in the first place will have had it work correctly without needing to change the code.

    If you really have a need to detect Internet Exploder where object detection is not possible then you can use JScript conditional code.

    Code:
    /*@cc_on
      @if (@_jscript)
    alert('This browser is IE');
      @else */
    alert('This browser is NOT IE');   /*
      @end
    @*/
    Stephen

  14. #14
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Too bad, it looks like there is no way to detect CSS level support then.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles