W3C home > Mailing lists > Public > www-style@w3.org > March 2005

Re: Tabs and the CSS3 Basic User Interface Module

From: Matthew Raymond <mattraymond@earthlink.net>
Date: Thu, 10 Mar 2005 17:19:37 -0500
Message-ID: <4230C7F9.3090303@earthlink.net>
To: Justin Wood <116057@bacon.qcc.mass.edu>
CC: www-style@w3.org

Justin Wood wrote:
> On Thu, 10 Mar 2005 12:14:51 -0500
>   Matthew Raymond <mattraymond@earthlink.net> wrote:
>>   Then again, if I understand correctly, |appearance| 
>>doesn't affect 
>>the |display| property. Should this require "tab" and 
>>"tab-group" values for |display|?
> See for reference, the WhatWG concept of "Tabs" as it 
> stands for now (The document is ever changing)
> http://whatwg.org/specs/web-apps/current-work/#section1

    HTML is supposed to be semantic markup, not functional or 
presentational (although defaults for specific elements are permitted), 
and therefore the survival of the <tabbox> element is far from a 
certainty. Even Ian isn't terribly thrilled about it, and I think it was 
his idea. (I think it will eventually be replaced with an element that 
allows the user to select a specific item in a list and maintain that 
selection. Then, the author need only style the items in the list as 
tabs using CSS.)

> Also something by Fantasai when "dared" by Ian to write a 
> current example of "Tab" display capability if it was to 
> be implemented in some way. (Requires JS and good CSS 
> support iirc)
> http://fantasai.inkedblade.net/style/design/tabs

    I think this is more relevant:


    It specifies "tab" and "front-tab" values for the |display| 
property, which is what I was thinking about earlier. Now that I think 
about it, if they implement exactly what's in the link above, tabs would 
be easy:

| .tabgroup a { appearance: tab; display: tab }
| .tabgroup a:selected { display: front-tab }

    Only problem above is that <a> would somehow have to be selectable 
as opposed to focusable. Perhaps that's where a <tabbox>-like element 
comes into play. Perhaps we need a list with a mutually exclusive selection:

| <sl>
|  <a href="...">Tab 1</a>
|  <a href="...">Tab 2</a>
|  <a href="...">Tab 3</a>
| </sl>

| sl > * { appearance: tab; display: tab }
| sl > *:selected { display: front-tab }

    I know, move it to WHATWG... It's just hard to come up with a 
solution that doesn't cross over.

> I am far from an authority on this, just thought it would 
> help everyone involved.

    Actually this has been quite helpful.
Received on Thursday, 10 March 2005 22:19:40 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:17 UTC