TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Anchoreum: A game for learning CSS anchor positioning

87 pointsby thomaspark3 months ago

11 comments

culi3 months ago
If this accepts Firefox and Safari then it could be a great addition to &quot;intro to web dev&quot; tutorials<p>CSS Flex <a href="https:&#x2F;&#x2F;flexboxfroggy.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;flexboxfroggy.com&#x2F;</a><p>CSS Grid <a href="https:&#x2F;&#x2F;cssgridgarden.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;cssgridgarden.com&#x2F;</a><p>CSS selectors <a href="https:&#x2F;&#x2F;flukeout.github.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;flukeout.github.io&#x2F;</a>
评论 #43018209 未加载
freeCandy3 months ago
<a href="https:&#x2F;&#x2F;caniuse.com&#x2F;css-anchor-positioning" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;css-anchor-positioning</a>
评论 #43018908 未加载
uhoh-itsmaciek3 months ago
Neat. The museum framing is cute, and well executed with the footsteps sound between levels.<p>On level 20, if I set `position-try-fallbacks: flip-inline;` and drag the anchor to the top, something weird happens: the label stays on top, but is also mirrored below the anchor, except with no text or background, just a border and a translucent frame. Latest Chrome (on Ubuntu, but I don&#x27;t think that matters here). Is this a Chrome bug? A bug in Anchoreum? In dev tools, it looks like it&#x27;s an Anchoreum issue, because there&#x27;s a separate element in the DOM.<p>Edit: also happens on level 25 without changing anything if I drag the anchor to the left.<p>Edit 2: ah, I think that area is where you&#x27;re _supposed to_ place the anchor. It&#x27;s not very clear from the text.
评论 #43018915 未加载
nottorp3 months ago
I suppose fixing CSS itself to be predictable would be too hard? :)
评论 #43018350 未加载
chilmers3 months ago
Pretty neat. But there doesn&#x27;t seem to be any way to select or style the anchored element based on which fallback position it is in? This would seem to preclude adding a directional arrow to it, which is a somewhat baseline feature for things like tooltips.
vollbrecht3 months ago
Seams not supported in firefox
评论 #43014473 未加载
JLCarveth3 months ago
Great, yet another feature Firefox doesn&#x27;t support... I really try to not use Chrome, but I run into this sort of issue a lot.
评论 #43017125 未加载
评论 #43017954 未加载
评论 #43017071 未加载
评论 #43019031 未加载
somesun3 months ago
a very good game to learn css
uhoh-itsmaciek3 months ago
And no answers, huh? I&#x27;m stuck on 38.<p>Edit: it doesn&#x27;t mention that `anchor()` can accept an anchor name, which is kind of important for this.
lerp-io3 months ago
honestly idk if there is any reason anyone should be learning CSS anymore
评论 #43026497 未加载
wruza3 months ago
When will they realize that layout is fundamentally a linear problem, which only needs a &quot;constraint&quot; as a building block?<p>That all these stupid width-basis-fit-minmax-fr-anchor-span combinations boil down to &quot;Σ(aₙxₙ) ≤ b&quot; and a couple of specialized distributors?<p>How many half-assed incantations and reiterations it will take?<p>Jesus Christ.
评论 #43019012 未加载