Une page qui affiche le pourcentage d’accomplissement de l’année courante, du mois courant, de la journée courante, de l’heure et de la minute.
Parce que j’aime mélanger prog, art, couleurs et aussi le temps qui passe :D

Oui, ceci utilise mon astuce de l’angle en CSS d’hier.

Ceci utilise de façon importante les CSS3 : les --variables, les calc(), les gradients, les ombres, les ::before et les ::after.
En HTML, j’utilise l’attribut data-ma-variable="". En JS, je modifie le HTML et le CSS.

Dans l’ensemble, tout est mélangé : le JS modifie l’attribut sur un élément HTML, le CSS récupère la valeur de cet attribut et le place dans le ::after, à l’écran. Par ailleurs, JS modifie la valeur de la --variable CSS, qui est ensuite appliquée à une propriété CSS sur un élément, ou sur le ::before d’un élément. C’est juste beau comment tout ça interagit dans tous les sens. On est loin du HTML4 et du CSS2 statique.

Et pourtant… le support navigateur de tout ça n’a jamais été aussi bon : cette page, sans faire d’ajustages particuliers, fonctionne aussi bien dans Chrome (chromium, vivaldi…) que dans Firefox, aussi bien sur desktop que mobile. Edge s’en sort sur les barres, mais pas sur le truc circulaire :/

— (permalink)