Re: [csswg-drafts] [css-anchor-position-?] Add a ::tether pseudo-element (#9271)

I wanted to add some examples of what I meant by complicated `::tether` cases.

Here is the exploration that I did that I would use to show them: https://codepen.io/kizu/pen/zYMmVJd (at first, I wanted to write an article about it and my findings in it, but couldn't come up with a cohesive text, so I would contribute my thoughts on the related issues instead).

<details>
<summary>They take a bunch of vertical space, so putting them inside details</summary>

<img width="366" alt="A screenshot of a popover positioned tightly above the anchor, without a space for a tether element." src="https://github.com/w3c/csswg-drafts/assets/177485/09590ca1-c8b1-444d-bc0e-a3d1e096b211">

What if there is no space between the anchor and the abspos? Would we need to add an explicit `min-height` in this case to the `::tether`, and require it to align with the bottom of the abspos still?

- - -
    
https://github.com/w3c/csswg-drafts/assets/177485/505e4c29-956d-4e6f-9375-98225e1c0390

The corner-case can be the most complicated, probably: if we want to have an arrow, then we would need to have a way to also have a certain min-width, stop before the border-radius ends, and then also somehow determine its position for the corner case: should it be on the block or inline side? How the `::tether` would know about which side it is in, given that in all cases that could be `start / start`?

- - -

<img width="374" alt="A screenshot of a popover positioned exactly at the center of a popover." src="https://github.com/w3c/csswg-drafts/assets/177485/e07e6c3f-bc41-46cf-97bb-ac049bf24c33">

When we position the popover at the center of an anchor — should it have a `::tether`? Where?

- - -

<img width="605" alt="A screenshot of a popover positioned far from the anchor, making the tether element span the length from the abspos to the anchor." src="https://github.com/w3c/csswg-drafts/assets/177485/f4f0cb4d-bd41-4e09-bb99-784a849bbefb">

How should the default styles be defined for cases like this? Something like an `aspect-ratio`?

- - -

<img width="175" alt="A screenshot of a popover positioned over a very tiny dot of an anchor, making the tether very thin and high." src="https://github.com/w3c/csswg-drafts/assets/177485/8cb60754-3898-45b8-ae08-4ebe55994d34">

If the anchor is very small, should the tether follow its size, or should it have that min-width in this case and be centered? Or should it be very small?

- - -

In the 2 previous cases, I can see designs where we could want to have the size of the `:tether` exactly as on the screenshots, like for the “connecting line” style of tethering, where it must go from one element to another. So maybe we'd need to have some control over how the `::tether` is aligned in its “box”, making it so the actual tether area is actually akin to the grid cell, with the element itself being able to either stretch, or be aligned in some way (with some auto alignment to the closest side of the abspos maybe?)

- - -

</details>

As a sidenote, speaking of the idea mentioned by @tabatkins about the border going over the tether — is there somewhere an issue about this?

I can see that effect a bit separately from the `::tether` itself, where we'd want to be able to “merge” (in vector editor terms) multiple rectangles into one shape, allowing the background to seamlessly go through multiple elements, and decorations like borders and shadows following the edge in some way. Probably similar to how Safari handles the default outline in the case of elements going beyond their parents? See https://codepen.io/kizu/pen/QWzMZZG (though the border-radius looks _weird_ in it — I guess it is not a trivial thing)

<img width="287" alt="A screenshot of a focus outline from Safari showing how it goes around the element that is absolutely positioned on the bottom of a block." src="https://github.com/w3c/csswg-drafts/assets/177485/b5da19a7-b54e-43b6-9ff1-23c43881deae">

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


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

Received on Friday, 15 September 2023 19:59:07 UTC