[css-anchor] Detecting active @position-fallback · Issue #8171 · w3c/csswg-drafts (original) (raw)

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.