| One of the great holy grails of Web design is to build a perfectly transparent sitea site that works in every conceivable browsing device on every possible platform without sacrificing the interactive features and compelling visual design that Web audiences have come to expect. It's a holy grail for a very good reason: You're not likely to achieve it in this lifetime. Browsers are simply too varied, and platforms are too incompatible. Computing technology as a whole is far too proprietary, and trade secrets, market shares, licensing programs, corporations, IPOs, and good old-fashioned greed-based economies ensure that it will remain this way. In light of this, Web designers learn to manage their expectations. They shoot for target audiences instead, designing for the browsers that most of their visitors prefer to use. They also engage in a little Machiavellian encouragement, subtly persuading the holdouts and sticks-in-the-mud in the peripheries of their audience to update to the latest browser versions. It's hard to imagine that anyone gets any enjoyment at all from browsing the Web on Microsoft Internet Explorer 4.0 or Netscape Navigator 3.0 (back when it was called Navigator instead of just Netscape), yet some people refuse to upgrade their equipment. Until the day of the Revolution, when greedy software companies collapse alongside the rest of the postindustrial infrastructure, and fully transparent sites become a practical reality, you might consider posting a browser alert on your home page. A browser alert does two things. First, it gives a heads-up to visitors with antiquated software that your site might not work the way you're describing and the way they're expecting. It's the polite thing to do. Second, a browser alert implies to those who see it that it's way past time for them to update to the latest version of their favorite free browser. It encourages this course of action by annoyance, generating a popup window. People with older browsers tend to correlate to those who can't stand popups. TIP To avoid annoying your visitors too much, it's usually best to keep the browser alert on your home page. Don't add it to every page of your site. |
The Toolkit in this topic gives you a complete, ready-to-run browser-alert function that checks the make and model of the visitor's browser, compares the version number to your site's recommended version, and displays an alert message for those visitors whose browsers don't make the cut.  | FAQIt seems like you shouldn't have to slog through a bunch of data that you don't need just to get the browser's make and model. Aren't there more precise navigator properties in JavaScript? Yes, JavaScript offers more precise navigator properties, such as appCodeName, appName, and appVersion, but these often return misleading or incorrect results. The most accurate information appears in the userAgent property. Unfortunately, userAgent also gives you a lot of junk that you don't need for a browser-alert function, so you have to screen out the extraneous data before you can make an accurate comparison between the visitor's browser version and your site's target version. |
|
The function begins by grabbing the userAgent property of JavaScript's navigator object. The userAgent property contains a long string of information about the visitor's browser. Check out this property by creating the following HTML document and loading it into different browsers: <html> <head> <title>userAgent Test</title> </head> <body> <script language="JavaScript"> document.write(navigator.userAgent); </script> </body> </html>
Microsoft Internet Explorer version 6.0 for Windows returns the following results: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.0.3705)
while Netscape 7.1 for Windows gives the following: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)
and Opera version 7.23 displays: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.23 [en]
The browser-alert function examines this property to determine which version of which browser the visitor is using. As you can see, you get a lot more than just the browser name and version number in the userAgent property, so the function has to screen out the extraneous information, going from this: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.23 [en]
to this: Opera 7.23
The comments in the Toolkit take you through each step of the process.  | TOOL KITBrowser Alert To use this browser alert, copy the following code into the head section of your HTML document, or remove the script tags and place the function in an external JavaScript file. [View full width] <script language="JavaScript"> /* You don't need the script tags at the top and bottom of this  listing if you're putting the function in a separate JavaScript file. */ function doBrowserCheck() { /* The following block of code initializes some variables. The userBrowser variable holds the content of the navigator object's userAgent property, which gives the name and version of the visitor's browser, among other things. The pass variable is a Boolean (true/false) switch. When pass equals true, the visitor's browser meets the site's minimum requirements. At the start, the function assumes that the value of this variable is true. The versionStart and versionEnd variables will hold the starting and ending positions of the version number inside the userBrowser string. Eventually, you extract this portion of the string to compare with the target version for your site. */ var userBrowser = navigator.userAgent; var pass = true; var versionStart; var versionEnd; /* The next three blocks of code give the target versions of three browsers: Internet Explorer, Netscape, and Opera. The current target versions are 5.5, 6.0, and 5.0, respectively. You may adjust these values as you require for your site. The versionMSIE, versionNetscape, and versionOpera variables will contain the version numbers that you extract from the userBrowser string. */ var targetMSIE = 5.5; var versionMSIE; var targetNetscape = 6; var versionNetscape; var targetOpera = 5; var versionOpera; /* The following if/then block checks for Microsoft Internet Explorer. */ if (userBrowser.indexOf("MSIE") != -1 && userBrowser.indexOf ("Opera") == -1) { /* The line above scans the contents of the userBrowser variable, looking for the text "MSIE." If userBrowser contains "MSIE" and does not simultaneously contain "Opera" (since Opera's userAgent property also includes the text "MSIE"), the function concludes that the visitor is using Microsoft Internet Explorer. */ versionStart = userBrowser.indexOf("MSIE") + 5; /* The line above finds the start position of the version number inside the userBrowser string, which is five characters to the right of the M in "MSIE." */ versionEnd = userBrowser.indexOf(";", versionStart); /* The line above finds the end position of the version number inside the userBrowser string, which is the semicolon character. */ versionMSIE = userBrowser.substring(versionStart, versionEnd); /* The line above extracts the version number from the userBrowser string and places it in the versionMSIE variable. */ if (versionMSIE < targetMSIE) { pass = false; } } /* The if/then block above compares the visitor's version of Internet Explorer with your target version. If the visitor's version number is less than the target version, the variable pass becomes false. The following if/then block checks for Netscape. */ if (userBrowser.indexOf("Netscape") != -1) { </body> </html> /* The lines below grab the start and ending position of the version number inside the userBrowser string (nine characters to the right of the N in "Netscape" to the next spacebar) and extract the version number into the versionNetscape variable. */ versionStart = userBrowser.indexOf("Netscape") + 9; versionEnd = userBrowser.indexOf(" ", versionStart); versionNetscape = userBrowser.substring(versionStart, versionEnd); /* Once again, if the visitor's Netscape version is lower than the target version, pass equals false. */ if (versionNetscape < targetNetscape) { pass = false; } } /* The following if/then block checks for Opera. */ if (userBrowser.indexOf("Opera") != -1) { /* Get the version number by extracting it from the userBrowser variable. The start position is six characters from the O in "Opera," and the end position is the next spacebar. */ versionStart = userBrowser.indexOf("Opera") + 6; versionEnd = userBrowser.indexOf(" ", versionStart); versionOpera = userBrowser.substring(versionStart, versionEnd); /* If the visitor's version of Opera is lower than the target version, pass equals false. */ if (versionOpera < targetOpera) { pass = false; } } /* The following if/then block checks to see if pass is false. If so, the browser displays a popup message. Feel free to change the wording as you require, but remember to be polite, and try to phrase your request so as to emphasize how a free browser upgrade will personally benefit the visitor. */ if (!pass) { alert("To improve your Web experience, this site uses advanced JavaScript and CSS techniques. Older browsers like yours may not support these features. For best results, please update your browser to the latest version."); } } </script>
To launch this script, add the onLoad event to the body tag of your HTML document: <body onLoad="doBrowserCheck();">
This way, when the browser loads the page, it automatically runs the doBrowserCheck() function. |
|
TIP You don't have to display an alert message. Add your own JavaScript commands to the if (!pass) block to determine what happens when the visitor's browser doesn't meet the required version. |
|
