Re: Tabbed Interfaces in CSS

On Fri, Apr 24, 2009 at 12:38 PM, Boris Zbarsky <bzbarsky@mit.edu> wrote:

> Giovanni Campagna wrote:
>
>> That "checking" should set the :checked pseudo-class and remove any
>> :checked pseudo-class on element that belong to the same "radio-group"
>> / "toggle-group" (set by the appropriate property).
>>
>
> OK.  So the things one would need to keep track of would be:
>
> 1)  The toggle groups
> 2)  The checked state of every element
>
> Right?
>
> The latter is pretty simple, though there are issues like defining
> "clicking on it".  The latter, I suspect the devil is in the details in
> terms of how hard it is to implement (e.g. what happens when elements get
> added to or removed from these groups).
>
> -Boris
>

Right. I proposed 'radio-group:<identifier>' would add radio-button-like
state-tracking to anything else that also was set that way with the same
identifier. Otherwise all elements would track state as though they were
checkboxes. And then ':checked' as a pseudo-class would work on any element
instead of just certain input elements.

By default, the first element of a radio-group would be checked. If not in a
radio group, the default would be unchecked.

I was also suggesting that adding "nav-index: auto | <number>" to an element
would make it focusable, and that items that were not ordinarily focusable
would default to "nav-index: none" (currently not a valid value).

This would be helpful for creating tab boxes and accordians, and could be
extended into many other things as well.