Re: a new tablist element ?

On Mon, Oct 18, 2010 at 5:33 AM, Aurélien Levy <aurelien.levy@free.fr> wrote:
>  Hi,
>
> One of the most used navigation design pattern on website or application is
> tabs.
> So I'm wondering why there isn't a new html5 element to manage that instead
> of ARIA/XUL/dl/ul, etc
>
> Maybe we can have something like :
> <tl>
> <ti></ti>
> <tc></tc>
> <ti></ti>
> <tc></tc>
> <ti></ti>
> <tc></tc>
> </tl>
>
> or with attribute
>
> <tl>
> <ti id="xxx"></ti>
> <ti id="zzz"></ti>
> <ti id="yyy"></ti>
> <tc for="xxx"></tc>
> <tc for="zzz"></tc>
> <tc for="yyy"></tc>
> </tl>
>
> detailed specifications for these elements can be taken from the ARIA spec
> http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#tab

In general, this is a styling problem, and one that's not too hard to
address in CSS using :target.  Make your tabs an <a href=#card1>,
pointing to <div class=card id=card1>.  This isn't perfect, though -
you can't target the current tab (though there's been suggestions for
a pseudo to match links that match the current page and/or target,
which may hit Selectors 4), and it's difficult to target a particular
tab to be open on page load.

An alternate idea with some potential is to combine <details> with
Template Layout.  Something like:

<details open>
  <summary>foo</summary>
  FOO
</details>
<details>
  <summary>bar</summary>
  BAR
</details>
<style>
body {
  display: template( "a" /min-content "b" /* );
}

body > details {
  position: slot(b);
}

body > details > summary {
  position: slot(a);
}

body > details[open] > summary {
  font-weight: bold;
  /* other "current tab" styling */
}
</style>

Not sure of the semantics there, but it has potential, given the
current lack in CSS to duplicate the functionality properly.

~TJ

Received on Monday, 18 October 2010 15:58:53 UTC