Clutching at straws

The other day, Zeldman wrote:

A noscript element has also been added so PDA and screen reader users (and desktop browser users who dislike JavaScript) can page backward through the Daily Report.

That was me, that was. See, I wrote to the great man sobbing that I couldn’t navigate his site with a PDA† cos he uses a JavaScript-driven form button to get the Previous Reports. Lo and behold, the next day Mr Z’s fixed it. Of course it’s more likely that adding a bit of <noscript> was already on his to-do list, but I’ll claim it anyway.

† Did I ever tell you have a 1.5 hour commute – I spend it wisely by reading blogs on the train. Note that AvantGo is free and brilliant.

Actually I’ve always wondered why Jeffrey uses a form button at all for this purpose. I guess he deems it a nice tactile thing to act as a link (and he’d be right), but nowadays we can quite easily style links to work like buttons. This removes the need for JavaScript and the obligatory <noscript> content. You’ll also get more consistency across browsers – Opera for instance have made the descision not to let you style operating system controls such as buttons, drop menus and scrollbars.

Here’s how Mr Z could have built his Previous Report buttons:

Zeldman style:

 .zbut {
   width:13em;
   font:10px geneva, verdana, arial, sans-serif; 
   color:#dff; background:#399; 
   margin:0; padding:0.2em;
 }

<form action="googoodoll" style="margin:0">
   <input name="button" class="zbut" type="button"
    onclick="window.location='/daily/1002d.shtml'"
    value="Previous Reports" />
   <noscript>
     <a href="/daily/1002d.shtml">Previous Reports</a>
   </noscript>
 </form>

Clagnut style:

 /* same .zbut class plus these: */

 A.zbut {
   display:block;
   text-align:center;
   text-decoration:none;
 }

 A:link.zbutton,A:visited.zbut,A:hover.zbut {
   border:2px outset;
 }

 A:active.zbut {
   border:2px inset;
   position:relative;
   top:1px; left:1px;
 }

 <a href="/daily/1002d.shtml" class="zbut">
 Previous Reports</a>