[csswg-drafts] [css-anchor] Detecting active @position-fallback (#8171)

jh3y has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-anchor] Detecting active @position-fallback ==
Currently, we don't have a proposed way to detect which fallback is currently active.

A huge use case for this is if we want to display arrows on elements such as tooltips. If I have a position-fallback that goes from top to bottom:

```
@position-fallback --vertical {
  @try {
    top: anchor(bottom);
  }
  @try {
    bottom: anchor(top);
  }
}
```

If my arrow is styled on the top of my element. But then my element is moved to be on top of the anchor. My arrow now points to space potentially.

Although not possible with the spec as is, being able to use non-inset properties would be interesting inside the fallback. 

```
@position-fallback --vertical {
  @try {
    --on-the-bottom: 1;
    top: anchor(bottom);
  }
  @try {
    --on-the-top: 1;
    bottom: anchor(top);
  }
}
```

You could use that custom property like a boolean flip for the arrow position. But, I imagine there's a more elegant solution to this potentially.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8171 using your GitHub account


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

Received on Thursday, 1 December 2022 22:52:06 UTC