Re: [csswg-drafts] [css-sizing] Adding a 'size' shorthand for 'width'/'height'

I've toyed around with this idea too - using a shorthand for both `width` and `height` called `size` that sets a value for both, kind of like how JavaScript can express either of these:

```javascript
var width = 100
var height = 100
```

and also:

```javascript
var width = height = 100
```

However, I don't think what I was really searching for was actually a `size` property, but a syntax that would let me 'chain' properties that share the same value. While I think the most-often requested use case for property chaining would be the `size` property, what if chaining was the new feature instead of just one new 'chained' property? Imagine this:

```css
div {
  width: 100px;
  height: 100px;
}
```

Can already become something like this thanks to CSS variables:

```css
div {
  --size: 100px;
  width: var(--size);
  height: var(--size);
}
```

That functions the same way we want, but you have to write more CSS to make them share the same variable here than just setting them to the same number separately. But what about something like:

```css
div {
  width, height: 100px;
}
```

I've just use a comma `,` here for a delimiter (maybe there's a better way) but this might be a more flexible solution for expressing this sort of thing than inventing new combined properties one at a time like `width` + `height` = `size`. What if CSS authors had the expressive ability to chain any two or more properties to set the same value?

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

Received on Thursday, 17 August 2017 16:24:23 UTC