- From: CSS Meeting Bot via GitHub <sysbot+gh@w3.org>
- Date: Tue, 13 Feb 2024 19:01:05 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed `[css-anchor-position-1] Alternative syntax for auto position fallback`, and agreed to the following:
* ``RESOLVED: adopt `position-try-*` with addition of inset-area into pos-try-opts``
<details><summary>The full IRC log of that discussion</summary>
<astearns> zakim, open queue<br>
<Zakim> ok, astearns, the speaker queue is open<br>
<bramus> TabAtkins: we had resolution to figure out details but do sth better for auto fallback<br>
<bramus> … we figured out the details (elika and I)<br>
<bramus> … want to hear about objections and opinions<br>
<bramus> … first, instead of single keyword in pos fallback prop that points to multiple try blocks we now have list of keywords in pos-try-options<br>
<dbaron> [insert whiteboard photo PXL_20240213_181237761.jpg at the end of the previous topic]<br>
<bramus> florian: this is flipping between options on the inset area and that only or on more things?<br>
<bramus> TabAtkins: more; 5 sets of props: inset-area, insets, margins, and sizing props, and alignment<br>
<bramus> … old way: `@position-fallback --foo { @try { … } @try { … } @try { … } … }`<br>
<bramus> … we would go through list 1 by 1<br>
<bramus> … hard to reuse<br>
<bramus> … too much indirection<br>
<fantasai> ... not clear how the automatically-generated fallbacks were interleaved<br>
<bramus> … new way: `@position-try --name { (styles) }`<br>
<bramus> … you make more than 1<br>
<bramus> … put them in `pos-try-options`<br>
<bramus> … `pos-try-options: --one, --two, …`<br>
<bramus> … it goes through each 1 by 1 until 1 is good<br>
<bramus> … also takes keywords, e.g. “flip me in the block axis”<br>
<bramus> … can be combined with custom options<br>
<florian> q?<br>
<florian> q+<br>
<astearns> ack florian<br>
<nicole> q+<br>
<bramus> florian: if you flip to 1 of th efallbacks tha tchagnes the computed values?<br>
<bramus> TabAtkins: yes<br>
<vmpstr> q+<br>
<bramus> florian: in the apple proposal there wasnt this?<br>
<bramus> TabAtkins: they only had ability to change `inset-area`<br>
<bramus> fantasai: now has its own property<br>
<bramus> … like jen pointed out: if you are using inset-area then there is a lot of code you need to write. you could also say inset-area<br>
<fantasai> as part of the list<br>
<fantasai> i.e. position-try-options: [ <dashed-ident> | <try-tactic> | <'inset-area'> ]#<br>
<miriam> +1 to the inset-area extension<br>
<bramus> chrishtr: so this ia future extension?<br>
<bramus> TabAtkins: yes<br>
<astearns> ack nicole<br>
<astearns> q+<br>
<bramus> nsull: like the naming them and comma separated list. could see in a design system this getting set up and having indiv componetns use them in different orders.<br>
<bramus> … good for reuse<br>
<bramus> +1<br>
<florian> q+<br>
<bramus> nsull: be pretty cool indeed. getting rid of the try blocks is good. felt clunky.<br>
<astearns> ack vmpstr<br>
<bramus> vmpstr: what do the flip keywords refer to? --fo and then flip-block? do I flip the block of the foo?<br>
<dbaron> [whiteboard erased without photo]<br>
<bramus> TabAtkins: say base style was `inset-area: bottom`<br>
<bramus> … will put you below anchor<br>
<bramus> … now `@position-try --top { inset-area: top}`<br>
<bramus> then `@postion-try --left { i-a: left }`<br>
<bramus> … `.popup { pos-try-options: --top, --left }`<br>
<bramus> … or could also say `flip-block` as the value<br>
<bramus> fantasai: this is more insteresting when you are doing things other than inset area<br>
<bramus> TabAtkins: yes …<br>
<bramus> … so (missed) start with `flip-block, --left, --left flip-inline`<br>
<bramus> … so (missed) start with `flip-block, --left, --left flip-x`<br>
<bramus> chrishtr: so the flip is a shorthand?<br>
<bramus> fantasai: a prebuilt try block basically<br>
<bramus> florian: the flip thing not only flips i-a but also margins, insets – the whole set of props<br>
<astearns> (and whatever we end up adding for anchors)<br>
<bramus> TabAtkins: e.g. a margin-top that become margin-bottom upon flipping<br>
<astearns> q?<br>
<bramus> vmpstr: so if you add just flip-x then i twould only filp the base sstyles across the x<br>
<bramus> TabAtkins: yes<br>
<bramus> vmpstr: and flip-start<br>
<bramus> TabAtkins: would flip the margin-top to bottom e tall<br>
<bramus> chrishtr: so 4 keywords?<br>
<bramus> TabAtkins: no … more (missed)<br>
<bramus> chrishtr: so 4 diagonals?<br>
<bramus> TabAtkins: only 1 becase you can combine with other keywords<br>
<bramus> [whiteboard erased without photo]<br>
<bramus> TabAtkins: new example with `pos-try-options: flip-block`<br>
<bramus> … or `flip-start` has same output (?)<br>
<bramus> s/has same output (?)/flips across the diagonal<br>
<bramus> then `flip-block flip-start` will first flip across the block and then the diagonal<br>
<bramus> s/then/…then/<br>
<bramus> chrishtr: and in RTL?<br>
<bramus> TabAtkins: you get the other diagonal<br>
<bramus> chrishtr: why is it called start?<br>
<bramus> TabAtkins: only flipping the start values, not the block values<br>
<vmpstr> is there a "rotate"<br>
<astearns> q?<br>
<bramus> … not married to the name<br>
<bramus> nsull: though it was a good name<br>
<bramus> … what about flip-inline?<br>
<bramus> TabAtkins: only flips the inline values<br>
<bramus> chrishtr: so `pos-try: --name` and special keywords?<br>
<bramus> fantasai: list of options<br>
<dbaron> [whiteboard photo PXL_20240213_183159888.jpg]<br>
<bramus> TabAtkins: name blocks or keywords or …<br>
<bramus> fantasai: can also put inset-area in there int he future<br>
<fantasai> So proposed syntax would be<br>
<bramus> astearns: concerned about it being a list property<br>
<dholbert> q+<br>
<fantasai> position-try-options: none | [ <dashed-ident> || <try-tactic> | <'inset-area'> ]#<br>
<astearns> ack astearns<br>
<fantasai> where <try-tactic> = flip-x | flip-y | flip-inline | flip-block | flip-start<br>
<bramus> TabAtkins: better than the prvious list which was expressed via at-rules<br>
<astearns> ack florian<br>
<bramus> … if and when we get addidtive cascade then this current sytnax will work better<br>
<bramus> florian: if we include the syntax extension to have `inset-area` so that you can skip at-rules then this looks like a good propopsal<br>
<bramus> … flip-start naming is weakest part though. needs bikeshedding<br>
<bramus> … cmoputed value of inset-area propably gonna be a lot simplear<br>
<bradk> q+<br>
<bramus> … right now the active what is the computed value (missed)<br>
<bramus> TabAtkins: if we expose things in cqs we now have a single clearing house of what the list of ?? is. much clear to communicate to author and let them do CQ against it<br>
<bramus> fantasai: (backs that up)<br>
<astearns> ack dholbert<br>
<bramus> dholbert: when flipping across the diagonal from start-start, is there an optoin to do from the opposite diagonal start-end?<br>
<fantasai> s/(backs that up)/having a single list of options rather than multiple sources that automatically generate and interleave in non-obvious ways is imho a lot better/<br>
<kbabbitt> q+<br>
<bramus> TabAtkins: no. you can combine keywords.<br>
<florian> s/if we include the syntax extension to have inset-area so that you can skip at-rules/especially if we include the syntax extension to have inset-area so that you can skip at-rules when you don't need them, and include the || between dashed-indent and try-tactic<br>
<bramus> dholbert: is there an equivalent keyword for flip-start htat uses similar longer names to th eother diag flip option?<br>
<bramus> TabAtkins: no, bc block inline and start toegheter are the start for all other permutations<br>
<florian> s/cmoputed value of inset-area propably gonna be a lot simplear/computed value of inset-area becomes a lot simpler: the active mode is the computed value<br>
<bramus> … not sure how you would spell them longer<br>
<bramus> dholbert: would be nice to reason about<br>
<bramus> TabAtkins: open for good names<br>
<bramus> dholbert: 2nd q: for --name options: would the syntax allow you use a variable that includes a --name?<br>
<bramus> TabAtkins: so `@position-try --left { left:var(--foo) }`?<br>
<bramus> dholbert: no.<br>
<bramus> … in the @position-try name<br>
<bramus> s/@position-try name/position-try-options property<br>
<bramus> TabAtkins: yes, you can assign to variable<br>
<astearns> ack bradk<br>
<bramus> bradk: if it flips, then a bottom margin would become top. Is it just marign or also border and padding?<br>
<bramus> TabAtkins: insets, inset-area, alignment, margins, and sizing props (width and height)<br>
<bramus> … not doing padding and border because implementation reasons<br>
<bramus> iank_: it is something like an internal thing of that box, vs the rest is external<br>
<bramus> … (??) tables. similar to border … painting properties<br>
<bramus> florian: could you use CQs to figure which configuration you are in and based ont hat change padding?<br>
<bramus> TabAtkins: yes. not explored yet but on our list to do … having a way to query whcih fallback you are in<br>
<dholbert> My example with css variables above (which should just work, per discussion) was something like: @position-try --left { ... } .my-tooltip { --brand-start: --left; position-try-options: var(--brand-start); }<br>
<bramus> … bare min change styling of children<br>
<astearns> idly wonders if there might be a way of specifying a combination of physical and logical properties such that some flip and some do not<br>
<bramus> … if querying based on fallback set you are in and you are not allowed to change that, then we dont have cyclic prolbems to style yourself either<br>
<bramus> … worst case only children<br>
<bramus> bradk: so you could havbe box shadow change<br>
<bramus> TabAtkins: yes<br>
<bramus> iank_: also ties into tether problem … change pos and style of the tether based on what position it is in<br>
<bramus> florian: interesting … with auto flip you can change a bunch of vlaues to allow them to transition … would a CQ also allow that? E.g. box shadow<br>
<bramus> … is the CQ type of flipping break animation?<br>
<bramus> TabAtkins: no; computed value will change and it will transition<br>
<bramus> … again, completely unspecified today but it works<br>
<astearns> ack kbabbitt<br>
<bramus> kbabbitt: q about grammar …<br>
<bramus> … double || there for dashed items? Is that intended?<br>
<bramus> TabAtkins: no, doenst allow you to repeat … only pick multiple from the set<br>
<vmpstr> i'm wondering if flip-start should be transpose, and whether there's any value in rotate-cw and rotate-ccw as additional values to rotate clock and counter-clock wise<br>
<bramus> kbabbitt: there was an optoin about wher eyou could hav emultiple try tactcis, but dont see how that is possible with current grammar<br>
<bramus> TabAtkins: (clarifies syntax)<br>
<bramus> kbabbitt: oh, got it<br>
<bramus> astearns: want to resolve?<br>
<bramus> TabAtkins: want to talk about next aspect, which is not this complicated<br>
<bramus> … resolution is for later on<br>
<bramus> TabAtkins: so next part, a lot of JS libs allow you to put yourself into area with the most space.<br>
<bramus> … we built that into the spec<br>
<bramus> … `pos-try-order` property<br>
<bramus> … couple of keywords; which size you care about<br>
<bramus> … `most-*`<br>
<bramus> florian: no `most-area`?<br>
<bramus> TabAtkins: no because (missed)<br>
<vmpstr> s/(missed)/ill defined and nobody else offers it/<br>
<bramus> … example: `pos-try-options: --top, --bottom`<br>
<bramus> … want to start with biggest<br>
<bramus> … so `pos-try-order: most-height`<br>
<bramus> … currently, to match behavior of libraries we will also try base styles files and only if there is overflow we try the rest<br>
<bramus> … could add options here to include base style as one of the reorderable options<br>
<florian> q+<br>
<bramus> … more expensive because you need to do mutliple stylings<br>
<bramus> … but possible<br>
<bramus> … achiecable by forcing overflow in base styles<br>
<bramus> fantasai: dont do that! terrible!<br>
<bramus> TabAtkins: could also add option to skip basesyles immediately<br>
<bramus> … gonna skip `pos-try-final` for now<br>
<bramus> … so `pos-try-options` and `pos-try-order` to do ???<br>
<bramus> fantasai: not the size of the pos box we are checking but size of IMCB so you dont have to do layout<br>
<bramus> TabAtkins: yes, to resolve the insets<br>
<bramus> fantasai: show the shorthand<br>
<bramus> TabAtkins: that is order followed by options<br>
<bramus> … “ i want the most-width of these”<br>
<bramus> … `position-try` property<br>
<astearns> ack florian<br>
<astearns> q+<br>
<bramus> florian: in itself pickin gorder makes sense. confused about if you pick the one with tallest heigth first, then you are only gonna pick from smaller options?<br>
<bramus> … might vary on the other axis though<br>
<bramus> … what happens if it fits nowehere?<br>
<bramus> TabAtkins: you can adjust properties in the otpions (e.g. max-ehgith) so you might fit in smaller space<br>
<bramus> …when nothing fits you stick with last successful fallback that we used, so you remain stable if nothing works.<br>
<bramus> … there is `position-try-final` to control this<br>
<bramus> … lets you opt in to falling back to largest or first option<br>
<bramus> … (and more)<br>
<bramus> … can also set it to `hide`<br>
<bramus> … vmpstr has use case for it<br>
<bramus> florian: I dont know if theyse keywords if everything we ever need, but seems good extension points<br>
<bramus> … eg “go clockwise”<br>
<bramus> astearns: look at the shorthand<br>
<dholbert> q+<br>
<bramus> … how wedded are you to having the shorthand?<br>
<bramus> … i dont get the idea that it is going to use the first one if it fits here in this example<br>
<bramus> TabAtkins: it will take ??<br>
<bramus> fantasai: when we first designed this oy have base styles and various fallbacks in optoin list whih concat in complete list: base + transforms<br>
<bramus> … and then you re-sort<br>
<bramus> … so you propose to only re-sort the fallbacks?<br>
<bramus> TabAtkins: by default<br>
<bramus> … bc that is how material design’s anchor lib work and their arg makes sense<br>
<bramus> astearns: so pos-try is only listing th e alternats<br>
<bramus> nsull: do you expect authors to ???<br>
<bramus> TabAtkins: they might<br>
<bramus> … excited to see what we can make easier<br>
<bramus> … similar to well named common cases.<br>
<astearns> ack dholbert<br>
<astearns> ack astearns<br>
<bramus> dholbert: so you choose either most-width or most-height?<br>
<bramus> … no secondarily option for “most space”?<br>
<bramus> TabAtkins: not currently. use-cases needed.<br>
<bramus> … havent seen this in js libs<br>
<bramus> … do we wan tto resolve on this as basis for new model?<br>
<bramus> astearns: can do indiv parts?<br>
<bramus> TabAtkins: would like all<br>
<bramus> florian: to be clear: only as a starting point<br>
<bramus> TabAtkins: yes<br>
<bramus> fantasai: yes<br>
<bramus> nsull: seems like a good improvement overall<br>
<bramus> florian: current thing does not include `inset-area` built in<br>
<bramus> fantasai: can build that in<br>
<bramus> fantasai: proposed resolution: adopt `position-try-*` with addition of inset-area into pos-try-opts<br>
<bramus> astearns: concerns?<br>
<bramus> astearns: objections?<br>
<una> LGTM<br>
<bramus> RESOLVED: adopt `position-try-*` with addition of inset-area into pos-try-opts<br>
</details>
--
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9196#issuecomment-1942197882 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 13 February 2024 19:01:08 UTC