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

[CSS3] tabbed(stacked) ...

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Sat, 17 Dec 2005 11:25:54 -0800
Message-ID: <022401c6033f$b30f5fb0$3201a8c0@Terra>
To: "www-style" <www-style@w3.org>

Some thoughts about:
http://www.w3.org/TR/2005/WD-css3-layout-20051215/#tabbed

Seems like CSS indeed is entering "behavioral style" area.

Tabbed panels switch is a typical UI element/component and it appearead 
first
as far as I remember in IBM's CUA documents.

Tabbed switch is really a visual component - it has not only visual 
representation but
also distinct behavior. For example it handles focus and keyboard events in 
it's own
way.

I mean it is not enough to define screen layout.  Tabs behavior needs to be 
defined also somehow.

Speaking about stacking layout - currently CSS already allows to define 
stack layout and place tabs
with labels more or less successfully:

block[role="panel"] { display:none; }
block[role="panel"][current] { display:block; }

<block role="stack">
   <block>
      <span role="tab" current name="t1">Tab1</span>
      <span role="tab" name="t2">Tab2</span>
   <block>
   <block role="panel" current name="t1">Panel 1</block>
   <block role="panel" name="t2">Panel 2</block>
</block>

The only feature we needed here is to assign somehow
"tabs behavior" to block[role="stack"]

"tabs behavior" is a simple state switch and can be formilized
strong enough:

BEHAVIOR tabs
{
  WHEN span[role="tab"] IS GETTING STATE:active
  {
     SET  STATE:current
         TO span[role="tab"][name= ##THIS/name ]
     SET  STATE:current
         TO span[role="panel"][name= ##THIS/name ]
  }
}

We just need to be able to connect this dynamic rule
to particular DOM element. I beleive that CSS is the
best place where it can be done:

*[role="stack"] { behavior:tabs; .... }

Such "behavior rules" are generic - they
are switching state flags (:current, :checked, etc.)
of elements in some abstract DOM ( HTML or XML  )
and will peacefully coexist with the rest of CSS.

----------------------------------------
Practical implementation of tabs behavior:
Screenshots:
http://www.terrainformatica.com/htmlayout/images/tabdemo.png
http://www.terrainformatica.com/htmlayout/images/systabs.jpg

Source code of tabs behavior (C++) is in the file
/include/behaviors/behavior_tabs.cpp
of HTMLayout SDK (Windows and Windows Mobile):
http://www.terrainformatica.com/htmlayout/HTMLayoutSDK.zip

Andrew Fedoniouk.
http://terrainformatica.com
Received on Saturday, 17 December 2005 19:29:59 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:42 GMT