6 ms·

I think the Popover API will be really transformative when CSS Anchor Positioning[1] arrives as well. Anchor positioning will let you position elements relative

I think the Popover API will be really transformative when CSS Anchor Positioning[1] arrives as well. Anchor positioning will let you position elements relative to others on the page. Combined with the Popover API it will let you implement things like custom tooltips and context menus in a declarative way and without any need for libraries like PopperJS [2] [1] https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning https://developer.chrome.com/blog/tether-elements-to-each-ot... [2] https://popper.js.org/docs/v2/ https://popper.js.org/docs/v2/

jcutrell 2y ago
How is anchor different from relative?
- CuriouslyC 2y ago
  They explain in the first couple paragraphs of the first link provided.
- paavohtl 2y ago
  position: relative adds a fixed offset to the position the element would have been placed in normally, but position: anchor can be used to place an element near any arbitrary element, regardless of its place in the DOM hierarchy.
- staminade 2y ago
  The article I linked goes into the details, but basically a relative approach constrains your markup: The positioned thing must be a child of the relatively positioned anchor or a wrapper element, and you often cannot sensibly position it without using JS to check the location of the anchor. E.g. a popover menu for a button must check if the button is close to an edge of the viewport and position the menu element appropriately. Anchor positioning will do this automatically. Also, if support for multiple anchors is included, then it opens up some very interesting capabilities to do things like draw arbitrary diagram connectors between elements: https://kizu.dev/anchor-positioning-experiments/ https://kizu.dev/anchor-positioning-experiments/
  - karaterobot 2y ago
    I've been eagerly awaiting anchor positioning, but using it for diagram connectors had not occurred to me yet! That would solve so many problems that I currently have (or plan) to use D3 for.
