Category list

Detecting the Browser s Name

Detecting the Browser's Name

Although feature sensing is better for determining what a browser can and cannot do (see "Using Feature Sensing" in Chapter 12), sometimes you need to be able to tell your code what to do based on the type and version of browser in which the Web page is being viewed .

Initially, this information comes in a big chunk that lists in the navigator.userAgent object all the browsers and versions that the current browser is compatible with ( Figure 13.4 ). Although having the exact name and version of the browser is useful, that information can be a bit bulky when it comes time to code. You can use this chunk to get the data you require and store it in variables for later use ( Figures 13.5 and 13.6 ).

Figure 13.4. The general syntax for the `userAgent` object.

Figure 13.5. The code is being run in Firefox.

Figure 13.6. The code is being run in Opera.

To determine the browser type and version:


var agent = navigator.userAgent. toLowerCase();

Add the variable agent that records the value of the navigator.userAgent object (the full list of compatible browsers) and converts it to lowercase ( Code 13.2 ).

Code 13.2. This code first writes the complete userAgent on the page. It then uses that information to determine the browser name so that it can display the correct message(s).

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/

xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS, DHTML &amp; Ajax  Detecting the Browser Name</title>
</head>
<body>
<script type="text/javascript">
<!--

var agent = navigator.userAgent.toLowerCase();


var isMoz = (agent.indexOf('mozilla') != -1);


var isIE = (agent.indexOf('msie') != -1);


var isSafari = (agent.indexOf('safari') != -1);


var isOpera = (agent.indexOf('opera') != -1);

document.write('<p><b>This browser\'s designation is:</b> ');
document.write(navigator.userAgent + '</p>');

if (isMoz  isIE  isSafari  isOpera) {


if (isMoz) { document.write('<p>This Browser is compatible with Mozilla.</p>'); }


if (isIE) { document.write('<p>This Browser is compatible with Internet Explorer.</

p>'); }


if (isSafari) { document.write('<p>This Browser is compatible with Safari.</p>'); }


if (isOpera) { document.write('<p>This Browser is compatible with Opera.</p>'); }


}


else document.write('<p>Sorry, I don\'t recognize this browser.</p> ');

//-->
</script>
</body></html>


var isMoz = (agent.indexOf('mozilla') != -1);

Set up four variables ( isMoz , isIE , isSafari , isOpera ) that will be set to true if the browser designation shows up in the agent variable string.

Keep in mind that a browser may show up as being compatible with other browsers as well. For example, Safari shows itself as being compatible with both Safari and Mozilla.


if (isMoz  isIE  isSafari  isOpera) {...}

Check to see if a compatible browser was identified.


if (isMoz) {...}

If a compatible browser was found, you can then add code specifically for that browser. In this case, I simply displayed a message stating which browser was found to be compatible.


else document.write('<p>Sorry, I don\'t recognize this browser.</p> ');

If no compatible browser was found, then you can also add code to take care of that situation.

Tips

Some browsers, such as Safari, will show up as being compatible with other browsers ( Figure 13.7 ), so you may need to take that into account when coding.

Figure 13.7. The code being run in Safari.

There are, of course, more than four browsers. Many Web designers used to use browser detection to tailor their work for one browser over others, but this technique is quickly going out of use (see the sidebar "Feature Sensing or Browser Sensing?").

Feature Sensing or Browser Sensing?

Browser sensing, also known as browser detection, is often used instead of feature sensing to determine whether a DHTML function should be run in a particular browser. Using browser sensing, however, means that you have to know exactly what code will or will not run in the browsers you are including or excluding.

Using browser sensing to determine DHTML compatibility can cause problems, especially when newer browser versions either add new abilities or fix bugs that previously prevented code from working. I recommend using feature sensing if at all possible.