Heh... how this looks in IE 8: http://i.stack.imgur.com/Fz3jT.png
To be fair, IE8 was released on March 2009 (according to wiki), Chrome at that time was v1.0 and Firefox was v3.0.
Solving FizzBuzz with CSS
11–20 of 30 posts
Re: Solving FizzBuzz with CSS
#12No rest until CSS is Turing complete.
You mean like this CSS-implementation of Rule 110?
http://eli.fox-epste.in/rule110-full.html
Re: Solving FizzBuzz with CSS
#13Correct 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:…
This should also work:
div:nth-child(3n):after { content: ""; }
div:nth-child(3n):before { content: "fizz"; }
div:nth-child(5n):after { content: "buzz"; }
Re: Solving FizzBuzz with CSS
#14Correct 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:…
This should also work: div:nth-child(3n):after { content: ""; } div:nth-child(3n):before { content: "fizz"; } div:nth-child(5n):after { content: "buzz"; }
I retract my answer in favor of this. Clever.
Re: Solving FizzBuzz with CSS
#15Heh... how this looks in IE 8: http://i.stack.imgur.com/Fz3jT.png
To be fair, IE8 was released on March 2009 (according to wiki), Chrome at that time was v1.0 and Firefox was v3.0.
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.
Re: Solving FizzBuzz with CSS
#16Re: Solving FizzBuzz with CSS
#17Earlier quoted context omitted.
This should also work: div:nth-child(3n):after { content: ""; } div:nth-child(3n):before { content: "fizz"; } div:nth-child(5n):after { content: "buzz"; }
I retract my answer in favor of this. Clever.
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".
Re: Solving FizzBuzz with CSS
#18Earlier quoted context omitted.
To be fair, IE8 was released on March 2009 (according to wiki), Chrome at that time was v1.0 and Firefox was v3.0.
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.
Not to mention those of us in a workplace still using XP (and thus unable to upgrade past IE8).