Solving FizzBuzz with CSS

[jackiebalzer]

http://dabblet.com/gist/2628265

[danab]

Correct me if I'm wrong, but I don't believe you need any of the :not statements, and instead or (3n) and (5n) you can just use 15n for the 'fizzbuzz'.

The cascade of the CSS will take care of the cases the div is a 'fizzbuzz'.

Sorry I can't post the example, Dabblet is working strangely for me this morning.

CSS that should work:

  /**
   * FizzBuzz with CSS
   */

  body {
  	counter-reset: fizzbuzz;
  }

  div {
  	width: 100px;
  	height: 20px;
  	background: #ddd;
  	margin: 0 0 10px;
  }

  div::after {
  	content: counter(fizzbuzz);
  	counter-increment: fizzbuzz;
  }

  div:nth-child(3n)::after {
  	content: "fizz";
  }  

  div:nth-child(5n)::after {
  	content: "buzz";
  }

  div:nth-child(15n)::after {
  	content: "fizzbuzz";
  }

[jontro → danab]

This should also work:

div:nth-child(3n):after { content: ""; }

div:nth-child(3n):before { content: "fizz"; }

div:nth-child(5n):after { content: "buzz"; }

[danab → jontro]

I retract my answer in favor of this. Clever.

[Sivart13 → danab]

I think your answer is a lot more readable, though. I have to squint at jontro's version for a while before determining that it'll actually product the string "fizzbuzz".

[Flam → jontro]

Brilliant.

[jackiebalzer → danab]

Correct, you don't need the :nots as long as the CSS is in that order, since the :after content would be overridden correctly. You would need them if you changed the order of the statements.

I started the experiment using background color instead of "fizz", border color instead of "buzz", and box-shadow instead of "fizzbuzz" which necessitated the need for :nots since the properties weren't overriding.

[eykanal]

Heh... how this looks in IE 8: http://i.stack.imgur.com/Fz3jT.png

[scribblemacher → eykanal]

To be fair, isn't that what most sites look like in IE8?

[jenius → scribblemacher]

hahah win.

[steelaz → eykanal]

To be fair, IE8 was released on March 2009 (according to wiki), Chrome at that time was v1.0 and Firefox was v3.0.

[catch23 → steelaz]

Usually IE8 users are stuck in IE8 unless they let the OS upgrade their browser, so most of the users that started with IE8 are still stuck in 2009. Chrome/FF users tend to have less issues with upgrades.

[scribblemacher → catch23]

Not to mention those of us in a workplace still using XP (and thus unable to upgrade past IE8).

[gordian → scribblemacher]

All horrible arguments. "Stuck?" Download a real browser.

IE8 viewers expect devs to slow progress or cater to them would be like horse and buggy drivers from days of yore lobbying to prevent cars from going faster than horses.

Stop complaining, get off your horse and get a (free) car. Encourage your clients to do likewise.

[scrame → gordian]

Corporate environments sometimes lock down their computers completely, and don't give admin/install privileges, let alone OS updates.

So yes, "stuck".

[gordian → scrame]

The dev community should not be at the mercy of incompetent sysadmins. Evolve or die. Such is life. Such is business.

[bawllz → scrame]

good thing you don't need to install chrome to run it then!

[alainbryden]

No rest until CSS is Turing complete.

[espo → alainbryden]

You mean like this CSS-implementation of Rule 110? http://eli.fox-epste.in/rule110-full.html

[thisisblurry → espo]

For those who tried this in Chrome, like me, it won't work :(

Try it in Firefox instead.

[djhworld → thisisblurry]

Chrome didn't work for me either, firefox was fine

[khwang → thisisblurry]

Worked fine for me.

[bawllz → khwang]

ditto

[thekungfuman]

Goes to show how many (greatly needed) programmatic features CSS is adding. Also shows that some people love a creative way to attack a problem.

[its_so_on → thekungfuman]

As God is my witness, CSS will need to be split into a presentation language and a logic language. /s

[evincarofautumn → its_so_on]

You know, that’s not such an outlandish claim. CSS is accumulating features that seem to me completely out of place in a styling language. Then again, HTML isn’t perfect, nor JavaScript, nor PHP or any language—but we still get stuff done with them, so who am I to complain?

[DavidAbrams → thekungfuman]

Goes to show what a hack-riddled mess Web presentation still is.

[DavidAbrams]

Is this some regional drinking game? Like Three-Man?