[csswg-drafts] [css-anchor-position-1] Alternative syntax for auto position fallback (#9196)

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

== [css-anchor-position-1] Alternative syntax for auto position fallback ==
The [current spec](https://drafts.csswg.org/css-anchor-position-1/#fallback-automatic) uses `auto` and `auto-same` keywords in the `anchor()` function to create automatic position fallbacks, e.g., `left: anchor(auto); right: auto`.

I think this need to be reworked. Reasons:
- I've heard a lot of complaints that `anchor(auto)` and `anchor(auto-same)` are hard to understand
- `anchor(auto)` uses a special inset value to trigger auto fallbacks, and the generated fallbacks affect inset values only. This will no longer make sense if we allow more properties (like margins) in `@position-fallback`, which I think is likely to happen (see also #9195)

## Proposal

Remove everything about the `auto` and `auto-same` anchor side keywords, and:

### Add a new `position-fallback-auto` property

```
position-fallback-auto: none | flip-block | flip-inline | flip-x | flip-y | flip-both | compass
```

A `none` value means no auto fallbacks are generated.

A `flip-block` value creates a fallback style where, intuitively, all the block-axis values are flipped. Specifically:
- All the `*-block-start` and `*-block-end` property values swapped
- The `align-*` properties are flipped to the other side (e.g., `align-self: start` --> `align-self: end`)
-  In addition, for any `anchor()` function used in the block axis:
   - The anchor side keyword is flipped to the other side (e.g., `inset-block-start: anchor(start)` --> `inset-block-end:anchor(end)`)
   - The anchor percentage is changed to 100% minus that percentage (e.g., `inset-block-start: anchor(30%)` --> `inset-block-end:anchor(70%)`)

The other `flip-*` values for a single axis are similar.

The `flip-both` value creates 3 fallback styles: block axis flipped, inline axis flipped, then both axes flipped.

The `compass` value allows creating fallback positions around the anchor (e.g., top, left, bottom, right). Specifically:
- 1st fallback style swaps the block and inline property values of the base style
- 2nd fallback style is the same "both axes flipped" style as in `flip-both`
- 3rd fallback style swaps the block and inline property values of the previous fallback style

#### Usage in `@try` block

The property can also be used in a `@try` block to create additional fallbacks based on a `@try` block style. This part is similar to the current spec and hence omitted.

### Add new `same` and `opposite` anchor side keywords

The current `auto` and `auto-same` keywords are also useful for non-fallback purposes. For example, `inset: anchor(auto-same)` creates an inset-modified containing block that's the same as the anchor box.

To support this use case, we add `same` and `opposite` anchor side keywords. They are evaluated the same as the current `auto-same` and `auto`, but don't create any fallbacks.

Also, `same` and `opposite` are not swapped in `flip-*` fallbacks.

## Minor discussion topics

- As `flip-both` and `rotate` create multiple fallbacks, maybe we want a syntax to specify the ordering?
- More ways (keywords) to generate fallbacks?

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


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

Received on Tuesday, 15 August 2023 22:38:58 UTC