Re: [csswg-drafts] [css-anchor-1] More declarative syntax for simple cases (#7757)

There's still value if we allow `anchor(auto)` in position fallback list: to reduce verbosity of a complex position fallback list.

For example, [the current position fallback list of `<selectmenu>`'s listbox](https://source.chromium.org/chromium/chromium/src/+/0c4306fc554c80506eb0f9b833a5d2a5fdd452d5:third_party/blink/renderer/core/html/resources/selectmenu.css) is (assuming #8059 is fixed):

```css
@position-fallback -internal-selectmenu-listbox-default-fallbacks {
  /* Below the anchor, left-aligned, no vertical scrolling */
  @try {
    inset-block-start: anchor(self-end);
    inset-inline-start: anchor(self-start);
  }
  /* Below the anchor, right-aligned, no vertical scrolling */
  @try {
    inset-block-start: anchor(self-end);
    inset-inline-end: anchor(self-end);
  }
  /* Over the anchor, left-aligned, no vertical scrolling */
  @try {
    inset-block-end: anchor(self-start);
    inset-inline-start: anchor(self-start);
  }
  /* Over the anchor, right-aligned, no vertical scrolling */
  @try {
    inset-block-end: anchor(self-start);
    inset-inline-end: anchor(self-end);
  }
  /* Below the anchor, left-aligned, fill up the available vertical space */
  @try {
    inset-block-start: anchor(self-end);
    block-size: -webkit-fill-available;
    inset-inline-start: anchor(self-start);
  }
  /* Below the anchor, right-aligned, fill up the available vertical space */
  @try {
    inset-block-start: anchor(self-end);
    block-size: -webkit-fill-available;
    inset-inline-end: anchor(self-end);
  }
  /* Over the anchor, left-aligned, fill up the available vertical space */
  @try {
    inset-block-end: anchor(self-start);
    block-size: -webkit-fill-available;
    inset-inline-start: anchor(self-start);
  }
  /* Over the anchor, right-aligned, fill up the available vertical space */
  @try {
    inset-block-end: anchor(self-start);
    block-size: -webkit-fill-available;
    inset-inline-end: anchor(self-end);
  }
}
```

With auto positioning, we can shrink its size in half (with some difference that shouldn't matter):

```css
@position-fallback -internal-selectmenu-listbox-default-fallbacks {
  /* Below/above the anchor, left-aligned, no vertical scrolling */
  @try {
    inset-block-start: anchor(auto);
    inset-inline-start: anchor(self-start);
  }
  /* Below/above the anchor, right-aligned, no vertical scrolling */
  @try {
    inset-block-start: anchor(auto);
    inset-inline-end: anchor(self-end);
  }
  /* Below/above the anchor, left-aligned, fill up the available vertical space */
  @try {
    inset-block-start: anchor(auto);
    block-size: -webkit-fill-available;
    inset-inline-start: anchor(self-start);
  }
  /* Below/above the anchor, right-aligned, fill up the available vertical space */
  @try {
    inset-block-start: anchor(auto);
    block-size: -webkit-fill-available;
    inset-inline-end: anchor(self-end);
  }
}
```

(this also means that in the generated fallback positions, there should also be sizing and box alignment property values copied from the base style or the base `@try` rule)

---

Besides, the `auto` keyword only allows us to pick the opposite physical side.

What if we want to use the same side with automatic flipping? For example, what if we have `left: anchor(auto-same-side)` (sorry for bad at naming) that expands into `left: anchor(left)` and `right: anchor(right)` ? Then the selectmenu position fallback can be further simplified into:

```css
@position-fallback -internal-selectmenu-listbox-default-fallbacks {
  /* Below/above the anchor, left/right-aligned, no vertical scrolling */
  @try {
    inset-block-start: anchor(auto);
    inset-inline-start: anchor(auto-same-side);
  }
  /* Below/above the anchor, left/right-aligned, fill up the available vertical space */
  @try {
    inset-block-start: anchor(auto);
    inset-inline-start: anchor(auto-same-side);
    block-size: -webkit-fill-available;
  }
}
```

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


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

Received on Thursday, 2 February 2023 00:15:47 UTC