Really cool! Would anybody care to enlighten me on how the start/stop buttons work? I see that they add an anchor to the URL but I couldn't figure out how that triggers the style change. Thanks for sharing!
It's behaving really weird for me. Initially the milliseconds go from 0 to 99 repeatedly. After click on play, the seconds start increasing and when paused it is paused but the milliseconds still go from 0-99 repeatedly. Similar behaviour with stop, it resets the seconds but milliseconds still go from 0-99 repeatedly.I'm on Chrome 31.
Oddly though this behaves just fine in IE10 and much better than in Chrome which keeps counting up the milliseconds regardless of whether the stopwatch is running or not.
Nice work, but I find it a bit disappointing that the first thing I see on a "CSS-only" site is a big warning from NoScript. I think this site would make its point more clear if it didn't contain any JavsScript, even though it's just for Google Analytics.
It is literally a stopwatch. You click play, you click pause, you click stop and it behaves exactly like the Seiko hanging from your gym teacher's neck. The interesting part is that it works with nothing but HTML/CSS, and the animations are flawless while the design is clean.
Whether it is the wrong tool is arguable (it is a clever declarative implementation). But regardless, demos such as this primarily demonstrate features and functions of a technology in a novel way, and it seems likely many who view will have a 'you can do that with CSS?' reaction, perhaps taking it to add to more traditional implementations.
And the risk is they'll get inspired and try to solve another problem with css and a "clever declarative implementation" only that is better solved with the appropriate technology.
I'm not saying these tech explorations are bad, they just need to have a big fat disclaimer "don't try this in prod" and preferably a reference implementation of how it would be done "properly".
You certainly can and should use the underlying concepts, keyframes and pseudo content "in prod". You could use this stopwatch as well. Why not? It all depends on what you are trying to accomplish.
If everyone is worried that the tech is too scary or unstable or "wrong" TM, then we will never push the web forward into new territory. Remember when all form submissions forced a page refresh? If people were too afraid of front-end validation and AJAX calls then this would still be the reality.
and preferably a reference implementation of how it would be done "properly"
Any implementation could be torn to shreds.
Because that's how the evolutionary, competitive nature of technology works. Nothing is "right" or "wrong", to use the scarequotes so in fashion, but is from a perspective and position. If things needed disclaimers around here -- as if we're all idiots, or worse jaded cynics -- then I think it would be a bad day for HN.
The disclaimer wasn't for the HN crowd necessarily. And the reference implementation would be useful for both showing "the proper way" and acting like a contrasting view. I don't understand animating with css so I would love to see "this is how you would accomplish the same thing using javascript", which I (without understanding css animation) believe is the right tool.
But of course, houndres of insane trick-focused css gurus churning out millions of crazy tech demos... Surely someone will find out some novel, more useful technique that we conservative programmers will begin to use for making the boring shit we do less burdensome. So I'm all for it really, despite my initial negative tone.
1. http://thejavascripthomework.wordpress.com/2012/10/13/15-pur...
2. http://cssdeck.com/labs/css-panic-game