- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Tue, 7 Feb 2006 16:09:47 -0800
- 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> <div id="panles"> <div id="first-tab" >....</div> <div id="second-tab" >....</div> </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: <style> div#first-tab { display: if( input#first:checked, "block", "none" ); } div#second-tab { display: if( input#second:checked, "block", "none" ); } </style> Just a rough idea.... Andrew Fedoniouk. http://terrainformatica.com
Received on Wednesday, 8 February 2006 00:10:07 UTC