Re: Tabbed Interfaces in CSS

On Mon, Apr 20, 2009 at 11:00 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> This is similar to what I came up with before.[1][2]

Ah, thanks Brad.  I *thought* it might have been you, but I wasn't
sure, and googling didn't help me.

> Using
> the sibling selector and having the hide the radio buttons is a bit of a
> hack, but the use of "::checked" is not so bad in my view. At the OS, a tab
> is just a special kind of radio button anyway. And even on HTML radio
> buttons and checkboxes there is usually no visual checkmark (it is usually a
> cross or dot for inputs that have them, but it depends on the OS and UA).
> Rather, "checked" just means that there is another state for the element
> that indicates something like "on" (as in "on/off"). The "checked" state
> seems like a reasonable thing for other elements (such as "label", or some
> sort of new "tab-box" or "display:tab-box" element that the label is part
> of, or even for arbitrary elements that could be styled or not depending on
> their binary state which "checked" indicates).

Possibly, but there are further questions raised by this.  Frex, would
clicking on an element alter the :checked state for all ancestors of
the clicked element as well?

(I agree that the theoretical use of :checked isn't a hack - it's the
use of a hidden radio button that is.)

> In my view, any element should be able to have a second state of "checked"
> based on if it has been clicked on an odd or even number of times, just as
> it can have a second state of "hover" based on if the cursor is over it or
> not. Then you just need a way to indicate default state and radio grouping
> (default state would probably require that any element can have 'checked'
> attribute in the HTML). Which group (of tabs or radio buttons) an item
> belonged to go be indicated by some sort of unique identifier on the element
> ('tab-group:a'), which would also indicate that only one item with that same
> property value could be checked at a time.

That would be interesting.  Is there a good use for this outside of a
tabbed layout, though?

> If approached this way, then any element could become a tab card (with a
> :checked state), and the label could be a regular LABEL element that exists
> within it (to switch the :checked state).

It wouldn't allow you to have multiple tabs associated with the same
card, though.  Or, rather, it wouldn't correctly style both tabs (the
one you just clicked would be :checked, but the other wouldn't
necessarily be).

~TJ

Received on Monday, 20 April 2009 16:24:53 UTC