CSS Tip

Fizz Buzz using Modern CSS (no HTML)

Is it possible to create a Fizz Buzz using HTML and CSS? Yes, but what about a pure CSS version, with no HTML at all? It's doable using modern features. We can even simulate a kind of slider that shows four entries at a time.

html {
  --N: 1000; /* the maximum number */
}
:is(html,body):before,
:is(html,body):after {
  counter-reset: n var(--n);
  animation: --n calc(var(--N)*1s) linear both;
  --x: sign(mod(var(--n),3)); /* 0 if divisible by 3 (1 otherwise) */
  --y: sign(mod(var(--n),5)); /* 0 if divisible by 5 (1 otherwise) */
  content: if(
     style((--x: 0) and (--y: 0)): "FizzBuzz"; /* divisible by 3 and 5 */
     style((--x: 0) and (--y: 1)): "Fizz"; /* divisible by 3 and not 5 */
     style((--x: 1) and (--y: 0)): "Buzz"; /* divisible by 5 and not 3 */
     else: counter(n); 
    );
}
@keyframes --n {to {--n: var(--N)}}
body:before {animation-delay: -1s}
body:after  {animation-delay: -2s}
html:after  {animation-delay: -3s}

⚠️ A Chrome-only experiment for now ⚠️

See the Pen CSS-only Fizz Buzz (no HTML) by Temani Afif (@t_afif) on CodePen.

We can get fancier with an animated version!

See the Pen CSS-only animated Fizz Buzz (no HTML) by Temani Afif (@t_afif) on CodePen.

Inspired by "Fizz Buzz"

More CSS Tips