TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Pure CSS FizzBuzz

43 点作者 josephmx大约 10 年前

20 条评论

d_j_s大约 10 年前
You can use css counters to output the count on non fizz, buzz or fizzbuzz iterations<p><a href="http:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;QbNLxO" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;QbNLxO</a><p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Counters" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Count...</a>
评论 #9532281 未加载
workingandtired大约 10 年前
I could be wrong, but I believe the post that he&#x27;s referring to as inspiration is this one: <a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;tales-of-a-non-unicorn-a-story-about-the-trouble-with-job-titles-and-descriptions&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;tales-of-a-non-unicorn-a-story-about-...</a><p>A pretty interesting story about job titles and descriptions that are not representative of the job they&#x27;re trying to hire for.
评论 #9532075 未加载
评论 #9532464 未加载
评论 #9532173 未加载
评论 #9532200 未加载
评论 #9531864 未加载
bshimmin大约 10 年前
I feel like it must be possible to do the numbers using CSS&#x27;s counters: <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Counters" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Count...</a> If I didn&#x27;t have a whole bunch of work to do this afternoon, I&#x27;d have a go myself.
评论 #9531862 未加载
bmelton大约 10 年前
This is kind of brilliant. I think if I were interviewing you, and asked you to do a FizzBuzz (which is unlikely, but let&#x27;s ignore that), and you said &quot;Oh, cool, can I do it in CSS,&quot; I&#x27;d have probably laughed at you.<p>This is clearly an academic exercise, but one that I would never have even thought to attempt, as I probably would have chalked it up to probably waaaay more trouble than it&#x27;s worth.
评论 #9531831 未加载
kyllo大约 10 年前
Does this mean that CSS is now Turing-complete, or does it just mean that Turing-completeness is not required to implement FizzBuzz?
评论 #9532212 未加载
mcallister大约 10 年前
Pretty cool. Slightly different than the one posted three years ago <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=3939294" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=3939294</a>
collyw大约 10 年前
Can anyone recommend some intermediate resources for learning CSS. I have gone though css dog, and I kind of know most of that stuff already. Everything seems to be beginner or expert level.<p>And not csszengarden. It has some wonderful examples, but doesn&#x27;t really explain how they work.
评论 #9532463 未加载
mdpopescu大约 10 年前
There&#x27;s a mistake in that code:<p>.fizzbuzz:nth-of-type(3n)::before{ content: &quot;buzz&quot;; }<p>Should be &quot;fizz&quot;.
kylemhill大约 10 年前
Here&#x27;s the solution with numbers in the non-fizzbuzzy boxes: <a href="http:&#x2F;&#x2F;codepen.io&#x2F;kylf&#x2F;pen&#x2F;zGqOjy" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;kylf&#x2F;pen&#x2F;zGqOjy</a>
livingston大约 10 年前
Shorter version of pure css fizzbuzz :)<p><a href="http:&#x2F;&#x2F;codepen.io&#x2F;livingston&#x2F;pen&#x2F;xGVbGd?editors=110" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;livingston&#x2F;pen&#x2F;xGVbGd?editors=110</a>
dandigangi大约 10 年前
Am I missing something on how this is CSS only when you are using jQ...?
评论 #9532004 未加载
nine_k大约 10 年前
I love how declarative style makes the important part of the code practically trivial.<p>If anyone needs an example to show how functional style is more concise and expressive than procedural, this could be one.
Practicality大约 10 年前
Nice! I am going to use this concept to solve problems &quot;that can only be done in Javascript.&quot; Can&#x27;t wait to confuse and delight the designers.
agjmills大约 10 年前
Without the JS:<p><a href="http:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;NqNKYv" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;NqNKYv</a>
评论 #9533003 未加载
评论 #9531965 未加载
dbj大约 10 年前
display: float; indeed
评论 #9531959 未加载
jebronie大约 10 年前
but how well does it scale?
waxim大约 10 年前
Nice idea.
honest_joe大约 10 年前
BTW i loved your honest CV. No exaggerating.
patrickocoffeyo大约 10 年前
Why is this on hacker news.
评论 #9532253 未加载
smrtinsert大约 10 年前
Oh, now you&#x27;re a REAL programmer. Congratulations.