action
mission
members
resources

DEVELOPER HELP & TIPS

The WaSP Browser Upgrade Initiative

Browser Upgrades. Standards now.

Cut 'n paste fun! Add this banner to your site, and link up.

USEFUL STUFF
W3C HTML Validator

(also validates XHTML)

W3C CSS Validator
W3C Accessibility Guidelines
Bobby Accessibility Validator

The WaSP thanks David Eisenberg, Tantek Çelik, and Jim Heid for research, suggestions, and moral support.

Cast off your chains! Well, anyway, quit worrying about 1997 browsers, and start using W3C and ECMA standards to build your sites The Modern Way.
        Why would you want to do this? In five words, to separate style from content. For details, read the WaSP Browser Upgrades initiative Press Release, or check the To Hell With Bad Browsers editorial in Issue No. 99 of A List Apart, which goes into great detail about the purpose and ramifications of this initiative.

METHOD 1: DOM SNIFF

After creating a valid web page, insert this script in the <head> of your document or somewhere in your global JavaScript file: 

if (!document.getElementById) {
    window.location = 
	   "http://www.webstandards.org/upgrade/"
}

In a global .js file, the code would look exactly like it does above. If you're inserting the script on an individual HTML page, of course, you would type it between <head> and </head>, and it would look like this:

<script type="text/javascript" language="javascript">
<!--  //

if (!document.getElementById) {
    window.location = 
	   "http://www.webstandards.org/upgrade/"
}

	// -->
</script>

If you prefer, you can just as easily send visitors to an upgrade page on your own site:

if (!document.getElementById) {
    window.location = 
	   "http://www.yourdomain.com/yourpage.html"
}
WHY IT WORKS

W3C DOM-capable browsers will ignore this bit of fluff, because getElementById is a DOM method. Non-DOM-capable browsers will redirect the visitor to our Upgrade page ... or yours.

WHY YOU MIGHT LIKE IT

It's foolproof in any JavaScript-capable browser, so long as the user has not disabled JavaScript. You won't have to worry about anyone in your audience seeing web pages their browser can't handle. You might have to worry about a few angry letters, though.

WHY YOU MIGHT NOT LIKE IT

Like we said, you might get a few angry letters. For that reason, we also offer the kinder, gentler, IFRAME method shown below. If you prefer to take a "belt and suspenders" approach, you can combine both methods.

METHOD 2: IFRAME/OBJECT

After creating a valid HTML (or XHTML 1.0) page, add an "ahem" declaration to your global Style Sheet, like so:

.ahem {
	display:	none;
	}

Naturally, you can call it anything you like. We just kind of dig "ahem." Then in the <body> of your page, write something like this: 

<iframe class="ahem">
<big>Please 
<a href="http://www.webstandards.org/upgrade/" 
title="The Web Standards Project's 
BROWSER UPGRADE initiative.">
upgrade</a> to a browser
that supports web standards.
</big></iframe>

If you prefer, you can send visitors to an upgrade page on your own site:

<iframe class="ahem">
<big>Please 
<a href="http://www.yourdomain.com/yourpage.html" 
title="Upgrading your browser will
help you enjoy the Web.">
upgrade</a> to a browser
that supports web standards.
</big></iframe>
WHY IT WORKS

Standards-compliant browsers will read the Style Sheet, will see that the iframe is supposed to be invisible, and therefore will not display it. Older browsers will display text and links within the iframe as standard text and links. When XHTML 1.1 becomes the norm, a similar technique (below) may be substituted.

WHY YOU MIGHT LIKE IT

It's kinder and gentler than forcing your visitors to go somewhere unexpected, and it leaves them with the choice. If visitors prefer to view your content in their old browser, they still can. The other nice thing about this method is that it works even when visitors have JavaScript turned off.

WHY YOU MIGHT NOT LIKE IT

Some browsers crash when they encounter web pages they can't handle, even though the pages themselves contain only valid markup. This is another reason we're hoping to hasten the user upgrade process. Some old browsers don't just suck, they suck profoundly. This method won't help those browsers.
        Visitors may or may not see your message prior to crashing, but the angry messages this time could come from people who've lost work upon reaching your site. No browser, however wretched, should crash from this technique, but if browsers always behaved as they ought to, we wouldn't be here, would we.

NOTE on XHTML 1.1

XHTML 1.1 does not support iframes. Bleeding-edge hardcore standards freaks, don't use this technique if you're trying to create valid XHTML 1.1 documents. When XHTML 1.1 becomes a working standard, you can achieve the same thing by adding this to your Style Sheet:

.ahem {
	display:	none;
	}

... and then making use of the stunt code below:

<p class="ahem">
<object class="ahem" type="text/html">
<big>Please 
<a href="http://www.webstandards.org/upgrade/"
   title="The Web Standards Project's BROWSER UPGRADE initiative.">
upgrade</a> to a browser that supports web standards.
</big>
</object>
</p>

If you choose, you can also use this technique right now in any valid XHTML 1.0 document. And now back to our regularly scheduled program.

» More Info ::: » Browser Upgrades Page
The Web Standards Project.