from Hacker News

Anchoreum: A game for learning CSS anchor positioning

by thomaspark on 2/11/25, 1:54 PM with 27 comments

  • by culi on 2/11/25, 4:55 PM

    If this accepts Firefox and Safari then it could be a great addition to "intro to web dev" tutorials

    CSS Flex https://flexboxfroggy.com/

    CSS Grid https://cssgridgarden.com/

    CSS selectors https://flukeout.github.io/

  • by freeCandy on 2/11/25, 5:31 PM

  • by uhoh-itsmaciek on 2/11/25, 5:52 PM

    Neat. The museum framing is cute, and well executed with the footsteps sound between levels.

    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't think that matters here). Is this a Chrome bug? A bug in Anchoreum? In dev tools, it looks like it's an Anchoreum issue, because there's a separate element in the DOM.

    Edit: also happens on level 25 without changing anything if I drag the anchor to the left.

    Edit 2: ah, I think that area is where you're _supposed to_ place the anchor. It's not very clear from the text.

  • by nottorp on 2/11/25, 7:30 PM

    I suppose fixing CSS itself to be predictable would be too hard? :)

  • by chilmers on 2/11/25, 4:54 PM

    Pretty neat. But there doesn'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.

  • by vollbrecht on 2/11/25, 3:59 PM

    Seams not supported in firefox

  • by JLCarveth on 2/11/25, 6:39 PM

    Great, yet another feature Firefox doesn't support... I really try to not use Chrome, but I run into this sort of issue a lot.

  • by somesun on 2/14/25, 12:34 AM

    a very good game to learn css

  • by uhoh-itsmaciek on 2/11/25, 6:10 PM

    And no answers, huh? I'm stuck on 38.

    Edit: it doesn't mention that `anchor()` can accept an anchor name, which is kind of important for this.

  • by lerp-io on 2/11/25, 9:43 PM

    honestly idk if there is any reason anyone should be learning CSS anymore

  • by wruza on 2/11/25, 9:05 PM

    When will they realize that layout is fundamentally a linear problem, which only needs a "constraint" as a building block?

    That all these stupid width-basis-fit-minmax-fr-anchor-span combinations boil down to "Σ(aₙxₙ) ≤ b" and a couple of specialized distributors?

    How many half-assed incantations and reiterations it will take?

    Jesus Christ.