Stopwatch in CSS | Hacker News Reader

Stopwatch in CSS

paullaros.github.io

82 pointspaullaros37 comments

Open articleView on HN

There's actually a genre of pure-CSS games [1]. CSS3 Panic was interesting as (I think) the first one to keep score.

1. http://thejavascripthomework.wordpress.com/2012/10/13/15-pur...

2. http://cssdeck.com/labs/css-panic-game

This is cool. But should the fourth section (sub-seconds) be running from 0-99? It is currently running from 0-59, too.

Sorry about the nitpick; this really is a cool implementation :-)

Updated! Thanks for your feedback.

Very cool hack!

I've had CSS animations go out of sync before in Safari, so I presume this wouldn't be a very accurate timer in the long run...

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!

:target pseudo selector

ah cool thanks

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.

Aside from that, great work :)

Goes absolutely bat shit in IE11 flickering and all sorts going on.

Then again what do I expect?

Works fine in Chrome and Firefox.

✅ Obligatory IE bash

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.

Fastest time from play to pause seems to be 00:00:00:16. I think the fade animation prevents the DOM from responding any faster.

(What, doesn't everyone do the 'see how fast you can stop it' test to every stopwatch ever put into their hands?

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.

I love how the stop button is just a link to the page. Smart.

And how the pause button is... nothing, just to remove target from the start button.

I guess, although it makes it a nuisance to back your way out of the page after using the stopwatch a few times.

Could someone post a summary of how it works, for the benefit of those of us reading HN on our phones?

Edit: I'm not asking what it does, but how.

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.

Also, does it really not work on the phone?

I think he was talking about how it works from a programming perspective. He possibly can't view source on his phone.

Edit: For the record it works and looks fine on my android phone, better than Chrome on my desktop in my opinion.

For me, the button font doesn't load and the background transisiotions are, as always, extremely sluggish. (Firefox 17 ESR)

Upgrade firefox :)

Why are you stuck with ESR?

The button fonts aren't loading for me either in Firefox 25.

Looks great and works on Chrome. The idea is pretty nice.

The buttons don't work for me in Chrome 31.0.1650.57 m

what does "pure CSS" mean? no javascript ?

The entire page color change hurts.

is something supposed to happen when I press play (safari, iPad)?

The time starts ticking (chrome beta, android)

It'd be cool if I could read the time via JS

You can - try something like this:

parseInt(getComputedStyle($('#seconds'), ':after').top)/-76

(see https://gist.github.com/alexlouden/7481780 for full)

Great example of a cool trick using completely the wrong tool for the job.

Cool, you managed to untangle your hair using 5 pencils and some tape, now go buy a comb and never do that again.

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".

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.

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.

Reply on news.ycombinator.com