Solving FizzBuzz with CSS

#1

Post by jackiebalzer » Mon, May 07, 2012, 3:11 PM UTC

Re: Solving FizzBuzz with CSS

#2

Post by thekungfuman » Mon, May 07, 2012, 3:27 PM UTC

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.

Re: Solving FizzBuzz with CSS

#3

Post by danab » Mon, May 07, 2012, 3:39 PM UTC

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";
  }

Re: Solving FizzBuzz with CSS

#4

Post by eykanal » Mon, May 07, 2012, 3:41 PM UTC

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

Re: Solving FizzBuzz with CSS

#5

Post by scribblemacher » Mon, May 07, 2012, 3:44 PM UTC

eykanal wrote: post #4

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

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

Re: Solving FizzBuzz with CSS

#6

Post by jackiebalzer » Mon, May 07, 2012, 3:45 PM UTC

danab wrote: post #3

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:…

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.

Re: Solving FizzBuzz with CSS

#7

Post by jenius » Mon, May 07, 2012, 3:59 PM UTC

scribblemacher wrote: post #5

eykanal wrote: post #4

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

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

hahah win.

Re: Solving FizzBuzz with CSS

#8

Post by alainbryden » Mon, May 07, 2012, 4:08 PM UTC

No rest until CSS is Turing complete.

Re: Solving FizzBuzz with CSS

#9

Post by its_so_on » Mon, May 07, 2012, 4:20 PM UTC

thekungfuman wrote: post #2

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.

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

Re: Solving FizzBuzz with CSS

#10

Post by [deleted] » Mon, May 07, 2012, 4:20 PM UTC

thekungfuman wrote: post #2

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.

[deleted]