W3C home > Mailing lists > Public > www-style@w3.org > February 2006

Re: [CSS3] tabbed(stacked) ...

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Tue, 7 Feb 2006 16:09:47 -0800
Message-ID: <01be01c62c43$f9860a20$c302000a@internal.toppro.net>
To: "Matthew Raymond" <mattraymond@earthlink.net>, "Laurens Holst" <lholst@students.cs.uu.nl>
Cc: <www-style@w3.org>

----- Original Message ----- 
From: "Matthew Raymond" <mattraymond@earthlink.net>
To: "Laurens Holst" <lholst@students.cs.uu.nl>
Cc: <www-style@w3.org>
Sent: Tuesday, February 07, 2006 11:40 AM
Subject: Re: [CSS3] tabbed(stacked) ...

| Laurens Holst wrote:
| > Matthew Raymond schreef:
| >>>> 3) It pollutes the URL.
| >>>>
| >>> No it does not. This preserves the ability to link to a certain state
| >>> within a document (for free, it is inherent to the design), which is
| >>> quite a valueable merit.
| >>>
| >>    That's somewhat true, but we need to distinguish between a
| >> presentational state and linking to a specific part of the document. If
| >> you're using an ID in the URL solely to trigger the :target
| >> pseudo-class, they you're talking about presentation.
| >
| > I don’t think it is different than any other fragment identifier. You
| > are linking to a specific clearly identified section of the document
| > (e.g. interface settings, auto-reply settings, personal information,
| > etc). Whether it is displayed as a tab is a presentational detail.
|   The trouble is that true tabs are not hyperlinks. Tabs are more
| closely related to the scroll bars that are controlled by the "overflow"
| property. Think of how problematic it would be to have to simulate
| "overflow: scroll" using URL tricks. While I do feel that tabs are
| largely presentational, I don't feel they represent a document state any
| more than your scrollbar position. Linking to a tab should probably
| display it, but hyperlinks shouldn't be REQUIRED to display a tab.
|   Let me make my position clear. I don't think using :target and
| hyperlinks are an abuse of CSS and HTML. I just don't think they should
| be used as an excuse for not specifying and implementing a better solution.
| >> If the user
| >> specifically wants to link to a certain element within the document,
| >> then that's a navigational state. What was proposed was using the
| >> document URL for presentational purposes.
| >
| > Tabs aren’t navigational elements?
|   No more than scroll bars are. Imagine for a moment that a web author
| created a simulation scroll bar, where clicking on the scroll bar acts
| as a hyperlink to the next section. Thus, if you want to view a section,
| you must navigate via URL to that document fragment.
|   Not fun, is it? People don't want to go to a different URL just to
| browse a page. They just want to see the rest of the page. Similarly,
| tabs are just a more finite way of scrolling through sections. It's a
| distinction of navigating /through/ the document as opposed to
| navigating /to/ the document fragment. If you don't understand that
| distinction, remember that with hyperlinks, every tab click is going
| into your browser history. Imagine the browser history if every section
| in a document you scrolled over were entered into your browser history
| and you'll get the idea.
|   The bottom line is that we either need a widget or the ability to
| style some non-URL-related state (like :selected perhaps?), both of
| which would probably require some kind of markup-level support. (Unless
| you want to make something similar to the CSS table model, but that may
| be to complicated for the average web author to bother with.)

Imagine group of  radio buttons - <input type="radio" name="groupname" />
Only one button in the group can be in :checked state.
This is exactly the same behavior as tabs on tabstrip.

You just need to be able to style such inputs to make them look as tabs.
<div id="tabstrip">
    <input name="tabs" id="first" />
    <input name="tabs" id="second" />
<div id="panles">
    <div id="first-tab" >....</div>
    <div id="second-tab" >....</div>

The only thing here what is missed:
we need to connect/bind somehow display: attribute value
of first-tab to the value of :checked state flag of input#first.

For example using "if" CSS function, like:
       display: if( input#first:checked, "block", "none" );
       display: if( input#second:checked, "block", "none" );

Just a rough idea....

Andrew Fedoniouk.
Received on Wednesday, 8 February 2006 00:10:07 GMT

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