RE: [css3-ui] styling of form elements

tantek@gmail.com [mailto:tantek@gmail.com] Tantek Çelik wrote on Wednesday, January 12, 2011 4:35 PM:
> To: Belov, Charles
> Cc: www-style list; Tab Atkins Jr.
> Subject: Re: [css3-ui] styling of form elements
> 
> > I respectfully suggest revising 
> > http://www.w3.org/TR/css3-ui/#appearance0
> 
> Charles,
> 
> I'm having trouble understanding what specific behaviors you 
> are looking for from the 'appearance' property.
> 
> Could you perhaps post a diagram or two demonstrating 
> abstractly (don't bother with pixel precision) both:
> 1. the default styling of the thing(s) you are talking about 
> and 2. the alternative styling(s) of the thing(s)
> 
> Preferably with actual real world UI content, e.g. the 
> nextmuni.com example you give would be great.
> 
> In UI, people often use similar terms to refer to different 
> things, and thus I want to make sure I'm understanding your 
> request correctly.

Tantek, I think I added to the confusion with that nextmuni.com link.  That was only addressing the issue of someone styling single select HTML with multi-select CSS.

Rather, I will provide an example from www.sfmta.com, which I am responsible for and thus can mess with the code.  Of course, given that the feature I am discussing is not yet a part of CSS, I will have to create it via HTML.

Here are test examples demonstrating what I am talking about.

http://www.sfmta.com/cms/home/sfmta_TC_orig.php

In the right-hand column, the HTML code in "Search" lets the site visitor specify the search scope via a drop-down menu.  The code in "Plan A Trip" offers two sets of radio buttons and in "Schedules, maps" there is one set of radio buttons.

http://www.sfmta.com/cms/home/sfmta_TC_radio_only.php mocks up a possible way that someone who had motor impairment difficulties using drop-downs would style the page to show radio buttons instead (under "Search").

http://www.sfmta.com/cms/home/sfmta_TC_drop_only.php mocks up a possible way that someone who prefers to compact their space would display each group of radio buttons as drop-downs instead (under "Plan A Trip" and under "Schedules, maps").

Of course, in the process of constructing this exercise, I was reminded of interesting semantic differences between option/select and input radio.  For instance, lists of radio buttons can be arranged in layout tables (whether or not that is a good idea) and their text selectively strong-ed.  These things would presumably be lost in converting radio buttons to drop-downs.

Hope this helps,
Charles Belov
SFMTA Webmaster
 


> On Fri, Nov 12, 2010 at 15:32, Belov, Charles 
> <Charles.Belov@sfmta.com> wrote:
> > Tab Atkins Jr. wrote on Friday, November 12, 2010 3:00 PM
> >> On Tue, Nov 9, 2010 at 1:29 PM, Belov, Charles 
> >> <Charles.Belov@sfmta.com> wrote:
> >> > This post is to check on planned abilities for styling form
> >> elements
> >> > and to suggest some if they have not been previously
> >> suggested.  The
> >> > use case is for people with physical or conceptual
> >> disabilities or on
> >> > small-screen devices who have trouble with drop-down 
> menus or small 
> >> > multi-select windows, to be able to override certain 
> choices of a 
> >> > website for form fields.
> >> >
> >> > The proposed styles would cover the following features:
> >> >
> >> > - Render each element in a selection menu as a list of
> >> radio buttons.
> >> > - Render each element in a multi-select menu as a list of
> >> check boxes.
> >> >
> >> > Obviously, there would likely be other changes to the 
> page layout 
> >> > needed in a user style sheet that did this, but this would
> >> be a way to
> >> > make certain form elements more accessible.
> >> >
> >> > Sorry about the lack of specificity in the subject.  I
> >> tried to find a
> >> > CSS3 spec responsible for forms but couldn't.
> >>
> >> (Sorry for not replying to this earlier - I think I accidentally 
> >> archived it, because the post below is exactly what I had 
> intended to 
> >> send originally.)
> >>
> >> The spec in question is the UI module.  It doesn't go into great 
> >> depth about styling form elements in its current level, 
> but Tantek is 
> >> working on Level 4 as part of his work at Mozilla, which should 
> >> expose the guts of form elements more explicitly for styling.
> >
> > Found it, thanks, Tab.  This is exactly what I was looking for.
> >
> > I respectfully suggest revising 
> > http://www.w3.org/TR/css3-ui/#appearance0 for clarity such 
> that the example for radio-group uses the same set of content 
> as pop-up-menu, and that list menu have two examples.  The 
> current list-menu value allows only a single select; I 
> suggest adding a second, multi-select, example using the same 
> set of content as checkbox-group.
> >
> > As for my larger issue, what I would expect the UI behavior 
> to be is that the existing HTML4 code used to produce the 
> existing pop-up-menu, list-menu and radio-group examples 
> could all have their rendering overridden such that use of 
> the appearance property would force any of those three sets 
> of HTML code to render and behave like any of the other two.  
> Similarly, the checkbox-group HTML code could be styled using 
> the appearance property to look like a multi-select version 
> of the list-menu HTML code and vice-versa.
> >
> > I would expect the user agent to respect however I styled it.
> >
> > That does raise the question, what is the UA to do if 
> somebody styles a pop-up-menu as checkbox-group, that is, 
> swaps the expectation of a single response with a multiple 
> response.  I suppose it would be handled as it is now if I 
> were to mess with an URL string such as 
> http://www.nextmuni.com/predictor/simpleStopSelector.shtml?a=s
> f-muni&r=2 to change it to 
> http://www.nextmuni.com/predictor/simpleStopSelector.shtml?a=s
> f-muni&r=2&r=5; if the receiving server can handle the 
> request, it handles the request.  If not, it doesn't.
> >
> > Similarly, if somebody styles a checkbox-group as a 
> pop-up-menu, the end-user will only get one choice.  Not a 
> problem, unless the server requires more than one choice be 
> made.  In either case, not a UA problem.
> >
> > Hope this helps,
> > Charles Belov
> > SFMTA Webmaster
> >
> >
> >
> 
> 
> 
> --
> http://tantek.com/ - I made an HTML5 tutorial! http://tantek.com/html5
>

Received on Thursday, 13 January 2011 01:41:02 UTC