Exhibit 14 of 17
A clock that can’t tell the time
A working clock, with one flaw: CSS can’t read the time. So it starts at 00:00:00 when you open the page and counts from there.
The exhibit
Time since you opened this page. It is the only time CSS can know.
How it works
@property registers --h, --m and --s as integers. Unregistered custom properties can’t animate, but registered ones can, so three linear @keyframes with steps() count them up over a day, an hour and a minute. The hands turn by calc(var(--s) * 6deg), and counter-reset: s var(--s) lets counter() print the numbers.
The key CSS
Cut from this exhibit’s stylesheet as it is served.
@property --h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --m { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --s { syntax: "<integer>"; inherits: true; initial-value: 0; }
@keyframes hours { to { --h: 24; } }
@keyframes minutes { to { --m: 60; } }
@keyframes seconds { to { --s: 60; } }
.x-clock .clock {
animation: hours 86400s steps(24) infinite, minutes 3600s steps(60) infinite, seconds 60s steps(60) infinite;
}
/* the hands turn by the numbers */
.x-clock .hh { rotate: calc(var(--h) * 30deg + var(--m) * .5deg); }
.x-clock .mm { rotate: calc(var(--m) * 6deg + var(--s) * .1deg); }
.x-clock .ss { rotate: calc(var(--s) * 6deg); }
/* and counters write them out */
.x-clock .digital { counter-reset: h var(--h) m var(--m) s var(--s); }
.x-clock .digital::after {
content: counter(h, decimal-leading-zero) ":" counter(m, decimal-leading-zero) ":" counter(s, decimal-leading-zero);
}
/* stopping it is a checkbox */
.x-clock .clock:has(#clock-stop:checked) { animation-play-state: paused; }Accessibility
It moves on its own, so it has a Stop box, and under reduced motion it starts stopped with a Start box instead. The face is an image with a label; the digits are generated content, readable but not announced. It isn’t useful as a clock, which is the honest point.
Browser support
@propertyCSS can’t test for this one. Without it: The custom properties can’t animate, so the hands stay at twelve and the digits at zero. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.CSS countersWorks in this browser.Not in this browser: Universal. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.