Coding javascript and css reliant UI elements

[Spartanicus]

I'm pondering what the various drawbacks are of the methods to code UI
elements who's function relies on javascript and css.

Currently on http://www.pan-europe.utvinternet.ie/ I use styled <a>
elements to display two UI elements that via javascript select alternate
stylesheets that enable or disable the left utilities panel and/or the
navbar. (both are there for the convenience of desktop users, they are
not essential, likely to be a nuisance on narrow viewports or in aural
rendering)

Because these UI elements are useless when either javascript or css is
disabled I use js document.write for js off situations, css background
images for css off situations, css generated content or content wrapped
in a IE conditional comment for css2 aural renderers or IE based aural
renderers (content is positioned off screen).

The current method only displays small coloured boxes in images off
situations, but I'm ok with that.

I'm mainly pondering on the use of styled <button> elements instead of
styled links. Are there objections to using a form element like <button>
in a non form context?

Afaics a possible benefit of using <button> elements is that Opera has
separate keyboard controls for link and form elements, this potentially
allows a user quicker access to the UI controls, there is one (1 field +
1 button) search form on all pages and typically a lot more links to
step through.

The drawback I currently see is that the button element renders in css
off situations, whereas styled links disappear.

Currently I use href="javascrip t:void(function ())" to activate the js
function, this causes the links to be included in the keyboard
navigation step sequence, if I use onclick then it (understandably )
doesn't in some browsers (IE and/or Mozilla IIRC). The drawback of using
href="javascrip t:void(function ())" is that Opera displays that in it's
tooltip box, this I mainly consider an Opera quirk but I'd prefer to
avoid it if I could do so without causing other problems.

Any considerations I've missed?

--
Spartanicus

[mbstevens]

Re: Coding javascript and css reliant UI elements

Spartanicus wrote:
[color=blue]
> Because these UI elements are useless when either javascript or css is
> disabled I use js document.write for js off situations,[/color]
You mean css off situations?[color=blue]
> css background
> images for css off situations,[/color]
You mean js off situations?

And, do you have a really _good_ reason to be using js navigation?
Is it backed with <noscript> navigation?
[color=blue]
> I'm mainly pondering on the use of styled <button> elements instead of
> styled links. Are there objections to using a form element like <button>
> in a non form context?[/color]

Using a button outside a form _might_ result in it not working as you
intend in some browsers. Is there a reason you can't use form tags
around it?
[color=blue]
>
> Afaics a possible benefit of using <button> elements is that Opera has
> separate keyboard controls for link and form elements, this potentially
> allows a user quicker access to the UI controls, there is one (1 field +
> 1 button) search form on all pages and typically a lot more links to
> step through.[/color]

Unless you're on an _intranet_ where most of your users are on Opera
_and_ trained to use keyboard shortcuts, I think any benefits to users
would be tiny. Upkeep of weird markup, on the other hand, is a pain.
[color=blue]
>
> The drawback I currently see is that the button element renders in css
> off situations, whereas styled links disappear.[/color]

If the styling of links disappears with CSS off, I can understand. If
the links themselves disappear, you are doing something wrong.
[color=blue]
>
> Currently I use href="javascrip t:void(function ())"[/color]

You mean
<button>
<a href="javascrip t:void(function ())"
</button>
?

Why don't you remove non-essential stuff and post the code?
I can't make much sense of the following paragraph.
[color=blue]
> to activate the js
> function, this causes the links to be included in the keyboard
> navigation step sequence, if I use onclick then it (understandably )
> doesn't in some browsers (IE and/or Mozilla IIRC). The drawback of using
> href="javascrip t:void(function ())" is that Opera displays that in it's
> tooltip box, this I mainly consider an Opera quirk but I'd prefer to
> avoid it if I could do so without causing other problems.[/color]

--
mbstevens

http://www.mbstevens.com