Double Click in CSS

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

With the recent proliferation of touch devices, the web designers of the world are losing our beloved mouse pointer. There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Then just earlier this week I did a post about how you can use the tabindex attribute to basically respond to a click with pure CSS. It got me thinking, can we somehow pull off a double click with pure CSS too? This would by no means replace the hover event, but might be somewhat of an alternative to have the sequence be: tap → change state / activate link → tap again to visit link.

Rabble rabble rabble!

These newfangled touch devices all support JavaScript anyway! You can just use JavaScript to make double click events! Rabble rabble rabble!

Yes, you can. For anyone interested, “dblclick” is a native JavaScript event. If you wanted to, for example, force links to be double clicked instead of single clicked, you could bind a simple { return false; } function to the click event. Then also bind a function to dblclick that would change the window.location to the links href attribute.

This article isn’t about that, it’s about hardcore CSS nerdery and seeing if we can also do it without using JavaScript.

The Results

I really wanted to boil it down to one technique and declare it the best possible way to accomplish CSS double clicking. But as it turns out, there are just too many issues and considerations to do that. Instead, I made up a page showing all the most interesting techniques tried.

Most of the techniques involve some kind of covering element which is hidden, kicked off the page, or buried when the first click happens. That first click can come in the form of :active or :focus. :active is nice because it doesn’t require HTML5. :focus does, because it needs the element to have a tabindex or contenteditable attribute to be able get focus. One way around that was to use an input element to do the covering, but that has it’s own quirks.

All in all, it was a nerdy good time poking around with this idea. There are probably dozens more ideas, but for something this ultimately trivial I had to nip it in the bud and call it a wrap.

View Demo

Credits

There was probably more than twenty different things tried between me and others. Special thanks to Darcy Bross and this comment on Forrst for the first lead into working examples and to Mattias Buelens and Topher Wilson for playing with it and working on variations.

More

If you want to play around with the idea, I suggest tinking around on JSBin and saving your best examples. I’ll link em up here if you guys figure out some awesome ones. Here are some interesting ones that happened in playing with all this:

http://jsbin.com/uqana4/2/
http://jsbin.com/owuso/6/