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 =)
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.
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.
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);
}
24 comments
[ 3.1 ms ] story [ 85.5 ms ] threadExcept i guess things like https://www.amazon.ca/Infinity-Itc-Atomic-Clock-Controlled/d... which do actually auto set the current time.
That's similar to how the computer fetches the current time from the quartz crystal on startup.
Headline is false. I was excited about it, too.
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.
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.
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...
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.
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.