Re: [csswg-drafts] [css-logical] Syntax for `margin`-like shorthands

@cork I do like your idea of `margin-mode`. That way the syntax of the `margin` property would not have to change. The syntax of `margin-mode` would be
```
[ physical | relative ] | inherit | initial | unset
```
with the `initial` value as `physical`.

One upside would be that you don't have to change the `margin` property when you want to change the mode (resulting in more readable diff). Nevertheless, [a recent change](https://drafts.csswg.org/css-logical-props/#changes) of the spec indicates a different order when relative values are used.

```
p {
  margin: 1px 2px 3px 4px;
  /* equivalent to standard order (top, right, bottom, left) */
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 3px;
  margin-left: 4px;
}
p.relative {
  margin-mode: relative; /* <-- added */
  margin: 1px 2px 3px 4px;
  /* equivalent to new order: */
  margin-block-start: 1px; /* `top` in LTR-TB */
  margin-inline-start: 2px; /* `left` in LTR-TB */
  margin-block-end: 3px; /* `bottom` in LTR-TB */
  margin-inline-end: 4px; /* `right` in LTR-TB */
}
```

So in the example above, by adding `margin-mode: relative;`, you would have to switch `2px` and `4px` in the `margin` declaration.

Another downside: you would have to have corresponding "mode" properties for the following, which could be a bit much:
- padding-mode
- border-width-mode
- border-style-mode
- border-color-mode
- border-radius-mode


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

Received on Thursday, 27 April 2017 18:15:07 UTC