Fizz Buzz in CSS | WingNews

susam|2 months ago

A shorter solution is possible with an ordered list (<ol>) if we're willing to ignore the untidy output:

  li:nth-child(3n), li:nth-child(5n) { list-style: none }
  li:nth-child(3n)::before { content: "Fizz" }
  li:nth-child(5n)::after { content: "Buzz" }

Example: https://susam.net/code/web/css-fizz-buzz-ol.html

  $ curl -sS https://susam.net/code/web/css-fizz-buzz-ol.html | sed -n '/none/,/after/p' |  tr -d '[:space:]' 
  li:nth-child(3n),li:nth-child(5n){list-style:none}li:nth-child(3n)::before{content:"Fizz"}li:nth-child(5n)::after{content:"Buzz"}
  $ curl -sS https://susam.net/code/web/css-fizz-buzz-ol.html | sed -n '/none/,/after/p' |  tr -d '[:space:]' | wc -c
  129

But I don't quite like how misaligned the numbers and the words look in this version. Correcting that would call for extra code that would cancel out the characters saved.

unknown|2 months ago

[deleted]

cluckindan|2 months ago

    list-style-position: inside;

graiz|2 months ago

145 using P instead of li.

rebane2001|2 months ago

im not sure how you counted that as 145, but here's 137 for the css

Metaboat|2 months ago

104 :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"}

data:text/html,<style>:nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"}</style><ol id=o><script>o.innerHTML='<li>'.repeat(99)</script>

cefqrn|2 months ago

89: :nth-child(3n)::marker{content:"Fizz"var(--b,)}:nth-child(5n){list-style:"Buzz";--b:"Buzz

with help from @bulmenisaurus

Metaboat|2 months ago

103 :nth-child(3n){list-style:"Fizz"}:nth-child(5n){list-style:"Buzz"}:nth-child(15n){list-style:"FizzBuzz"

carl_dr|2 months ago

Ignoring the size of the HTML in addition to the CSS, it’s fun, but not really fair when talking about code golf. Beyond a few numbers, you need to include some JavaScript and generating a million list elements. But those bytes count …

dsmmcken|2 months ago

144, using css variables, with fallback and p instead of li

https://codepen.io/dsmmcken/pen/WbwYOEQ?editors=0100

p{counter-increment:n;--n:counter(n)}p:nth-child(3n){--f:"Fizz"}p:nth-child(5n){--b:"Buzz";--n:''}p::after{content:var(--f,var(--n))var(--b,'')}

kevinsync|2 months ago

I love this, it's a very clever and funny way to solve the problem. Makes me think about how there are infinite routes from A to B, some more scenic and whimsical than others.. as well as all the people I've met along the way who would be so pissed and pedantic about how this isn't a "real solution" LOL

hyperhello|2 months ago

The problem is that you have to define the problem enough to avoid the fact that it's trivial to output the string "1,2,Fizz,4,Buzz,......" and fulfill the assignment. You can, in fact, output "$1,$2,Fizz,$4,Buzz,..." where $ is any prefix itself divisible by 15 (there are other templates for the other situations but it clearly does repeat endlessly.)

unknown|2 months ago

[deleted]

genezeta|2 months ago

To nitpick a bit, I'd say there is something that is "placed outside the stylesheet".

Now, arguably it's not a "number or word that appears in the output", that's true, but it is a part of the logic of FizzBuzz. It's the fact that there are 100 and exactly 100 <li> elements in the HTML part.

I mean, it wouldn't be a correct FizzBuzz without precisely that HTML. Having exactly 100 <li> elements is implementing the part of the logic that a. loops, and b. stops at 100.

But of course this is just nitpicking, as I said ;)

culi|2 months ago

HTML is just the runtime of CSS

smrq|2 months ago

Am I the only one here who's never seen CSS counters before? Interesting feature, what are they useful for practically?

22 comments