A CSS-Only Clock | Hacker News Reader

A CSS-Only Clock

css-tricks.com

24 pointsrmason18 comments

> "It’s simply not possible to access the local time with HTML and CSS to automatically set our clock."

Headline is false. I was excited about it, too.

The author does point out that this is how real clocks work too, which seems kind of fair. (But I was also disappointed.)

Sundials are clearly the superior clock.

Honestly, I feel like https://xkcd.com/169/ applies - the author is being intentionally misleading to generate views. Saying some sort of, "well technically [in a different context], yadda yadda" doesn't change that.

Maybe i could give some benefit of the doubt if they didn't include the word "current", but i see no way to read it as anything other than decitful once that word is included in the headline.

You can blur the line if the server generates the time in HTML.

Seems like it's related to his book "All you need is HTML and CSS". There's two more example projects from his book:

CSS-only Interactive, Swipeable Image Carousel

https://matemarschalko.medium.com/css-only-interactive-swipe...

Animated page scroll with HTML and CSS only

https://levelup.gitconnected.com/animated-page-scroll-with-h...

For anyone curious: you can't actually get the current time in CSS. In the post they hard-code a starting time and load the page at the right moment.

Just like real clocks: they don't magically set the right time when you pop in a battery and turn them on - generating the CSS vars in their own file to make sure that right time is used is pretty simple, and the equivalent to presetting a clock for someone when they buy it =)

Real clocks also dont usually come with headlines claiming that they do.

your claim is that clocks are not marketed as devices that tell time correctly?

They're not marketed as devices that tell the "current" time.

Except i guess things like https://www.amazon.ca/Infinity-Itc-Atomic-Clock-Controlled/d... which do actually auto set the current time.

Seems totally valid for a CSS/HTML clock to basically get the time on "startup", and then run off that.

That's similar to how the computer fetches the current time from the quartz crystal on startup.

Considering that this article is posted in CSS tricks, i expected an embedded Codepen example which would have made it more fun.

Prior art (I'm sure there are earlier ones):

https://www.quaxio.com/pure_css_digital_clock.html

CSS only digital clock "best viewed at noon or midnight". Discussed at https://news.ycombinator.com/item?id=25595439

Of course this one is no different and can't tell the current time.

Not sure if it's a well known trick, I usually have a JS function in a util library for setting CSS variable.

    // Set value to the variable at the element, default to :root.
    // e.g. setCssVar("--varFoo", 123) 
    function setCssVar(cssVar, value, elemSelector) {
        let elem = document.querySelector(elemSelector || ":root");
        elem.style.setProperty(cssVar, value);
    }

Why the clickbait headline? Like this is pretty cool by itself, why bother with the misleading headline?

I'm not a web developer at all and I guessed how I would do it from the title alone (including having the server send the initial values in the CSS)... but that feels like an awful lot of code for what amounts to 3 animated rotating divs.

Likewise, you can do a similar thing with a GIF image.

The article actually convinced me to turn on CSS animations (which I normally keep off to reduce distraction), in the hope that I could actually see a working example on the page, but unfortunately it seems it only contains images.

The negativity of comments here is astounding.

I think this demo is packed with clever tricks and I've actually learned more than I expected.

Congrats to the author and thanks for posting.

Reply on news.ycombinator.com