Re: Tabbed Interfaces in CSS

On Apr 21, 2009, at 9:52 AM, Tab Atkins Jr. wrote:

> On Tue, Apr 21, 2009 at 11:48 AM, Brad Kemper  
> <brad.kemper@gmail.com> wrote:
>> And actually, the more I think about it, the more appropriate I  
>> believe it
>> is to have the "tab" near or within the "card" it is associated  
>> with. You
>> have to consider that without styling the HTML should still make  
>> sense, and
>> it doesn't so much if all the labels for each card are separated  
>> from the
>> blocks representing the cards.
>
> I agree *if* a pure-CSS interaction is used.  In that case the older
> display:stack/card/tab solution is best, because it degrades to a
> perfectly normal page.

But at the expense of all-new display properties, which I think is a  
bad thing. I should be able to have a set of tabs that use any of the  
existing display values, and not have to delve into this confusing  
display-model/display-role morass. It just doesn't seem necessary, and  
adds extra complexity. My way degrades into perfectly normal pages too.

> If tabs can be separated from cards in the markup, then I think the
> mechanism *has* to be link-target-based, so that it degrades into
> links to the appropriate section on the page, which is still sensical
> and somewhat useful.

Using LABEL, with some small adjustments for the FOR attribute, would  
also allow that separation. Clicking on the label is like clicking on  
the element it either surrounds or is FOR. Links are only one thing at  
a time, so using them for tab-panel-showing would not allow a page  
with more than one set of tabs to have a particular tab in the front.  
And wouldn't it also cause the page to scroll to the tab, whether that  
was wanted or not? I'm not a fan of using links in this way, as it  
really requires a set of in-page links be added to the HTML, instead  
of using naturally occurring structures of the page that are already  
appropriate indicators of the content they represent.

Received on Tuesday, 21 April 2009 17:38:20 UTC