Re: [csswg-drafts] [css-logical] Flow-relative syntax for `margin`-like shorthands (#1282)

The only issue that prevents solutions that use the syntax of the property value to decide between logical and physical from being implemented [seems to be](https://github.com/w3c/csswg-drafts/issues/1282#issuecomment-1105554499) that the user agent should know at parse time what happens with `var()` expressions. I would consider this an edge case, so my suggestion would be to simply take @chharvey's [suggestion](https://github.com/w3c/csswg-drafts/issues/1282#issuecomment-1105401257) with the `/`-syntax (e.g. `margin: 1em / 2em`) and let authors explicitly declare what should happen with `var()` expressions, but only when they actually need to use them. That way, authors would have to write a lot less repeated and ugly code where every logical property shorthand includes a `!logical` or some sort of `-logical` suffix.

First of all, if no `var()` expressions occur in the property declaration, the shorthand expands to either the physical or the logical version, depending on the syntax of the value:
```css
.element {
 margin: 1em 2em; /* physical */
 margin: 1em 2em 3em 4em; /* physical */
}
```
```css
.element {
 margin: 1em / 2em; /* logical */
 margin: 1em 2em / 3em 4em; /* logical */
}
```

If a `var()` expression occurs in the property's value and the author hasn't specified that the property value is a logical shorthand, the user agent would assume that the variable contains a physical shorthand with a syntax of e.g. `[<length-percentage> | auto]{1,4}`:
```css
.element {
 margin: var(--margin); /* physical */
}
```
In this case, when the computed value of `--margin` doesn't match the syntax `[<length-percentage> | auto]{1,4}`, `margin` gets invalid at computed value time. So here:
```css
.element {
 --margin: 1em / 2em;
 margin: var(--margin); /* invalid at computed value time */
}
```
`margin` would become invalid at computed time because `--margin` is assumed to contain a physical shorthand. This is, I think, how it is currently implemented and I wouldn't change anything about it.

If the author wants their property that includes a `var()` expression to be treated by the user agent as logical, they should be able to explicitly opt-in to this behavior with a `!logical` keyword at the end of the property value (or something similar), but make it optional for property declarations that do not contain a `var()` expression:
```css
.element {
 --margin: 1em / 2em;
 margin: var(--margin) !logical;
}
```
In this example:
```css
.element {
 margin: 1em / 2em !logical; /* !logical would be optional */
}
```
the `!logical` would be optional because the user agent already knows that `margin` is a logical longhand from the `/`. Also, the following examples would be invalid:
```css
.element {
 margin: 1em 2em !logical; /* invalid */
}
```
```css
.element {
 --margin: 1em 2em;
 margin: var(--margin) !logical; /* invalid at computed value time */
}
```
Another thing to consider is what should happen when the property value consists of multiple `var()` expressions and/or a mixture of `var()` expressions and static values.

If the property value neither contains a `/` nor a `!logical` at the end, the user agent expands the shorthand to its physical longhands:
```css
.element {
 --margin-top-bottom: 1em;
 --margin-left-right: 2em;
 margin: var(--margin-top-bottom) var(--margin-left-right); /* physical */
}
```
If the property value directly contains a `/`, the property is treated as logical:
```css
.element {
 --margin-block: 1em;
 --margin-inline: 2em 3em;
 margin: var(--margin-block) / var(--margin-inline); /* logical, a !logical is optional */
}
```
```css
.element {
 --margin-block: 1em;
 margin: var(--margin-block) / 2em 3em; /* logical, a !logical is optional */
}
```
If the property value has `!logical` set and does not contain a `/`, the variables themselves should contain a `/`:
```css
.element {
 --firt-margin-part: 1em /;
 --second-margin-part: 2em;
 margin: var(--first-margin-part) var(--second-margin-part) !logical; /* logical */
}
```

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


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

Received on Saturday, 17 September 2022 08:55:02 UTC