Browser Sniffing¶
| Status: | Draft |
|---|---|
| Version: | 1.0 |
| Authors: | Peter Higgins, Ben Lowery |
Contents
You should try to use capability detection (http://dev.opera.com/articles/view/using-capability-detection/) when possible. When that is not an option, Dojo provides a number of is variables for browser detection, defined at runtime based on the users current browser.
- dojo.isIE
- dojo.isMozilla
- dojo.isFF
- dojo.isOpera
- dojo.isSafari
- dojo.isKhtml
- dojo.isAIR - true if running within the Adobe AIR enviroment
- dojo.isQuirks - is the browser in Quirks-Mode
- dojo.isBrowser (not typically needed when only targeting browsers)
For Dojo 1.3, the following were added:
- dojo.isWebKit
- dojo.isChrome
Each variable is only defined if the specified browser is being used. For example, if you’re using Internet Explorer, only dojo.isIE is defined; all the other variables are undefined. The variable holds the browser version number as a Number, so you can easily perform version checks. Additionally, since undefined always evaluates as false in if statements, you can use code like this to check for a certain browser version:
1 2 3 4 5 6 7 8 9 10 11 | if(dojo.isIE <= 6){ // only IE6 and below
...
}
if(dojo.isFF < 3){ // only Firefox 2.x and lower
...
}
if(dojo.isIE == 7){ // only IE7
...
}
|
Examples¶
Here's a live sample to show how it works:
<script type="text/javascript">
function makeFancyAnswer(who){
if(dojo["is" + who]){
return "Yes, it's version " + dojo["is" + who];
}else{
return "No";
}
}
function makeAtLeastAnswer(who, version) {
var answer = (dojo["is" + who] >= version) ? "Yes" : "No";
dojo.byId("isAtLeast" + who + version).innerHTML = answer;
}
dojo.addOnLoad(function(){
dojo.forEach(["IE", "Mozilla", "FF", "Opera", "WebKit", "Chrome"],
function(n) {
dojo.byId("answerIs" + n).innerHTML = makeFancyAnswer(n);
});
makeAtLeastAnswer("IE", 7);
makeAtLeastAnswer("FF", 3);
makeAtLeastAnswer("Opera", 9);
});
</script>
<dl>
<dt>Is this Internet Explorer?</dt>
<dd id="answerIsIE"></dd>
<dt>Is this Firefox?</dt>
<dd id="answerIsFF"></dd>
<dt>Is this Mozilla?</dt>
<dd id="answerIsMozilla"></dd>
<dt>Is this Opera?</dt>
<dd id="answerIsOpera"></dd>
<dt>Is this WebKit? (Dojo 1.3)</dt>
<dd id="answerIsWebKit"></dd>
<dt>Is this Chrome? (Dojo 1.3)</dt>
<dd id="answerIsChrome"></dd>
</dl>
<dl>
<dt>Is this at least IE 7?</dt>
<dd id="isAtLeastIE7"></dd>
<dt>Is this at least Firefox 3?</dt>
<dd id="isAtLeastFF3"></dd>
<dt>Is this at least Opera 9?</dt>
<dd id="isAtLeastOpera9"></dd>
</dl>