RE: [css3-ui] styling of form elements

> -----Original Message-----
> From: tantek@gmail.com [mailto:tantek@gmail.com] On Behalf Of 
> Tantek Çelik
> Sent: Thursday, January 13, 2011 3:19 PM
> To: Belov, Charles
> Cc: www-style list
> Subject: Re: [css3-ui] styling of form elements
> 
> On Wed, Jan 12, 2011 at 17:37, Belov, Charles 
> <Charles.Belov@sfmta.com> wrote:
> > 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
> 
> Thanks much Charles, your examples helped a lot.
> 
> I've captured what I understand the issues to be (from your 
> previous email and this one) as Issues 14-17 for CSS3-UI with 
> proposed resolutions.
> 
> http://wiki.csswg.org/spec/css3-ui#issue-14
> 

Tantek, thank you.  This message confirms those issues accurately address my concerns.

Hope this helps,
Charles Belov
SFMTA Webmaster

> 
> (quoted previous email included below since the issues reference it)
> 
> >> 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 Friday, 14 January 2011 01:41:13 UTC