var d = new Date();
document.documentElement.style.setProperty("--delay",
-(d.getHours() * 3600 +
d.getMinutes() * 60 +
d.getSeconds() +
d.getMilliseconds() / 1000
) + "s");
I think this would do it. It roughly matches what I did a few years back for an analogue CSS-only (except for this) clock.
However, this does still have a weakness: if the browser is suspended (e.g. machine in standby) it gets out of sync. It doesn’t care about leap seconds, either. You could fix these things by triggering this position update every so often, but that would be missing the point of it.
Yes, most people reading this thread know that it’s possible with JS, but then it would use javascript which I assume was not the point of the experiment. Trying to suggest javascript is missing the point.
I think there’s a key difference between what I suggest here and doing the entire thing in JavaScript: this is purely using JavaScript to set the initial time; the actual time keeping is done by the browser with a CSS animation, and thus it’s still a clock if JavaScript is unavailable or disabled, just one that starts at 12 o’clock instead of the correct time.
You can’t do it server-side because you don’t know the client-side time. The closest you could do would be to choose Swiss time for the sake of it (or UTC if you prefer).
Remember also that the clock will be out of sync if you set it server-side, because of latency between the server and client. This inaccuracy would doubtless besmirch the name of Swiss timepieces. Could be fun hooking into TCP and TLS negotiation to estimate latency in order to compensate in the animation-delay and make it probabilistically more accurate. Now that would be a fun article to read. I’m almost tempted to devise a way to do this myself. I suspect I couldn’t get the necessary information through my standard nginx reverse proxying arrangement and would need to serve the CSS from a different port so that I could handle the negotiation in a process of my own and observe the timings.
However, this does still have a weakness: if the browser is suspended (e.g. machine in standby) it gets out of sync. It doesn’t care about leap seconds, either. You could fix these things by triggering this position update every so often, but that would be missing the point of it.