Re: Tabbed Interfaces in CSS

On Apr 20, 2009, at 7:44 AM, Tab Atkins Jr. wrote:

> Tabbed Layout in Pure CSS
> =========================
> At http://www.xanthir.com/css-modal.html I have implemented a tabbed
> display in pure CSS.  The cards have class="card", and I use the
> :target pseudoclass to display the active card.  I then employ the
> ingenious hidden :checked hack (I totally can't remember who
> introduced this originally) to style the active tab - the tab, in
> addition to being a link (to trigger :target behavior) is also a
> <label> corresponding to a hidden radio button immediately preceding
> it, so I can use a ":checked + * a" selector to target the active tab.
>
> This example is a horrible hack, and has several weaknesses (you have
> to use non-semantic <input>s to style the tab, you can't create
> multiple 'stacks', other hash-links (like the modal example also on
> that page) interfere), but it demonstrates that the essential powers
> needed to implement this are appropriately part of CSS.
>

This is similar to what I came up with before.[1][2] 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).

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.

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).


[1] http://bradclicks.com/cssplay/tabs.html
[2] http://lists.w3.org/Archives/Public/www-style/2008Feb/0303.html