[css-anchor-position-1] Alternative syntax for auto position fallback · Issue #9196 · w3c/csswg-drafts (original) (raw)

The current spec 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 [css-anchor-position-1] Allow more properties in position fallbacks #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?