kaioa.com

pew pew

Know your :target

:target is one of those sparkling new CSS3 pseudo-classes. Unlike the other (pseudo-)classes it got some semi-dynamic properties without any kind of client-side scripting. Well, :hover and :active are also somewhat dynamic, but we're used to that stuff by now.

The :target pseudo-class is supported by all modern browsers. IE6 and IE7 are of course way too old. Unfortunately IE8 still doesn't support this. Pretty disappointing, isn't it?

However, this shouldn't stop you from using :target. If it's used as intended it only adds small visual cues which improve usability a bit. Dropping them won't break the site, but they are surely nice to have. Wikipedia for example uses :target to highlight the footnote you jumped to and anyone with a decent browser benefits from this small tweak.

I'll show you how :target is used on Wikipedia – or more precisely: in general, and I'll also show you some rather experimental things you haven't seen before.

Proper :target usage

Wikipedia is probably a good example for this. They are using :target for at least four years and they also use it as intended. Not really exciting, but very useful nonetheless. So, for starters head over to some article (e.g. the one about CSS) and hover one of the footnote links while taking a look at the status bar like I did here:

Figure 1: A footnote link on Wikipedia
(Counting starts at zero. The first footnote links to "#cite_note-0".)

The markup from the example above looks like this:

[...] on July 19, 2007.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3" title=""><span>[</span>4<span>]</span></a></sup>

It looks a tad irritating at first, but it's just a usual anchor/fragment link. Back in the days links like those were used for jumping to elements with a matching name attribute. Nowadays, however, name isn't used anymore. Instead ids are used. Since ids are supposed to show up at most once per document anyways, they are a perfect choice for this stuff.

But let's dissemble the whole thing before we move on. The part in the middle is the anchor link to the footnote:

<a href="#cite_note-3" title="">[...]</a>

The outer sup element has an id, which is used for jumping back (more on that later):

<sup id="cite_ref-3"[...]>[...]</sup>

After we clicked one of those footnote links, we'll see something like this:

Figure 2: A footnote on Wikipedia with active :target highlighting

As you can see out footnote of choice got some nice blueish background. The rather explicit CSS rule looks like this:

ol.references > li:target { /* ".references li:target" would have been specific enough */
    background-color:#def;
}

The markup in question looks like this:

<ol class="references">
    [...]
    <li id="cite_note-3"><b><a href="#cite_ref-3" [...]>^</a></b> <a [...]>Archive of W3C News in 2007</a></li>
    [...]
</ol>

Dissection time! First the link in the middle, which brings us back to the point where this footnote was referenced:

<a href="#cite_ref-3" [...]>^</a>

The reason why the browser jumped to this location (and why the :target rule was triggered) is the id of the outer li element:

<li id="cite_note-3">[...]</li>

A quick recap

You need four things:

1. An element with an id to jump to like:
   

   <span id="example">Hello :target<span>

2. A link, which allows you to do this jump (you can also enter the fragment bit in the address bar for quick testing):
   

   <a href="#example">jump</a>

3. An Element:target rule with some visible results like:
   

   span:target{background:#f00}

4. A modern browser – duh.

Improper (but entertaining) :target usage

Warning: :target shouldn't be used like this (yet?).

FAQ #1

This was my first try. It uses a ul/li structure. The answers are inside a div element, whose display property is set to block through a :target rule (li:target>div).

Figure 3: Experimental FAQ #1

FAQ #2

This one is like the first demo, but it uses a cleaner more meaningful dl/dt/dd structure. The answers are inside a dd element, whose display property is set to block through a :target rule (dt:target+dd).

Figure 4: Experimental FAQ #2

Gallery #1

Like the second FAQ demo this one also uses a definition list. The images are inside the dd element and absolutely positioned. Their display property is set to block through a :target rule (dt:target+dd).

Figure 5: Experimental gallery #1

Gallery #2

This one is basically the same as Gallery #1 – only the styles were slightly adjusted in order to get the thumbnails on the left side.

Figure 6: Experimental gallery #2

Closing words

Personally I think it's very cool that things like this actually do work. Well, to some extent. At the time of writing only Firefox gets everything in the demos right. Opera comes close (I already filed the bug reports), Webkit/Chrome fails miserably (seems like it can't deal with foo:target+bar constructs), and IE... well, it doesn't even try. ;)

I hope you learned something useful today. If you come up with other funky ideas, I'd love to hear about them.