Pure Digital CSS, Swiss Made, Clock – No JavaScript, almost no HTML

[anonymousiam]

LOL, "This page is best viewed at noon or midnight."

[dheera]

You could just have the server serve up the correct offset when the page is requested. The code delivered to the browser would still be pure CSS.

Of course it might drift over time, but you could also serve up a refresh header to deal with that every hour or so.

[reaperducer]

Q: Clock always starts at 12:00:00. Is this project a secret tribute to microwaves?

I think it's a generational Easter egg that he went with "microwaves" instead of "VCRs" or even "clock radios."

[nkozyra]

I think all three of those things came to domestic ubiquity around the same time - late 60s to early 80s.

[schwartzworld]

We had all those things in my house as a kid in the 90s.

[ghoomketu]

Cool project and thanks for explaining it in the FAQ.

The best part about these projects in not seeing the demo but rather learning the clever hacks that make the things tick (no pun).

Reminds me of a video on Vue mastery in which Evan you created a mini vuejs in like 10 mins. Its one thing to use or see something, something totally another to see how it does what it does behind the scenes.

[Something1234]

Got a link to that?

[slmjkdbtl]

The file itself is beautiful and makes me want to put in my pocket and carry around. Hope there's more single beautiful files in the world, reminds me of the single header culture in C where every person can have their own nice little .h file that belongs to themselves.

[t0astbread]

Put it on a smartwatch and never reload the page!

[IceWreck]

The author left an FAQ here: https://www.quaxio.com/pure_css_digital_clock.css

[athriren]

“i was born in switzerland, therefore this clock is swiss made. QED.”

[RaoulP]

It can also be viewed by inspecting the page source, which imports this CSS file.

[porpoise]

Very cool.

In a similar vein (but much less techinically sophistcated), I recently realized that making "cloze" cards (esp. ones w/ a large number of deletions and/or incremental-reveal cards) in Anki can be made a much less painful process by ditching the native method in favor of an almost entirely CSS implementation (basically, you use Anki's editor to underline the cloze deletions, use a line of JS to add innerText as an attribute to the element, and use CSS to make each answer appear in a little pop-up as you hover over (or touch, if on mobile) a blank. An example: https://streamable.com/xwewa4).

[sam0x17]

Got a bunch of random markup mixed into the content for me in chromium

[paco3346]

Ditto. Here's a Chromium vs Chrome screenshot.

https://imgur.com/a/YShyehD

Note that in chromium there's an implicit style tag that doesn't show up in chrome.

Manually adding

  style {
      display: none;
  }

fixes the issue with no ill effects in Chrome.

[bilekas]

I have the same when running Dark Reader, are you using any extensions that modify the css statically ?

[leephillips]

I thought it was supposed to look like that (qutebrowser, where it also eatss a ton of memory).

[butz]

"Even a Broken Clock Is Right Twice a Day"; nice to see folklore not being forgotten even in this digital age ;)

[amenghra]

Technically, this clock is either always right (if you load the page at noon/midnight) or always wrong. It's unlikely to get be right twice a day.

[strenholme]

What impresses me is that this digital clock works just fine in Internet Explorer 11 from 2013, and even works in IE10 from 2012 (doesn’t work in IE9, but, then again, not even text-shadow works in IE9). It doesn’t use any modern CSS, but stuff which has been implemented by browsers since 2012.

[1_player]

You say that as if 2012 is the stone age.

CSS hasn't changed much since its inception in 1996, mostly it's added some selector and layout rules in recent years.

[brundolf]

I was a lot more impressed when I thought it was going to show the real time. I wonder if there's a way to accomplish that... Still a neat demo though

[jawns]

One step toward that might be to enable a "fast forward" and "rewind" functionality, as are common on alarm clocks. Then at least you could set it to your current time.

[vmception]

Every time I see one of these demos showcasing the constraints they used, it always seems to remind me why nobody does that.

And its not because of the challenge, its because of the result. Which makes me more surprised that other people's activity puts this stuff on my feeds at all.

[bilekas]

Kind of cool.. There is something funny happening when using the Dark Reader chrome extension.. imgbox.com/y62Z4gVm Ironically enough, the css goes a bit mad.

I love those css felx's though this is cool

[ybbond]

one of the most awesome thing is that I stumbled upon this post at 12:00:xx GMT+7 and didn’t realize that the clock starts on 12:00:00

[MrTortoise]

Very cool but the spacing is off!

[Nicksil]

> Pure Digital CSS, Swiss Made, Clock. No JavaScript, No HTML

Except for the HTML

[cj]

Your quote chopped off the asterisk after HTML. See "Unfrequently Asked Questions" for explanation of the asterisk:

view-source:https://www.quaxio.com/pure_css_digital_clock.css

[reaperducer]

Except for the HTML

While technically correct is the best kind of correct, it's worth noting that the entirety of the HTML portion is:

   <link rel="stylesheet" href="pure_css_digital_clock.css">

[ogre_codes]

It's a cute demo, but it's a timer, not a clock. </pedant>

[reaperducer]

If you start it at noon, or midnight, it's a clock.

[amenghra]

I figured a timer usually counts down and has a start/stop button. A stopwatch counts up, but also has buttons. A clock it is.

[c22]

How is a "timer" different from a "clock?"

[kroltan]

Not really, it's just a bunch of boxes with borders, and each box has an animation saying when each border is white or black.

The only notable technological "gimmick" is that it doesn't use any more HTML elements than the ones the browser generates automatically from the "severely malformed" HTML it is given.

(Not to devalue the creativity of the demo, though!)

A possibly more elegant way to do this would be by using clip-path and CSS variables to render the digits, this would only require 1 element per digit and would make for more readable animations too.

[systemvoltage]

What's Swiss about this? The programmer is from Switzerland?

[jhowison]

Q: Swiss made, how so? A: I was born in Switzerland. By induction, this clock is Swiss made. QED.

[kdps]

From the FAQ:

Q: Swiss made, how so? A: I was born in Switzerland. By induction, this clock is Swiss made. QED.

[justusthane]

It’s just for fun, dude. Besides, Switzerland is known for their clock-making.

[chrismorgan]

You could get it to synchronise the time with just a teeny bit of JavaScript. Add this CSS:

  *, ::before, ::after {
    animation-delay: var(--delay);
  }

… and this JS:

  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.