Re: [csswg-drafts] [css-anchor] Allow anchoring to pointer (#8639)

There is one important aspect that I think should be mentioned: if we're going to add an ability to attach something to the cursor, I think it would be very important to also be able to attach something to the `document.activeElement`, use the currently focused element as the fallback for the pointer, or something else.

This would be _kinda_ possible by assigning the `anchor-name` dynamically to the element with the `:focus` or `:focus-visible` (though, this method would currently [lack transitions](https://github.com/w3c/csswg-drafts/issues/8181#issuecomment-1469910645)), but I think we need to think if we would want to have something that could easily incorporate both methods?

If we could come up with something that could allow developers not to forget about the keyboard users when assigning things to the cursor — it would be great! Otherwise, they would need to handle this by themselves somehow, but I'm not yet sure how this would look code-wise. Probably something like using the focus-visible as default (using the center of this element, or something else? Or, as the cursor does not have dimensions, maybe the sides used with the pointer could determine the position for the active element fallback?), then falling back to the pointer — basically this example — https://codepen.io/kizu/pen/PodVKxG — but where instead of the fallback element we'd have the pointer.

If we could somehow combine this into one easy to use thing in CSS, I think it could potentially prevent a number of developer mistakes. We could also still provide an ability to target _only_ the pointer or active element, but the most simple case, imho, should target both.

I would also want to provide some other possible use-cases for pointer and/or active-element anchoring:

- A tooltip following the cursor (existing js implementation of tooltips often has this, for example — https://atomiks.github.io/tippyjs/#follow-cursor).
    <video src="https://user-images.githubusercontent.com/177485/227768977-d3e57f20-e545-4c48-adec-0f394251d18f.mov" />

    (alt: A video showing the different ways the tooltips stick to the cursor in the tippy.js implementation)

- CSS-only implementation for more forgiving dropdown menu's hover areas. [CSS-Tricks article about this](https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/):
    ![An image showing a UI with a triangle starting from a cursor over a menu item and going to the left side of the dropdown menu to the right](https://user-images.githubusercontent.com/177485/227768776-1e05c162-3643-452c-86b4-7aa6abc71ecf.png)
    Not sure if pointer positioning would be the only thing required to achieve this (we would probably need something to actually calculate the angle etc), but it would make things much easier, as we could use the pointer's position for one side of our connecting triangle, and the left side of a popover as the other side.

- A hover/focus state that follows the pointer/focus. There are probably hundreds of examples of this, where people are implementing something like this by either adding js that assigns a local x and y coordinates for a button to show a shiny gradient, like in this example by @LeaVerou — https://codepen.io/leaverou/pen/qBEYGeq —  though this would require us to use the anchor values not just for the inset properties or dimensions, but for things like background-position (see https://github.com/w3c/csswg-drafts/issues/8586).


-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8639#issuecomment-1484056697 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 26 March 2023 10:40:01 UTC