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

Thanks,

Tantek

(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 Thursday, 13 January 2011 23:19:45 UTC