cssway:
my blog about cascading stylesheets, web standards,
and Freeway 4 Pro.
Tabbed Content using Target Pseudo Class
[ UPDATED ] below
There have been a few recent Freewaytalk threads discussing how to create a ‘tabbed’ info area on a single page. The ongoing discussion has been very interesting, and master actioneer Paul Dunning was even able to produce an action for it.
I’ve been tinkering for a while now with a CSS method to get this type of functionality. Here is an example that I made… It is only one page — no frames or any trickery like that — and was built entirely using Freeway 4 Pro.
For this piece, the ‘tabs’ are an unordered list of links —using similar CSS for styling horizontal menus to create a simple tabbed look. Depending on how much time and effort are involved, you can make these tabs look as fancy as you like. That's because CSS is all about appearance.
The functionality is provided by a member of a special group of CSS modifiers known as Pseudo Classes. The most well known pseudo class modifiers are the Anchor modifiers -- :hover, :active, :link, and :visited. The pseudo class modifier used in my example is the :target pseudo class.
Perhaps you noticed that my initial link ended with an anchor identifier. The trickery that I am attempting is not to take you to a location on the page, but to use that identifier to trigger the visibility of a div that is hidden until triggered.
Caveats
My example uses an inline div structure to handle the appearing and disappearing of content. I’m not sure this structure is necessary, but it is what I am most familiar with when it comes to flexible content.
I have no working solution for displaying the current tab at this time.
It tests well in Mac Safari and Firefox —but I’m not sure what the WinIE functionality is like. If IE supports this particular pseudo class, then I imagine some hacking may still be necessary.
[ UPDATE ]
At first blush it turns out that no version of Internet Explorer can access the hidden elements because :target is a CSS3 specification. Not even the newest version is able to use it. Damn my eyes! Just when I’m thinking that I am ahead of the curve, it turns out that I’m just using the wrong browser. And by ‘wrong browser’, I mean the ‘right browser’. *Sigh*
[ UPDATE 2 ]
Apperently Netscape 7 honors the target selector… Here’s a 2003 article by Eric Meyer explaining and illustrating the selector. If Netscape has been on top of this since 2003, then maybe other Mozilla based browsers will be too. Win Firefox anyone?
HTML Dog has a Suckerfish javascript emulation of :target for IE browsers… and I thought I was trying to use CSS to get away from having to use javascript to do this?
Now that I think of it, IE doesn’t even support the :hover pseudo class, does it? We will have all evolved to use telepathy by the time Microsoft gets with the program... Jeesh!
15.03.2007. 02:52
Mikhel jaffe on 15.03.2007. 15:08
Thanks any way, it was worth the shoot.