- From: Brad Kemper <brad.kemper@gmail.com>
- Date: Mon, 20 Apr 2009 09:00:54 -0700
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: www-style <www-style@w3.org>
- Message-Id: <16532CB7-B38F-4A4F-A94D-FBDC97C4707B@gmail.com>
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
Received on Monday, 20 April 2009 16:01:36 UTC