Comments on: On :target

By: paceaux

paceaux — Tue, 17 Apr 2012 22:26:14 +0000

I’ve used the :target pseudo-class a few different times in projects that were for modern browsers. Most recently, I’ve actually used it to create CSS-only accordions.

Granted, I know that jQuery can accomplish accordions, and that HTML5 has summary and details. But summaryand details doesn’t have wide browser support, while :target is pretty much IE9 and all modern browsers.

So, if you find yourself in a situation where the very large corporate client doesn’t want you using JS libraries, but they’re ok with CSS3 (yes, it happened to me) it’s an approach worth considering. I wrote a blog post on the approach.

http://blog.frankmtaylor.com/2012/04/17/clever-css-tricks-using-target-to-create-accordions/

By: Fahim Mahmood Mir

Fahim Mahmood Mir — Tue, 17 Apr 2012 12:58:55 +0000

How about to avoid Page Jumping Behaviour by javascript:void() ? i use it like this href=”javascript:void()”

By: dezebo

dezebo — Mon, 16 Apr 2012 16:18:54 +0000

I used to use “return false;” after any code to stop the page jump. For example (this was before I started using jquery) whenever I had an onclick event I would set href to “#” which would cause it to page jump. If I added “return false;” after my javascript code it wouldn’t do that (onclick=”example(‘test’); return false;”). Not sure if it would cause other issues though, didn’t appear to when I used it.

By: Rick Stephens

Rick Stephens — Sun, 15 Apr 2012 18:23:40 +0000

Hi Chris,
I played with :target a little after reading this post. Works great except on older IE, of course.

By: Luky VJ

Luky VJ — Sat, 14 Apr 2012 21:29:24 +0000

Hi there !
I’ve create an experiment with you technique, let’s see this !
http://cssdeck.com/item/307/animated-list-with-target

By: Moriartie

Moriartie — Sat, 14 Apr 2012 20:47:41 +0000

I’ve created a fiddle on this: http://jsfiddle.net/pq9hx/1/embedded/result/

(very, very basic demo!!)

By: Greg Simon

Greg Simon — Thu, 12 Apr 2012 21:26:27 +0000

So happy I came across this script, I was a day or two away from adding a bunch of target links to a site i’ve been working on and this method will make the end result sickkk.

Pretty stoked, hope the webkit animation I have in mind degrades nicely in older browsers…

By: Franco

Franco — Thu, 12 Apr 2012 16:57:54 +0000

Thanks for the data, There are a lot of things to learn, I haven’t heard about “:target” before, It is hard to keep up with everything

By: McGinty

McGinty — Thu, 12 Apr 2012 15:47:47 +0000

After reading this I was wondering if you could use :target to create a CSS-only modal window (have seen a few examples of this, but none that use :target). Turns out you can…

http://jsfiddle.net/leonard_mcginty/SzhLq/

Haven’t done a great deal of testing on it, and of course it crashes and burns in the usual browsers, but always fun to experiment.

Ace tip as usual Mr Coyier :-)

By: Ibnu

Ibnu — Thu, 12 Apr 2012 08:11:15 +0000

This tutorial is interesting, this is using css animation, what I know is not all browser are support with css animation, but I like it, are its ok if using css animation?