3 ms·
A CSS-Only Clock
- hamandcheese 5y agoFor 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.
- TheRealPomax 5y agoJust 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 =)
- bawolff 5y agoReal clocks also dont usually come with headlines claiming that they do.
- lupire 5y agoyour claim is that clocks are not marketed as devices that tell time correctly?
- bawolff 5y agoThey're not marketed as devices that tell the "current" time. Except i guess things like https://www.amazon.ca/Infinity-Itc-Atomic-Clock-Controlled/dp/B001949RCI https://www.amazon.ca/Infinity-Itc-Atomic-Clock-Controlled/d... which do actually auto set the current time.
- fouc 5y agoSeems 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.
- username91 5y ago> "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.
- Wowfunhappy 5y agoThe author does point out that this is how real clocks work too, which seems kind of fair. (But I was also disappointed.)
- Asraelite 5y agoSundials are clearly the superior clock.
- bawolff 5y agoHonestly, I feel like https://xkcd.com/169/ 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.
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- simonmales 5y agoYou can blur the line if the server generates the time in HTML.
- deleted 5y ago[deleted]
- bawolff 5y agoWhy the clickbait headline? Like this is pretty cool by itself, why bother with the misleading headline?
- vincengomes 5y agoConsidering that this article is posted in CSS tricks, i expected an embedded Codepen example which would have made it more fun.
- deleted 5y ago[deleted]
- oefrha 5y agoPrior art (I'm sure there are earlier ones): https://www.quaxio.com/pure_css_digital_clock.html 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 https://news.ycombinator.com/item?id=25595439 Of course this one is no different and can't tell the current time.
- fouc 5y agoSeems 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-swipeable-image-carousel-3a38afe3da58 https://matemarschalko.medium.com/css-only-interactive-swipe... Animated page scroll with HTML and CSS only https://levelup.gitconnected.com/animated-page-scroll-with-html-and-css-only-3788c4e2b853 https://levelup.gitconnected.com/animated-page-scroll-with-h...
- userbinator 5y agoI'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.
- deleted 5y ago[deleted]
- xcambar 5y agoThe 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.
- deleted 5y ago[deleted]
- ww520 5y agoNot 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); }