Rabble rabble rabble!
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.
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.
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: