- From: Xiaocheng Hu via GitHub <sysbot+gh@w3.org>
- Date: Thu, 02 Feb 2023 00:15:46 +0000
- To: public-css-archive@w3.org
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