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

After putting our heads together, @fantasai and I have this proposal for the "details to be worked out over time":

0. We removed all the automatic magic of creating try options from the spec in #9362, so no fallback options are created unless explicitly.

1. We switched the `position-fallback` property to three associated properties:
    * `position-try-options` which is a comma-separated list of fallback options, either named or generated from the base styles by a transform procedure.
        ```
        position-try-options: 
           none | [ <dashed-ident> | <try-tactic> ]#
        <try-tactic> = flip-block || flip-inline || flip-start
        (initial value: none)
        ```

        The try tactics defined here mirror across the block axis, inline axis, or the start-start to end-end diagonal, respectively.

        We could add "shorthand" keywords here that expand to common sets of options, such as `drop-down` expanding to `flip-inline, flip-block, flip-block flip-inline`, but we're leaving that for later right now.

    * `position-try-order` which specifies how to sort/prioritize the list of options: in specified order, or by largest inset-modified containing block size
        ```
        position-try-order: normal | <try-size>
        <try-size> = most-width | most-height | 
                     most-block-size | most-inline-size
        (initial value: normal)
        ```

    * `position-try-fallback` which specifies what to do if all of the options overflow the inset-modified containing block.
        ```
        position-try-fallback: always || [ first | <try-size> ] | hide
        (initial value: first)
        ```

        By default it'll use the last try-option that worked, and only pay attention to this property if the element is being rendered for the first time. If you specify 'always', it'll instead always use the specified option when they all fail, even if it's different from the last successful option.

        `hide` acts similar to a strong `visibility: hidden` - the element still has a laid-out box and doesn't paint or capture mouse events, but it also doesn't affect scrollable overflow of its container, and can't be overridden on children.

2. We changed `@position-fallback` rules containing `@try` blocks to `@position-try`, which gives a single named style block to reference from `position-try-options`:
    ```
    /* old syntax */
 @position-fallback --foo {
  @try { top: anchor(outside); }
  @try { bottom: anchor(outside); }
 }
 
 /* new syntax */
 @position-try --foo-1 { top: anchor(outside); }
 @position-try --foo-2 { bottom: anchor(outside); }
    ```

3. We added a `position-try` shorthand for convenience
    ```
    position-try: <'position-try-order'>? <'position-try-options'> [, <'position-try-fallback'>? ]
    ```
    For example:
    ```
    position-try: most-width flip-block, flip-block flip-inline, --foo, first;
    ```
    This:
    * specifies three style options (2 auto-generated, one provided by a `@position-try --foo {...}` block) in addition to the base style.
    * sorts all four of these according to which produces the widest inset-modified containing block.
    * if all the options fail on first render, choosing the first one (the widest of the four); on subsequent renders, it uses the most recent successful option (i.e. it tries to be stable).

This system consolidates the fallback system into a single, explicit list, which makes it a lot easier to understand what's happening. Authors who want to package up a particular list can stuff it into a CSS variable.

It also leaves open the possibility of e.g. inlining `inset-area` syntax as one of the `position-try-options` items, similar to the Apple proposal from last July.

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


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

Received on Friday, 26 January 2024 22:39:27 UTC