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.

MORE INFO
Press Release

Why we're doing this.

To Hell With Bad Browsers

More details, more reasons, and a reader forum.

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.

ABOUT THESE TIPS

Two methods are described below. One might be better suited to your site than the other. You can also evolve your own techniques. This page is just a starting point.

Method 1 (DOM SNIFF) is fairly radical and will not suit every site. What it does is redirect non-compliant browsers to an "upgrades" page—yours, or ours. If you use this method, we encourage you to create your own upgrades page, tailored to the needs of your particular audience.

Method 2 (INVISIBLE OBJECT) enables all visitors and devices to access your site's content, but alerts visitors with non-compliant browsers to the existence and ready availability of better browsers. Used in combination with techniques (such as the @import method) that protect bad browsers from Style Sheets they can't handle, this can be an effective means of serving all users while encouraging upgrades and supporting standards.

THE TOOLS

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 page, of course, you would type it between <head> and </head>. In HTML 4 or XHTML 1 Transitional documents, it would look like this:

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

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

	// -->
</script>

In STRICT documents, you'd either use a global .js file, or insert this:

<script type="text/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"
}
WHEN YOU MIGHT USE THIS

If you're creating pages that rely heavily on the W3C DOM and ECMAScript, those pages could fail in non-compliant browsers. On such a site, this technique would protect folks from viewing content their browser can't handle.

WHEN YOU MIGHT NOT

If your pages don't rely on advanced, standards-compliant scripting, using this technique might win you more enemies than friends, and you might prefer the "kinder, gentler" OBJECT method described later on this page.

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. There is no need to create a long, complex browser detection script because you're not testing for browsers any more—you're testing for compliance with W3C recommendations.

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, OBJECT method shown below. If you prefer to take a "belt and suspenders" approach, you can combine both methods.

METHOD 2: INVISIBLE OBJECT

This method lets everyone access your site, but alerts audience members using older browsers to the availability of standards-compliant ones. If you've separated style from content, this method will also let users of older browsers know why the site looks different, while reassuring these users that you have no intention of abandoning them. The message is hidden from folks who use browsers that comply with W3C recommendations and have CSS turned on.

HOW TO DO IT

After creating a structurally valid HTML 4.x, XHTML 1.0, or XHTML 1.1 page, add an "ahem" declaration to your global Style Sheet, like so:

.ahem {
	display:	none;
	}

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

<h1 class="ahem">
This site will look much better 
in a browser that supports 
<a href="http://www.webstandards.org/upgrade/"  
title="Download a browser that 
complies with Web standards.">
web standards</a>, 
but it is accessible to any browser 
or Internet device.
</h1>

The message will be hidden from CSS-compliant browsers as long as CSS is turned on. There is no possibility of crashing any browser, because all you've done is is add a CSS class to an HTML headline. If you find it more appropriate, you can use a DIV or a <P> instead of an H1.

If you've crafted your message carefully, it will not offend anyone. However, you may prefer to hide the message from standards-compliant (but limited) user agents like Lynx and iCab, from Palm Pilot and similar device users, and from those who use current browsers with CSS turned off. If so, in an HTML document, you can use an IFRAME instead of a <P>.

When doing something like this, consider your audience before anything else. What kind of message is likely to encourage them to visit your Upgrades page? What kind of message might turn them off? We think the following is a good one, but we encourage you to fine-tune it or replace it with your own:

This site will look much better in a browser that supports web standards, but is accessible to any browser or Internet device.
WHY IT WORKS

CSS browsers will read the Style Sheet, will see that the text is supposed to be invisible, and therefore will not display it. Older browsers will.

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

It takes guts to turn off your design in browsers that can't handle it. And no matter how politely you word your "upgrade" message, some visitors will dislike it.

And now back to our regularly scheduled program.

What is this? ::: More info ::: Browser Upgrades home

The Web Standards Project.