Fizz Buzz in CSS

(susam.net)

110 points by froober63 days ago

8 comments

  • susam63 days ago
    A shorter solution is possible with an ordered list (&lt;ol&gt;) if we&#x27;re willing to ignore the untidy output:<p><pre><code> li:nth-child(3n), li:nth-child(5n) { list-style: none } li:nth-child(3n)::before { content: &quot;Fizz&quot; } li:nth-child(5n)::after { content: &quot;Buzz&quot; } </code></pre> Example: <a href="https:&#x2F;&#x2F;susam.net&#x2F;code&#x2F;web&#x2F;css-fizz-buzz-ol.html" rel="nofollow">https:&#x2F;&#x2F;susam.net&#x2F;code&#x2F;web&#x2F;css-fizz-buzz-ol.html</a><p><pre><code> $ curl -sS https:&#x2F;&#x2F;susam.net&#x2F;code&#x2F;web&#x2F;css-fizz-buzz-ol.html | sed -n &#x27;&#x2F;none&#x2F;,&#x2F;after&#x2F;p&#x27; | tr -d &#x27;[:space:]&#x27; li:nth-child(3n),li:nth-child(5n){list-style:none}li:nth-child(3n)::before{content:&quot;Fizz&quot;}li:nth-child(5n)::after{content:&quot;Buzz&quot;} $ curl -sS https:&#x2F;&#x2F;susam.net&#x2F;code&#x2F;web&#x2F;css-fizz-buzz-ol.html | sed -n &#x27;&#x2F;none&#x2F;,&#x2F;after&#x2F;p&#x27; | tr -d &#x27;[:space:]&#x27; | wc -c 129 </code></pre> But I don&#x27;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.
    • cluckindan63 days ago
      <p><pre><code> list-style-position: inside;</code></pre>
      • susam63 days ago
        Yes! However, like I mentioned in my previous comment, corrections like this cancel out the number of bytes saved with the &lt;ol&gt;-based solution.<p>I mean, the solution in the original post is 152 characters long.<p>The &lt;ol&gt; based solution is 129 characters long. Shorter but uglier.<p>If we add your correction, we get neater output, which is nice, but it comes at the cost of 30 additional characters in the minified code thereby making the solution 159 characters long.<p><pre><code> li { list-style-position: inside } li:nth-child(3n), li:nth-child(5n) { list-style: none } li:nth-child(3n)::before { content: &quot;Fizz&quot; } li:nth-child(5n)::after { content: &quot;Buzz&quot; }</code></pre>
  • graiz63 days ago
    145 using P instead of li.<p>&lt;style&gt; p{counter-increment:n} p:not(:nth-child(5n)):before{content:counter(n)} p:nth-child(3n):before{content:&quot;Fizz&quot;} p:nth-child(5n):after{content:&quot;Buzz&quot;} &lt;&#x2F;style&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;
    • rebane200163 days ago
      im not sure how you counted that as 145, but here&#x27;s 137 for the css<p>&lt;style&gt;p{--n:counter(n);counter-increment:n;&amp;:before{content:var(--n)};&amp;:nth-child(5n){--n:&quot;&quot;;&amp;:after{content:&quot;Buzz&quot;}}&amp;:nth-child(3n){--n:&quot;Fizz&quot;&lt;&#x2F;style&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;&lt;p&gt;
  • Metaboat63 days ago
    104 :nth-child(3n){list-style:&quot;Fizz&quot;}:nth-child(5n){list-style:&quot;Buzz&quot;}:nth-child(15n){list-style:&quot;FizzBuzz&quot;}<p>data:text&#x2F;html,&lt;style&gt;:nth-child(3n){list-style:&quot;Fizz&quot;}:nth-child(5n){list-style:&quot;Buzz&quot;}:nth-child(15n){list-style:&quot;FizzBuzz&quot;}&lt;&#x2F;style&gt;&lt;ol id=o&gt;&lt;script&gt;o.innerHTML=&#x27;&lt;li&gt;&#x27;.repeat(99)&lt;&#x2F;script&gt;
    • cefqrn63 days ago
      89: :nth-child(3n)::marker{content:&quot;Fizz&quot;var(--b,)}:nth-child(5n){list-style:&quot;Buzz&quot;;--b:&quot;Buzz<p>with help from @bulmenisaurus
    • Metaboat63 days ago
      103 :nth-child(3n){list-style:&quot;Fizz&quot;}:nth-child(5n){list-style:&quot;Buzz&quot;}:nth-child(15n){list-style:&quot;FizzBuzz&quot;
      • Metaboat63 days ago
        98 :nth-child(5n){list-style:&quot;&quot;}:nth-child(3n){list-style:&quot;Fizz&quot;}:nth-child(5n)::after{content:&quot;Buzz&quot;
        • Metaboat63 days ago
          95 :nth-child(5n){list-style:}:nth-child(3n){list-style:&quot;Fizz&quot;}:nth-child(5n)::after{content:&quot;Buzz
          • Metaboat63 days ago
            68 :nth-child(3n){list-style:&quot;Fizz&quot;}:nth-child(5n)::after{content:&quot;Buzz
            • bulmenisaurus63 days ago
              This version fails for numbers like 5, showing &quot;5. Buzz&quot;. In the case of a number divisible by 5 but not 3 nothing prevents the 5 in the ::marker from rendering.<p>Edit: it looks like your version can be fixed into a working 85:<p><pre><code> :nth-child(5n){list-style:&#x27;&#x27;;&amp;:after{content:&quot;Buzz&quot;}}:nth-child(3n){list-style:&quot;Fizz&quot;</code></pre>
            • eurleif63 days ago
              67 :nth-child(3n){list-style:&quot;Fizz&quot;}:nth-child(5n):after{content:&quot;Buzz
              • Metaboat63 days ago
                thank you sir! i can improve the html op css was 152, we have the whole page at 144<p>data:text&#x2F;html,&lt;ol id=o&gt;&lt;script&gt;o.innerHTML=&#x27;&lt;li&gt;&#x27;.repeat(100)&lt;&#x2F;script&gt;&lt;style&gt;:nth-child(3n){list-style:&quot;Fizz&quot;}:nth-child(5n):after{content:&quot;Buzz
                • throwaway15063 days ago
                  Your code is showing the numbers 5, 10, 20. that&#x27;s not correct, is it?<p>Yours prints 1. 2. Fizz 4. 5. Buzz Fizz 7.<p>But it should be 1. 2. Fizz 4. Buzz Fizz 7.
  • carl_dr63 days 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 …
  • dsmmcken63 days ago
    144, using css variables, with fallback and p instead of li<p><a href="https:&#x2F;&#x2F;codepen.io&#x2F;dsmmcken&#x2F;pen&#x2F;WbwYOEQ?editors=0100" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;dsmmcken&#x2F;pen&#x2F;WbwYOEQ?editors=0100</a><p>p{counter-increment:n;--n:counter(n)}p:nth-child(3n){--f:&quot;Fizz&quot;}p:nth-child(5n){--b:&quot;Buzz&quot;;--n:&#x27;&#x27;}p::after{content:var(--f,var(--n))var(--b,&#x27;&#x27;)}
  • kevinsync63 days ago
    I love this, it&#x27;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&#x27;ve met along the way who would be so pissed and pedantic about how this isn&#x27;t a &quot;real solution&quot; LOL
    • hyperhello63 days ago
      The problem is that you have to define the problem enough to avoid the fact that it&#x27;s trivial to output the string &quot;1,2,Fizz,4,Buzz,......&quot; and fulfill the assignment. You can, in fact, output &quot;$1,$2,Fizz,$4,Buzz,...&quot; where $ is any prefix itself divisible by 15 (there are other templates for the other situations but it clearly does repeat endlessly.)
  • genezeta63 days ago
    To nitpick a bit, I&#x27;d say there <i>is</i> something that is &quot;placed outside the stylesheet&quot;.<p>Now, arguably it&#x27;s not a &quot;number or word that appears in the output&quot;, that&#x27;s true, but it is a part of the logic of FizzBuzz. It&#x27;s the fact that there are 100 and exactly 100 &lt;li&gt; elements in the HTML part.<p>I mean, it wouldn&#x27;t be a correct FizzBuzz without precisely that HTML. Having exactly 100 &lt;li&gt; elements is implementing the part of the logic that a. loops, and b. stops at 100.<p>But of course this is just nitpicking, as I said ;)
    • culi63 days ago
      HTML is just the runtime of CSS
  • smrq62 days ago
    Am I the only one here who&#x27;s never seen CSS counters before? Interesting feature, what are they useful for practically?