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:
