detection to sniff out different browsers
Since different browsers support different objects, you can use
Object Detection as a quick though less than infallible way of
detecting various browsers. For example,
since only Opera supports the property "window.opera",
you can use that to instantly separate an Opera browser from the herd. Here
are a few sample test cases, and what they *imply* about the browser running
Example objects used to "rough" detect a particular browser
|| Firefox1+, IE5+, Opera7+,
Safari, and most modern browsers in
|| Firefox1+ and Opera 8+, and Safari 2+
|window.globalStorage && window.postMessage
|| Firefox3+ and Opera 9.5+, and Safari
||Firefox3.5+, IE8+ (in standards compliant mode
only), Opera9.5+, and Safari 3+
|document.compatMode && document.all
|| IE7+, Firefox1+, and Opera8+
|window.XMLHttpRequest && document.all
document.documentElement && typeof
Note: First scheme will fail if visitor
explicitly disables native xmlHTTPRequest support (under Toolbar->
Internet Options-> Advanced). The second one will not.
||IE8+ (detects IE8 in a specific document mode,
such as standards complaint).
Because IE8 can render a page in various
different modes depending on the page's doctype plus the presence of
certain HTML elements,
documentMode is an IE8+ property that
returns a different number depending on the mode the page is being
rendered in. They are:
||Page is running in IE5 mode (aka "quirks mode").
||Page is running in IE7 standards mode.
||Page is running in IE8 standards mode.
||Page is running in IE9 standards mode.
This means that even though the user is using IE8 or IE9, for
example, if a webpage is missing a
document.documentMode will return 5.
|XDomainRequest && window.msPerformance
window.msPerformance is a
IE9+ property you can use to detect IE9. There are other IE9 only window
properties you can use in place of it as well for the purpose.
See a list here.
|document.all && window.matchMedia
|typeof navigator.maxTouchPoints !="undefined"
supported in IE11+ only (IE 10 supports the prefixed version of
msMaxTouchPoints). The property can return 0, so it order to
properly test for property support, use the
on it instead.
||Opera (any version up until Opera 15).
* Since Opera by default also
identifies itself as IE (apart from Opera), with support for many of IE's
proprietary objects, the IE detection schemes above will also return true
for Opera. Use "window.opera" in combination to filter out Opera browsers.
It's important to mention that object detection's chief
purpose is to help you detect within your script whether the browser
supports a particular object/method/property before using it, not browser
detection. As the later it may be convenient over probing the
object, but is only as reliable as your understanding of which objects
are supported in which browsers. In other words, it's not a 100% reliable
way of sniffing out the user's browser. Having said that, the below uses
object detection to test for IE7:
if (document.documentElement && typeof document.documentElement.style.maxHeight!="undefined")
alert("You're using IE7")
The following detects a page running in IE8 standards
alert("This page is running in IE8 standards mode!")
And the following filters out IE11+ browsers:
if (typeof navigator.maxTouchPoints !="undefined")
alert("You are using IE11+, the best of the bunch!")
Again object detection is really about feature detection. It
detects whether your browser supports the feature your script intends to use
and manipulate. For the lazy, that will substitute for browser detection