Writing Friendly Code - Part 2, Safety
The Clockwise Box (Style Scripting Safety Net)
In theory you can forego <div> and <span> for some types of content. You can position a <p> or a heading, for instance. These elements, however, have their own behaviors, defaults and inheritance chains that affect their display in varying ways on different clients. <Div> and <span> are truly empty elements that don't bring anything extra to the party unless you tell them to. A <div> by default begins on a new line, but that's the only default value you have to deal with. If you are using a client that doesn't grok divs and spans, it will ignore them and display the content using the contained html. The tricky part comes in the "half-smart" browsers. These are the ones that have enough capability to recognize some of your code, but hang themselves after they used what little they do know to make the noose. The really dumb clients are easy to predict, but the half smart version 3 browsers have to be finessed.
In friendly code, the script detects the client before it does anything else. If the client is not supported, the page should appear in its most basic, undynamic form. In the newsletter project I've been using to illustrate these articles, I start with a variable called "brid", initially set to the empty string. If parsing navigator.userAgent evaluates to Netscape 4 or better, brid is set equal to "NS". IE 4 or better makes it "IE". I usually have a Boolean to detect a Mac user here also. A lot of code that runs on IE Windows fails on a Mac, and both browsers render fonts and margins differently on these two OS's. Mr. brid isn't intended to exhaustively identify the client - only to decide if the client is on the list that is supported for the script. After this is determined, I set up the browser specific values. May as well only load what is going to be useful to the client actually reading the page.
If brid remains equal to "", the code is not called, the styles aren't changed, no objects are created or moved around. This should result in a nice clean text and image presentation for the scriptless browser, and an easy to digest page for a text only or Braille client. Or a PDA or a telephone or a refrigerator or an XML search robot.
In my reader project, if you do not have scripting enabled and either Navigator 4 or IE 4 or 5, you see the newsletter content as a long, scrollable page. Not sexy, but easy to read, in any client that reads text. Otherwise the <div>s are positioned absolutely as screen sized, above the fold pages, and all except the selected page and the script driven toolbars are hidden. Refer to Part 1 of this article for all the details.
Comments are welcome