threatofrain 2y ago
Browser support. https://caniuse.com/css-anchor-positioning https://caniuse.com/css-anchor-positioning
hanniabu 2y ago
I'm amazed that in 2024 html/css doesn't have a tooltip attribute like there is for title
- jimbobthrowawy 2y ago
  Does the "title" attribute not work? I tried adding one to the <span> containing your post and it worked. I assume that's non-standard.
  - codelikeawolf 2y ago
    The title attribute is not accessible, so its use is generally discouraged as an accessible label because screen readers can't pick it up (it's fine to use if you combine it with aria-label). Also, you can only show text in a title attribute, so the Popover API would allow you to add rich content to a tooltip (for better or worse :)) Edit: Remove extra "if"
    - Zecc 2y ago
      Why "can't" (won't) screen readers pick up the title attribute?
      - pickpuck 2y ago
        They do pick up the "title" attribute sometimes and apply it as a label. But it's not really the same as being able to keyboard navigate to the browser-generated tooltip.
    - dawnerd 2y ago
      Not just screen readers. Basically no support for anyone not using a mouse to navigate. Also really annoying when people put link text in a title on links.
    - uses 2y ago
      > The title attribute is not accessible That's incorrect. There's nothing inherently inaccessible about the title attribute. Voiceover, for example, reads the content of title attributes. There are a bunch of reasons why title is pretty useless (the main one being it does nothing on every touch screen interface, where the concept of hover doesn't exist). But accessibility is not one of them.
deleted 2y ago
[deleted]
pupppet 2y ago
Oh the number of hours CSS anchor positioning would’ve saved me over the years.
ndom91 2y ago
This is the critical missing piece. Tried playing with and ship something with the new popover API last week, but missing positioning support in all browsers is really holding this back from more use-cases. Looks like the last browser (FF) has already shipped anchor positioning in beta, so it won't be long!
- Fatnino 2y ago
  Aren't there only 2 browsers? There is Firefox and there are all the Chrome derivatives.
  - hoistbypetard 2y ago
    Safari and Mobile Safari are common and are neither Firefox nor Chrome derivatives. Uncommon and neither Firefox nor Chrome Derivatives: Netsurf, Dillo, Ladybird each have their own engines. A few browsers also use a Gecko fork called Goanna. (Pale Moon comes to mind first, but there are at least a couple others that use the same engine.) Then there's Konqueror. It's not common, but can either use old KHTML or WebKit (Safari's engine).
    - oidar 2y ago
      Also: Orion uses Webkit on macs. Development is cruising along.
  - throawayonthe 2y ago
    [dead]
unakrav 2y ago
I just shipped a new article all about how to use the CSS anchoring API, which is landing in Chromium next week! https://developer.chrome.com/blog/anchor-positioning-api https://developer.chrome.com/blog/anchor-positioning-api
- mardifoufs 2y ago
  I love articles with actual running examples, thanks! Now I'm wondering how quickly this will get adopted, it looks very cool!
  - swyx 2y ago
    whats a reasonable expectation for this to get adopted across safari/firefox/edge? 1yr? 3yrs?
    - chrishtr 2y ago
      Implementation already begun for Firefox: https://groups.google.com/a/mozilla.org/g/dev-platform/c/4cbytMKbHtg?pli=1 https://groups.google.com/a/mozilla.org/g/dev-platform/c/4cb...
- hkdobrev 2y ago
  The source link at the top of the article leads to a 404.
- oddgoo 2y ago
  Fantastically illustrated and interactive article! I wonder if/how Tailwind will grow to adapt this, as I'm pretty happy with their abstractions now.

jcutrell 2y ago

How is anchor different from relative?

CuriouslyC 2y ago
They explain in the first couple paragraphs of the first link provided.
paavohtl 2y ago
position: relative adds a fixed offset to the position the element would have been placed in normally, but position: anchor can be used to place an element near any arbitrary element, regardless of its place in the DOM hierarchy.
staminade 2y ago
The article I linked goes into the details, but basically a relative approach constrains your markup: The positioned thing must be a child of the relatively positioned anchor or a wrapper element, and you often cannot sensibly position it without using JS to check the location of the anchor. E.g. a popover menu for a button must check if the button is close to an edge of the viewport and position the menu element appropriately. Anchor positioning will do this automatically. Also, if support for multiple anchors is included, then it opens up some very interesting capabilities to do things like draw arbitrary diagram connectors between elements: https://kizu.dev/anchor-positioning-experiments/ https://kizu.dev/anchor-positioning-experiments/
- karaterobot 2y ago
  I've been eagerly awaiting anchor positioning, but using it for diagram connectors had not occurred to me yet! That would solve so many problems that I currently have (or plan) to use D3 for.

threatofrain 2y ago

Browser support. https://caniuse.com/css-anchor-positioning https://caniuse.com/css-anchor-positioning

hanniabu 2y ago

I'm amazed that in 2024 html/css doesn't have a tooltip attribute like there is for title

jimbobthrowawy 2y ago
Does the "title" attribute not work? I tried adding one to the <span> containing your post and it worked. I assume that's non-standard.
- codelikeawolf 2y ago
  The title attribute is not accessible, so its use is generally discouraged as an accessible label because screen readers can't pick it up (it's fine to use if you combine it with aria-label). Also, you can only show text in a title attribute, so the Popover API would allow you to add rich content to a tooltip (for better or worse :)) Edit: Remove extra "if"
  - Zecc 2y ago
    Why "can't" (won't) screen readers pick up the title attribute?
    - pickpuck 2y ago
      They do pick up the "title" attribute sometimes and apply it as a label. But it's not really the same as being able to keyboard navigate to the browser-generated tooltip.
  - dawnerd 2y ago
    Not just screen readers. Basically no support for anyone not using a mouse to navigate. Also really annoying when people put link text in a title on links.
  - uses 2y ago
    > The title attribute is not accessible That's incorrect. There's nothing inherently inaccessible about the title attribute. Voiceover, for example, reads the content of title attributes. There are a bunch of reasons why title is pretty useless (the main one being it does nothing on every touch screen interface, where the concept of hover doesn't exist). But accessibility is not one of them.

deleted 2y ago

[deleted]

pupppet 2y ago

Oh the number of hours CSS anchor positioning would’ve saved me over the years.

ndom91 2y ago

This is the critical missing piece. Tried playing with and ship something with the new popover API last week, but missing positioning support in all browsers is really holding this back from more use-cases. Looks like the last browser (FF) has already shipped anchor positioning in beta, so it won't be long!

Fatnino 2y ago
Aren't there only 2 browsers? There is Firefox and there are all the Chrome derivatives.
- hoistbypetard 2y ago
  Safari and Mobile Safari are common and are neither Firefox nor Chrome derivatives. Uncommon and neither Firefox nor Chrome Derivatives: Netsurf, Dillo, Ladybird each have their own engines. A few browsers also use a Gecko fork called Goanna. (Pale Moon comes to mind first, but there are at least a couple others that use the same engine.) Then there's Konqueror. It's not common, but can either use old KHTML or WebKit (Safari's engine).
  - oidar 2y ago
    Also: Orion uses Webkit on macs. Development is cruising along.
- throawayonthe 2y ago
  [dead]

unakrav 2y ago

I just shipped a new article all about how to use the CSS anchoring API, which is landing in Chromium next week! https://developer.chrome.com/blog/anchor-positioning-api https://developer.chrome.com/blog/anchor-positioning-api

mardifoufs 2y ago
I love articles with actual running examples, thanks! Now I'm wondering how quickly this will get adopted, it looks very cool!
- swyx 2y ago
  whats a reasonable expectation for this to get adopted across safari/firefox/edge? 1yr? 3yrs?
  - chrishtr 2y ago
    Implementation already begun for Firefox: https://groups.google.com/a/mozilla.org/g/dev-platform/c/4cbytMKbHtg?pli=1 https://groups.google.com/a/mozilla.org/g/dev-platform/c/4cb...
hkdobrev 2y ago
The source link at the top of the article leads to a 404.
oddgoo 2y ago
Fantastically illustrated and interactive article! I wonder if/how Tailwind will grow to adapt this, as I'm pretty happy with their abstractions now.