- From: Matthew Raymond <mattraymond@earthlink.net>
- Date: Mon, 07 Aug 2006 01:55:23 -0400
- To: www-style@w3.org
After reviewing the following part of the CSS3-Layout spec...
http://www.w3.org/TR/2005/WD-css3-layout-20051215/#tabbed
...I'd like to suggest the following changes.
One of my major concerns with the current model for tabs is that
determining which tab is selected is handled by CSS rather than the
markup. This is a dangerous situation, because the currently selected
tab may not be accessible via the DOM.
Here's my idea of how the tabbed display model should work:
+-------- tab-box --------+
| |
| +---- tab-strip ----+ |
| | | |
| | +-----+ +-----+ | |
| | | tab | | tab | | |
| | +-----+ +-----+ | |
| | | |
| +-------------------+ |
| |
| +------ deck -------+ |
| | | |
| | +-----------+ | |
| | | | | |
| | | card +-+ | |
| | | | | | |
| | +-+---------+ | | |
| | | | | |
| | +-----------+ | |
| | | |
| +-------------------+ |
| |
+-------------------------+
The display value "tab-box" takes the place of "stack". The "tab" and
"card" value remains unchanged.
The values "tab-strip" and "deck" take the place of the two
individual parts of the "stack" model.
Elements with a |display| value of "tab" are treated as "inline"
unless they have a "card" or "tab-strip" ancestor. If a "tab" has a
"card" ancestor, the "card" ancestor must also be the descendant of a
"deck" or "tab-box". Elements with a "tab-box" |display| value that have
no "deck" descendants will generate an implied "deck" for all "card"
descendants.
If a "card" contains "tab" elements, the "tab" elements are contained
in the first available "tab-strip" element within the ancestor
"tab-box". If no "tab-strip" exists an implied "tab-strip" container is
created. An implied "tab-box" would also be created if the "card"
containing "tab" elements has no "tab-box" ancestor.
The values "card" and "deck" can be used independently of the tabbed
model to produce things like widgets. All children of "deck" elements
that are not "card" elements are treated as if they are contained inside
a "card".
This new model maps directly to XUL as follows:
<tabbox> --> "tab-box"
<tabs> --> "tab-strip"
<tab> --> "tab"
<tabpanels> --> "deck"
<deck> --> "deck"
<tabpanel> --> "card"
A "tab" should automatically match :selected if the associated
"tab-panel" matches :selected (or :current?).
Here's the example from the draft using the new display values.
| <style type="text/css">
| body {background: silver; color: black}
| div.records {display: tab-box; border: outset}
| div.record {display: card}
| h2 {display: tab; width: 5em; border: outset; text-align: center}
| h2:current {border-bottom: solid silver}
| </style>
| <div class="records">
| <!-- Implied "tab-strip" here. -->
| <!-- Implied "deck" begins... -->
| <div class="record">
| <h2>Men's fashion</h2>
| <ul>
| <li>Oversized jeans, 4 pockets.
| <li>...
| <ul>
| </div>
| <div class="record">
| <h2>Women's fashion</h2>
| ...
| </div>
| <div class="record">
| <h2>Children's fashion</h2>
| ...
| </div>
| <!-- ...Implied "tab-stack" ends. -->
| </div>
Here's an alternative way to do the above example:
| <style type="text/css">
| body { background: silver; color: black }
| div.records { display: tabbox; border: outset; }
| div.recordgroup { display: deck; }
| ul.tabstrip { display: tab-strip; }
| ul.tabstrip > li {
| display: tab; width: 5em; border: outset; text-align: center;
| }
| ul.tabstrip > li:current { border-bottom: solid silver; }
| </style>
|
| <div class="records">
| <ul class="tabstrip">
| <li selected="selected">Men's fashion
| <li>Women's fashion
| <li>Children's fashion
| </ul>
| <div class="recordgroup" begins>
| <div> ... </div>
| <div> ... </div>
| <div> ... </div>
| </div>
| </div>
(Small note: The |selected| attribute is made up for the sake of the
example.)
Well, it's a mess, and I'm sure it's full of holes, but I just wanted
to through that out there and see what people think.
Received on Monday, 7 August 2006 05:55:32 UTC