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="javascript: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="javascript: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