Over on DigitalPoint it was asked if it were possible to make a clock face using just HTML and CSS. Whilst I answered their question as cleanly as I could in a drive-by answer, I thought a more polished and robust copy would make a good article.

One of the things I constantly see is how many implementations tend to use a lot of JavaScript with no scripting-off graceful degradation plan. As if <noscript> is some arcane tome too hard understand. The most any scripting would/should need to do _(unless using Canvas) _is plug in the elements inside the clock face, and then manipulate them for rotation.

The biggest flaw though is people are always working in the least accessible metric — pixels. That means it doesn’t scale to user preferences like EM would, and it makes it harder to resize. If we do everything in EM, we can resize elements like this using nothing more than font-size on the outermost container!

HTML and CSS on their own can work wonders, but one also has to be careful that you don’t put elements in the markup that are “scripting only” as they can confuse users on screen readers, braille readers, and the like.

#css #javascript #html #web-development