File Under: CSS

Target the Future With CSS 3′s :target Rule

Opera’s Dev Center has plunged head first into the complexities of the CSS3 :target selector with a tutorial that shows an example of how :target can be used to trigger animations and fades.

The result is a series of sliding, animated transitions that move and fade in and out as your click the menu links — all done with pure CSS, not a line of JavaScript necessary.

Of course there is a catch — the example only works in Opera.

The main problem with the :target selector is that a bug in WebKit prevents it from working in Safari and Chrome. The Opera tutorial code solves this with a media query which unfortunately also applies to Gecko, so the demo really only functions properly in Opera.

While that’s probably more than enough to stop most developers from using :target, the tutorial is nevertheless a nice glimpse of what will work in the near future. Perhaps the best thing about :target is that it really forces you to pay attention to the hierarchy of your HTML. And for that alone, Opera’s tutorial is well worth a read.

Photo: Mixy Lorenzo/Flickr/CC

See Also: